@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {

  /* Familia */
  --font-base:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'Courier New', 'Roboto Mono', monospace;

  /* Tamaños */
  --text-xs:    11px;
  --text-sm:    12px;
  --text-base:  13px;
  --text-md:    14px;
  --text-lg:    16px;
  --text-xl:    18px;
  --text-2xl:   20px;
  --text-3xl:   24px;
  --text-4xl:   32px;
  --text-5xl:   40px;

  /* Pesos */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Interlineado */
  --lh-tight:   1.2;
  --lh-snug:    1.375;
  --lh-normal:  1.5;
  --lh-relaxed: 1.625;

  /* Tracking (letter-spacing) */
  --ls-tight:   -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.04em;
  --ls-wider:    0.06em;
  --ls-widest:   0.08em;


/* ─────────────────────────────────────────────
   2. COLORES — PALETA BASE
───────────────────────────────────────────── */

  /* Azul primario — IBM Blue */
  --color-primary-50:  #EFF4FF;
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #0F62FE;   /* ← Principal */
  --color-primary-700: #0353D9;
  --color-primary-800: #1D3D75;
  --color-primary-900: #1E3A5F;

  /* Grises neutros */
  --color-gray-0:   #FFFFFF;
  --color-gray-50:  #F9FAFB;
  --color-gray-100: #F4F6F9;   /* ← Fondo app */
  --color-gray-150: #F0F1F3;
  --color-gray-200: #E5E7EB;   /* ← Bordes */
  --color-gray-300: #D1D5DB;
  --color-gray-400: #9CA3AF;   /* ← Texto muted */
  --color-gray-500: #6B7280;   /* ← Texto secundario */
  --color-gray-600: #4B5563;
  --color-gray-700: #374151;
  --color-gray-800: #1F2937;
  --color-gray-900: #111827;   /* ← Texto primario */

  /* Verde éxito */
  --color-green-50:  #F0FDF4;
  --color-green-100: #DCFCE7;
  --color-green-500: #22C55E;
  --color-green-600: #15803D;   /* ← Principal */
  --color-green-700: #15803D;

  /* Amarillo advertencia */
  --color-yellow-50:  #FFFBEB;
  --color-yellow-100: #FEF3C7;
  --color-yellow-500: #F59E0B;
  --color-yellow-600: #B45309;  /* ← Principal */
  --color-yellow-700: #B45309;

  /* Rojo error/peligro */
  --color-red-50:  #FEF2F2;
  --color-red-100: #FEE2E2;
  --color-red-500: #EF4444;
  --color-red-600: #B91C1C;     /* ← Principal */
  --color-red-700: #B91C1C;

  /* Violeta / acento secundario */
  --color-violet-50:  #F5F3FF;
  --color-violet-600: #7C3AED;

  /* Cyan / info */
  --color-cyan-50:  #ECFEFF;
  --color-cyan-600: #0891B2;


/* ─────────────────────────────────────────────
   3. COLORES — SEMÁNTICOS (aliases)
───────────────────────────────────────────── */

  --primary:        var(--color-primary-600);
  --primary-hover:  var(--color-primary-700);
  --primary-light:  var(--color-primary-50);
  --primary-border: rgba(15, 98, 254, 0.25);

  --success:        var(--color-green-600);
  --success-bg:     var(--color-green-50);
  --success-border: rgba(22, 163, 74, 0.25);

  --warning:        var(--color-yellow-600);
  --warning-bg:     var(--color-yellow-50);
  --warning-border: rgba(217, 119, 6, 0.25);

  --danger:         var(--color-red-600);
  --danger-bg:      var(--color-red-50);
  --danger-border:  rgba(220, 38, 38, 0.25);

  --info:           var(--color-cyan-600);
  --info-bg:        var(--color-cyan-50);


/* ─────────────────────────────────────────────
   4. COLORES — UI
───────────────────────────────────────────── */

  /* Fondos */
  --bg-app:         var(--color-gray-100);  /* Fondo general de la app */
  --bg-surface:     var(--color-gray-0);    /* Cards, panels, modales */
  --bg-elevated:    var(--color-gray-50);   /* Hover, inputs, cabeceras tabla */
  --bg-overlay:     rgba(17, 24, 39, 0.4);  /* Overlay de modales */

  /* Texto */
  --text-primary:   var(--color-gray-900);
  --text-secondary: var(--color-gray-700);
  --text-muted:     var(--color-gray-600);
  --text-disabled:  var(--color-gray-500);
  --text-inverse:   var(--color-gray-0);
  --text-link:      var(--color-primary-600);

  /* Bordes */
  --border-default: var(--color-gray-200);
  --border-strong:  var(--color-gray-300);
  --border-focus:   var(--color-primary-600);
  --border-error:   var(--color-red-600);

  /* Iconos */
  --icon-default:   var(--color-gray-500);
  --icon-muted:     var(--color-gray-500);
  --icon-primary:   var(--color-primary-600);


/* ─────────────────────────────────────────────
   5. COLORES — ESTADOS DE CONTRATO
───────────────────────────────────────────── */

  --status-active-text:    var(--color-green-600);
  --status-active-bg:      var(--color-green-50);
  --status-active-dot:     var(--color-green-600);
  --status-active-border:  var(--color-primary-600);  /* borde izq. card */

  --status-draft-text:     var(--color-gray-500);
  --status-draft-bg:       var(--color-gray-100);
  --status-draft-dot:      var(--color-gray-400);
  --status-draft-border:   var(--color-gray-400);

  --status-review-text:    var(--color-yellow-600);
  --status-review-bg:      var(--color-yellow-50);
  --status-review-dot:     var(--color-yellow-600);
  --status-review-border:  var(--color-yellow-600);

  --status-expired-text:   var(--color-red-600);
  --status-expired-bg:     var(--color-red-50);
  --status-expired-dot:    var(--color-red-600);
  --status-expired-border: var(--color-red-600);

  --status-signed-text:    var(--color-cyan-600);
  --status-signed-bg:      var(--color-cyan-50);
  --status-signed-dot:     var(--color-cyan-600);
  --status-signed-border:  var(--color-cyan-600);


/* ─────────────────────────────────────────────
   6. ESPACIADO — escala 4px
───────────────────────────────────────────── */

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

  /* Padding interno de contenedores */
  --page-padding-x:  28px;
  --page-padding-y:  28px;
  --card-padding:    20px;
  --panel-padding-x: 20px;
  --panel-padding-y: 14px;


/* ─────────────────────────────────────────────
   7. BORDER RADIUS
───────────────────────────────────────────── */

  --radius-sm:   4px;   /* Badges, chips, botones pequeños */
  --radius-md:   6px;   /* Cards, inputs, botones — DEFAULT */
  --radius-lg:   8px;   /* Modales, drawers */
  --radius-xl:   12px;  /* Paneles grandes */
  --radius-full: 9999px; /* Pills, avatares */


/* ─────────────────────────────────────────────
   8. SOMBRAS
───────────────────────────────────────────── */

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-focus: 0 0 0 3px rgba(15, 98, 254, 0.15);
  --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.15);


