/* ============================================================
   LR BuildTech — Design System Tokens v1.0
   Aplica este archivo en ambos sistemas: BIM IRM y Vista Obra
   Import: @import 'lr-buildtech-tokens.css';
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS
  ---------------------------------------------------------- */

  /* Primarios */
  --lr-navy-900: #001a33;
  --lr-navy-800: #002647;
  --lr-navy-700: #003366;   /* ← Deep Navy: color principal de marca */
  --lr-navy-600: #004080;
  --lr-navy-500: #0050a0;
  --lr-navy-100: #d6e4f0;
  --lr-navy-50:  #edf4fa;

  /* Acento */
  --lr-cyan-500: #00e5ff;   /* ← Tech Cyan: acento, highlights, CTA secundario */
  --lr-cyan-400: #33eaff;
  --lr-cyan-300: #66f0ff;
  --lr-cyan-900: #003d4d;   /* Texto sobre fondo cyan */

  /* Neutrales estructurales */
  --lr-concrete-white: #f5f5f3;   /* Fondo de página */
  --lr-concrete-100:   #ebebea;
  --lr-concrete-200:   #d4d4d2;
  --lr-concrete-400:   #9a9a97;
  --lr-concrete-600:   #5c5c5a;
  --lr-concrete-800:   #2a2a28;
  --lr-concrete-900:   #141413;

  /* Semánticos */
  --lr-success: #1d9e75;
  --lr-success-bg: #e1f5ee;
  --lr-warning: #ba7517;
  --lr-warning-bg: #faeeda;
  --lr-danger:  #c0392b;
  --lr-danger-bg: #fdecea;
  --lr-info:    #003366;
  --lr-info-bg: #edf4fa;


  /* ----------------------------------------------------------
     TOKENS DE COLOR — Roles semánticos UI
     Estos son los que usas en componentes, no los raw de arriba
  ---------------------------------------------------------- */

  /* Fondos */
  --color-bg-page:        var(--lr-concrete-white);
  --color-bg-surface:     #ffffff;
  --color-bg-surface-2:   var(--lr-navy-50);
  --color-bg-sidebar:     var(--lr-navy-700);
  --color-bg-sidebar-hover: var(--lr-navy-600);
  --color-bg-sidebar-active: var(--lr-navy-800);

  /* Texto */
  --color-text-primary:   var(--lr-concrete-900);
  --color-text-secondary: var(--lr-concrete-600);
  --color-text-muted:     var(--lr-concrete-400);
  --color-text-inverse:   #ffffff;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.55);
  --color-text-brand:     var(--lr-navy-700);
  --color-text-accent:    var(--lr-cyan-900);

  /* Bordes */
  --color-border-default: var(--lr-concrete-200);
  --color-border-strong:  var(--lr-concrete-400);
  --color-border-brand:   var(--lr-navy-700);
  --color-border-accent:  var(--lr-cyan-500);

  /* Interactivos */
  --color-btn-primary-bg:      var(--lr-navy-700);
  --color-btn-primary-bg-hover: var(--lr-navy-600);
  --color-btn-primary-text:    #ffffff;
  --color-btn-secondary-bg:    transparent;
  --color-btn-secondary-border: var(--lr-navy-700);
  --color-btn-secondary-text:  var(--lr-navy-700);
  --color-btn-accent-bg:       var(--lr-cyan-500);
  --color-btn-accent-text:     var(--lr-cyan-900);

  /* Links */
  --color-link:       var(--lr-navy-700);
  --color-link-hover: var(--lr-navy-600);

  /* Focus ring */
  --color-focus-ring: var(--lr-cyan-500);


  /* ----------------------------------------------------------
     TIPOGRAFÍA
  ---------------------------------------------------------- */

  /* Familias */
  --font-display: 'Montserrat', sans-serif;   /* Títulos, headings */
  --font-body:    'Inter', sans-serif;         /* Cuerpo, UI general */
  --font-mono:    'JetBrains Mono', monospace; /* Códigos ISO, IDs, datos técnicos */

  /* Escalas */
  --text-xs:   11px;
  --text-sm:   12px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;

  /* Pesos */
  --font-regular: 400;
  --font-medium:  500;
  --font-bold:    600;   /* Solo para display/Montserrat */

  /* Line heights */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  /* Letter spacing */
  --tracking-tight:  -0.3px;
  --tracking-normal:  0px;
  --tracking-wide:    0.5px;
  --tracking-wider:   1px;
  --tracking-widest:  1.5px;


  /* ----------------------------------------------------------
     ESPACIADO — escala de 4px
  ---------------------------------------------------------- */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;


  /* ----------------------------------------------------------
     BORDES Y RADIOS
  ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  --border-thin:    0.5px;
  --border-default: 1px;
  --border-medium:  1.5px;
  --border-thick:   2px;


  /* ----------------------------------------------------------
     SOMBRAS — mínimas, acordes al estilo "plain"
  ---------------------------------------------------------- */

  --shadow-none: none;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-focus: 0 0 0 3px rgba(0, 229, 255, 0.35);


  /* ----------------------------------------------------------
     COMPONENTES — Sidebar
  ---------------------------------------------------------- */

  --sidebar-width:         220px;
  --sidebar-bg:            var(--lr-navy-700);
  --sidebar-text:          rgba(255, 255, 255, 0.75);
  --sidebar-text-active:   #ffffff;
  --sidebar-item-hover-bg: var(--lr-navy-600);
  --sidebar-item-active-bg: var(--lr-navy-800);
  --sidebar-accent-bar:    var(--lr-cyan-500);  /* barra izquierda ítem activo */
  --sidebar-logo-text:     #ffffff;
  --sidebar-sub-text:      rgba(255, 255, 255, 0.4);


  /* ----------------------------------------------------------
     COMPONENTES — Cards de proyecto
  ---------------------------------------------------------- */

  --card-bg:           var(--color-bg-surface);
  --card-border:       var(--color-border-default);
  --card-border-active: var(--lr-navy-700);   /* borde top de card activo */
  --card-radius:       var(--radius-xl);
  --card-padding:      var(--space-6);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);


  /* ----------------------------------------------------------
     COMPONENTES — Badges de estado
  ---------------------------------------------------------- */

  --badge-active-bg:   var(--lr-success-bg);
  --badge-active-text: var(--lr-success);
  --badge-draft-bg:    var(--lr-concrete-100);
  --badge-draft-text:  var(--lr-concrete-600);
  --badge-warning-bg:  var(--lr-warning-bg);
  --badge-warning-text: var(--lr-warning);


  /* ----------------------------------------------------------
     COMPONENTES — Barras de progreso ISO
  ---------------------------------------------------------- */

  --progress-track-bg:    var(--lr-concrete-100);
  --progress-track-height: 4px;
  --progress-track-radius: var(--radius-full);

  /* Colores por documento ISO */
  --progress-pir:     #1d9e75;   /* verde  */
  --progress-eir:     #003366;   /* navy   */
  --progress-prebep:  #ba7517;   /* amber  */
  --progress-bep:     #c0392b;   /* rojo   */


  /* ----------------------------------------------------------
     COMPONENTES — Botones
  ---------------------------------------------------------- */

  --btn-height-sm: 32px;
  --btn-height-md: 38px;
  --btn-height-lg: 44px;
  --btn-padding-x: var(--space-4);
  --btn-radius:    var(--radius-md);
  --btn-font:      var(--font-display);
  --btn-font-size: var(--text-sm);
  --btn-font-weight: var(--font-bold);
  --btn-tracking:  var(--tracking-wide);


  /* ----------------------------------------------------------
     COMPONENTES — Inputs
  ---------------------------------------------------------- */

  --input-height:      38px;
  --input-padding-x:   var(--space-3);
  --input-bg:          var(--color-bg-surface);
  --input-border:      var(--color-border-default);
  --input-border-focus: var(--lr-navy-700);
  --input-radius:      var(--radius-md);
  --input-font-size:   var(--text-base);
  --input-text:        var(--color-text-primary);
  --input-placeholder: var(--color-text-muted);


  /* ----------------------------------------------------------
     COMPONENTES — Topbar / Header
  ---------------------------------------------------------- */

  --topbar-height:  56px;
  --topbar-bg:      var(--color-bg-surface);
  --topbar-border:  var(--color-border-default);
  --topbar-text:    var(--color-text-primary);


  /* ----------------------------------------------------------
     TRANSICIONES
  ---------------------------------------------------------- */

  --transition-fast:   100ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   300ms ease;

}


