/* =========================================================
   ASISTIDA DESIGN TOKENS
   Fuente oficial de valores visuales reutilizables.
   No contiene estilos específicos de páginas.
   ========================================================= */

/* Inter autoalojada (variable font, subset latin, peso 400-700) — sin esto
   --as-font-sans caía siempre en el fallback del sistema (Segoe UI/San
   Francisco) porque Inter nunca se descargaba. Autoalojar evita depender de
   una CDN externa en cada carga, lo cual además es más apropiado para la PWA
   instalable prevista en CLAUDE.md (funciona sin red una vez cacheada). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../../assets/fonts/Inter-Variable.woff2") format("woff2");
}

:root {

  /* =======================================================
     BRAND
     ======================================================= */

  --as-brand-50: #fff7ed;
  --as-brand-100: #ffedd5;
  --as-brand-200: #fed7aa;
  --as-brand-300: #fdba74;
  --as-brand-400: #fb923c;
  --as-brand-500: #f97316;
  --as-brand-600: #ea580c;
  --as-brand-700: #c2410c;
  --as-brand-800: #9a3412;
  --as-brand-900: #7c2d12;

  --as-brand-primary: var(--as-brand-500);
  --as-brand-hover: var(--as-brand-600);
  --as-brand-active: var(--as-brand-700);

  --as-brand-gradient:
    linear-gradient(
      135deg,
      #f59e0b 0%,
      #f97316 52%,
      #ea580c 100%
    );


  /* =======================================================
     NAVY / INK
     ======================================================= */

  --as-navy-950: #0b1220;
  --as-navy-900: #0f172a;
  --as-navy-800: #1e293b;
  --as-navy-700: #334155;
  --as-navy-600: #475569;

  --as-ink-primary: var(--as-navy-900);
  --as-ink-secondary: var(--as-navy-700);
  --as-ink-muted: var(--as-navy-600);


  /* =======================================================
     NEUTRALS / SURFACES
     ======================================================= */

  --as-white: #ffffff;

  --as-gray-25: #fcfcfd;
  --as-gray-50: #f8fafc;
  --as-gray-100: #f1f5f9;
  --as-gray-200: #e2e8f0;
  --as-gray-300: #cbd5e1;
  --as-gray-400: #94a3b8;
  --as-gray-500: #64748b;
  --as-gray-600: #475569;
  --as-gray-700: #334155;

  --as-bg-app: #f7f8fa;
  --as-bg-subtle: #fafbfc;
  --as-surface: #ffffff;
  --as-surface-secondary: #f8fafc;
  --as-surface-hover: #f4f6f8;

  --as-border-subtle: #e8ebef;
  --as-border-default: #dde2e7;
  --as-border-strong: #cbd5e1;


  /* =======================================================
     TEXT
     ======================================================= */

  --as-text-primary: #0f172a;
  --as-text-secondary: #475569;
  --as-text-muted: #64748b;
  --as-text-placeholder: #94a3b8;
  --as-text-disabled: #a8b1bd;
  --as-text-inverse: #ffffff;


  /* =======================================================
     SEMANTIC COLORS
     ======================================================= */

  /* Success */

  --as-success-50: #ecfdf5;
  --as-success-100: #d1fae5;
  --as-success-500: #10b981;
  --as-success-600: #059669;
  --as-success-700: #047857;

  /* Danger */

  --as-danger-50: #fff1f2;
  --as-danger-100: #ffe4e6;
  --as-danger-500: #f43f5e;
  --as-danger-600: #e11d48;
  --as-danger-700: #be123c;

  /* Warning */

  --as-warning-50: #fffbeb;
  --as-warning-100: #fef3c7;
  --as-warning-500: #f59e0b;
  --as-warning-600: #d97706;

  /* Information */

  --as-info-50: #eff6ff;
  --as-info-100: #dbeafe;
  --as-info-500: #3b82f6;
  --as-info-600: #2563eb;


  /* =======================================================
     TYPOGRAPHY
     ======================================================= */

  --as-font-sans:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  --as-font-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  --as-font-size-xs: 0.75rem;
  --as-font-size-sm: 0.875rem;
  --as-font-size-base: 1rem;
  --as-font-size-md: 1.0625rem;
  --as-font-size-lg: 1.125rem;
  --as-font-size-xl: 1.25rem;
  --as-font-size-2xl: 1.5rem;
  --as-font-size-3xl: 1.875rem;
  --as-font-size-4xl: 2.25rem;

  --as-font-weight-regular: 400;
  --as-font-weight-medium: 500;
  --as-font-weight-semibold: 600;
  --as-font-weight-bold: 700;

  --as-line-height-tight: 1.2;
  --as-line-height-heading: 1.3;
  --as-line-height-normal: 1.5;
  --as-line-height-relaxed: 1.65;


  /* =======================================================
     SPACING
     Base: 4px
     ======================================================= */

  --as-space-0: 0;
  --as-space-1: 0.25rem;
  --as-space-2: 0.5rem;
  --as-space-3: 0.75rem;
  --as-space-4: 1rem;
  --as-space-5: 1.25rem;
  --as-space-6: 1.5rem;
  --as-space-8: 2rem;
  --as-space-10: 2.5rem;
  --as-space-12: 3rem;
  --as-space-16: 4rem;


  /* =======================================================
     BORDER RADIUS
     ======================================================= */

  --as-radius-xs: 6px;
  --as-radius-sm: 8px;
  --as-radius-md: 12px;
  --as-radius-lg: 16px;
  --as-radius-xl: 20px;
  --as-radius-pill: 9999px;


  /* =======================================================
     SHADOWS
     ======================================================= */

  --as-shadow-xs:
    0 1px 2px rgba(15, 23, 42, 0.04);

  --as-shadow-sm:
    0 2px 6px rgba(15, 23, 42, 0.06);

  --as-shadow-md:
    0 8px 24px rgba(15, 23, 42, 0.08);

  --as-shadow-lg:
    0 16px 40px rgba(15, 23, 42, 0.10);

  --as-shadow-brand:
    0 6px 16px rgba(249, 115, 22, 0.22);


  /* =======================================================
     COMPONENT HEIGHTS
     ======================================================= */

  --as-control-sm: 32px;
  --as-control-md: 40px;
  --as-control-lg: 46px;

  --as-button-sm: 34px;
  --as-button-md: 40px;
  --as-button-lg: 46px;


  /* =======================================================
     ICONOGRAPHY
     ======================================================= */

  --as-icon-xs: 14px;
  --as-icon-sm: 16px;
  --as-icon-md: 20px;
  --as-icon-lg: 24px;
  --as-icon-xl: 32px;

  --as-icon-container-sm: 32px;
  --as-icon-container-md: 40px;
  --as-icon-container-lg: 48px;

  /* BLOQUE K1 — grosor de trazo único para la iconografía duotono
     geométrica (ver docs/design/DESIGN.md §5). 1.8 ya era, de lejos, el
     valor más usado en la app antes de tokenizarlo (auditoría Bloque K). */
  --as-icon-stroke-width: 1.8;


  /* =======================================================
     LAYOUT
     ======================================================= */

  --as-sidebar-width: 260px;
  --as-sidebar-collapsed-width: 72px;

  --as-topbar-height: 64px;

  --as-content-max-width: 1600px;

  --as-page-padding-desktop: 28px;
  --as-page-padding-tablet: 20px;
  --as-page-padding-mobile: 16px;


  /* =======================================================
     TABLES
     ======================================================= */

  --as-table-row-height: 52px;
  --as-table-header-height: 44px;

  --as-table-cell-x: 16px;
  --as-table-cell-y: 10px;


  /* =======================================================
     MOTION
     ======================================================= */

  --as-duration-fast: 120ms;
  --as-duration-normal: 180ms;
  --as-duration-slow: 260ms;

  --as-ease-standard:
    cubic-bezier(0.2, 0, 0, 1);

  --as-ease-emphasized:
    cubic-bezier(0.2, 0, 0, 1.2);


  /* =======================================================
     FOCUS
     ======================================================= */

  --as-focus-ring:
    0 0 0 3px rgba(249, 115, 22, 0.18);

  --as-focus-border: #f97316;


  /* =======================================================
     OVERLAYS
     ======================================================= */

  --as-overlay:
    rgba(15, 23, 42, 0.42);


  /* =======================================================
     Z-INDEX
     ======================================================= */

  --as-z-base: 0;
  --as-z-dropdown: 100;
  --as-z-sticky: 200;
  --as-z-sidebar: 300;
  --as-z-overlay: 400;
  --as-z-modal: 500;
  --as-z-toast: 600;
}

/* Barras de desplazamiento ------------------------------------------------
   La barra por defecto de Windows (gris, con flechas) se salía de las esquinas
   redondeadas de las ventanas. En toda la app: delgada, redondeada, sin
   flechas y con el carril transparente; en las ventanas (role="dialog") el
   carril deja libres las esquinas. Los elementos que ya ocultan su barra
   (menú lateral, pestañas…) no cambian: sus reglas son más específicas. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(15,23,42,.22);border-radius:999px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(15,23,42,.38)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
[role="dialog"]::-webkit-scrollbar-track,[role="dialog"] ::-webkit-scrollbar-track{margin-block:18px}
/* Firefox (no tiene ::-webkit-scrollbar). En Chrome no se aplica a propósito:
   si se define scrollbar-width/color, Chrome ignora las reglas de arriba. */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:rgba(15,23,42,.28) transparent}
}