/* ─────────────────────────────────────────────
   9. TRANSICIONES Y ANIMACIONES
───────────────────────────────────────────── */

  /* Curva de aceleración */
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);   /* Material ease */
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Duraciones */
  --duration-fast:   100ms;
  --duration-base:   150ms;
  --duration-slow:   200ms;
  --duration-slower: 300ms;
  --duration-page:   400ms;

  /* Transición estándar */
  --transition-base:   all var(--duration-base) var(--ease-default);
  --transition-slow:   all var(--duration-slower) var(--ease-default);
  --transition-color:  color var(--duration-base) var(--ease-default),
                       background-color var(--duration-base) var(--ease-default),
                       border-color var(--duration-base) var(--ease-default);


/* ─────────────────────────────────────────────
   10. LAYOUT — DIMENSIONES ESTRUCTURALES
───────────────────────────────────────────── */

  --topbar-height:       60px;
  --sidebar-width:       240px;
  --sidebar-width-collapsed: 60px;
  --content-max-width:   1440px;

  /* Alturas de componentes */
  --input-height-sm:  30px;
  --input-height-md:  36px;
  --input-height-lg:  42px;


/* ─────────────────────────────────────────────
   11. Z-INDEX
───────────────────────────────────────────── */

  --z-base:      0;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-sidebar:   300;
  --z-topbar:    400;
  --z-overlay:   500;
  --z-modal:     600;
  --z-toast:     700;
  --z-tooltip:   800;

  color-scheme: light;
  --bg-subtle: var(--bg-elevated);
} /* fin :root */

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-gray-0: #202226;
  --color-gray-50: #282b30;
  --color-gray-100: #17191c;
  --color-gray-150: #2d3036;
  --color-gray-200: #3b3f46;
  --color-gray-300: #535963;
  --color-gray-400: #9da5b0;
  --color-gray-500: #afb7c2;
  --color-gray-600: #bdc5cf;
  --color-gray-700: #d0d6de;
  --color-gray-800: #e1e6ed;
  --color-gray-900: #f1f3f6;
  --color-primary-50: #202f49;
  --color-primary-100: #263c60;
  --color-primary-200: #355782;
  --color-primary-800: #a9caff;
  --color-primary-900: #d4e5ff;
  --color-green-50: #1b3429;
  --color-green-100: #224333;
  --color-green-600: #68d99c;
  --color-green-700: #8ce6b3;
  --color-yellow-50: #3b3020;
  --color-yellow-100: #4a3a22;
  --color-yellow-600: #f7c46b;
  --color-yellow-700: #f9d590;
  --color-red-50: #3d2428;
  --color-red-100: #4c2a30;
  --color-red-600: #ff929c;
  --color-red-700: #ffb0b8;
  --color-violet-50: #312840;
  --color-violet-600: #c3a6ff;
  --color-cyan-50: #1c343c;
  --color-cyan-600: #6cd8ed;
  --text-inverse: #ffffff;
  --text-link: #8bb9ff;
  --icon-primary: #8bb9ff;
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --primary-border: #3f5c88;
  --success-border: #366b4e;
  --warning-border: #755d36;
  --danger-border: #80434a;
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
}


/* ─────────────────────────────────────────────
   12. BREAKPOINTS — solo referencia comentada
   (usar con @media en cada archivo)
───────────────────────────────────────────── */

/*
  xs:   < 480px   → Mobile pequeño
  sm:   ≥ 576px   → Mobile estándar (Bootstrap)
  md:   ≥ 768px   → Tablet
  lg:   ≥ 992px   → Laptop
  xl:   ≥ 1200px  → Desktop
  xxl:  ≥ 1400px  → Desktop grande
*/


/* ─────────────────────────────────────────────
   13. RESET Y BASE GLOBAL
───────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Accesibilidad: reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family:      var(--font-base);
  font-size:        var(--text-md);
  font-weight:      var(--fw-regular);
  line-height:      var(--lh-normal);
  color:            var(--text-primary);
  background-color: var(--bg-app);
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Links */
a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-color);
}
a:hover { text-decoration: underline; }

/* Imágenes */
img, svg { display: block; max-width: 100%; }

/* Inputs heredan fuente */
input, button, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Eliminar estilos de lista */
ul, ol { list-style: none; }

/* Texto seleccionado */
::selection {
  background-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

/* Scrollbar personalizada (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); }

/* Focus visible accesible */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}