/* ============================================================
   DARK MODE — overrides mínimos
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:        #0f1117;
    --color-bg-surface:     #1a1d25;
    --color-bg-surface-2:   #1e2230;
    --color-text-primary:   #f0f0ee;
    --color-text-secondary: #9a9a97;
    --color-text-muted:     #5c5c5a;
    --color-border-default: #2a2d38;
    --color-border-strong:  #3a3d48;
    --card-shadow:          none;
    --card-shadow-hover:    none;
  }
}


/* ============================================================
   FUENTES — import (incluye en tu HTML o _app si usas Next)
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
   ============================================================ */


/* ============================================================
   UTILIDADES BASE — clases mínimas reutilizables
   ============================================================ */

.lr-font-display { font-family: var(--font-display); }
.lr-font-mono    { font-family: var(--font-mono); letter-spacing: var(--tracking-wider); }

.lr-text-brand   { color: var(--color-text-brand); }
.lr-text-muted   { color: var(--color-text-muted); }
.lr-text-inverse { color: var(--color-text-inverse); }

/* Sidebar item activo — barra cyan izquierda */
.lr-sidebar-item-active {
  background: var(--sidebar-item-active-bg);
  color: var(--sidebar-text-active);
  border-left: var(--border-thick) solid var(--sidebar-accent-bar);
}

/* Card base */
.lr-card {
  background: var(--card-bg);
  border: var(--border-default) solid var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--card-padding);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-base);
}
.lr-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Badge de estado */
.lr-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: var(--tracking-wider);
}
.lr-badge-active  { background: var(--badge-active-bg);  color: var(--badge-active-text); }
.lr-badge-draft   { background: var(--badge-draft-bg);   color: var(--badge-draft-text); }
.lr-badge-warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); }

/* Botón primario */
.lr-btn-primary {
  height: var(--btn-height-md);
  padding: 0 var(--btn-padding-x);
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  font-family: var(--btn-font);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  letter-spacing: var(--btn-tracking);
  border: none;
  border-radius: var(--btn-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.lr-btn-primary:hover {
  background: var(--color-btn-primary-bg-hover);
}
.lr-btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Progress bar track */
.lr-progress-track {
  background: var(--progress-track-bg);
  height: var(--progress-track-height);
  border-radius: var(--progress-track-radius);
  overflow: hidden;
}
.lr-progress-fill {
  height: 100%;
  border-radius: var(--progress-track-radius);
  transition: width var(--transition-slow);
}