/* ==========================================================================
   BUZÓN COSAPI V1.1.0 DESIGN · Tokens del design system
   --------------------------------------------------------------------------
   Un único lugar para tipografía, color, espacio, radios y sombras.
   Ningún componente define un color literal: todos consumen estas variables.
   El azul es ACENTO, nunca superficie: no existe ningún panel azul de más de
   3 px salvo el botón primario y el isotipo.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------- TIPOGRAFÍA --
     Times New Roman en TODA la aplicación y en TODO el correo: es la
     tipografía institucional. Los tres tokens apuntan a la misma familia a
     propósito; se conservan separados para que la jerarquía siga expresándose
     por tamaño, peso y color, no por cambio de fuente.
     Sólo fuentes presentes en Windows: no se empaqueta ni descarga ninguna. */
  --font-ui: "Times New Roman", Times, serif;
  --font-editorial: "Times New Roman", Times, serif;
  --font-mono: "Times New Roman", Times, serif;

  --text-2xs: 0.6875rem;  /* 11px   etiquetas en versalitas */
  --text-xs:  0.75rem;    /* 12px   metadatos */
  --text-sm:  0.8125rem;  /* 13px   base: tablas, formularios, navegación */
  --text-md:  0.875rem;   /* 14px   cuerpo destacado */
  --text-lg:  1.0625rem;  /* 17px   subtítulos y títulos de tarjeta */
  --text-xl:  1.1875rem;  /* 19px   título de panel */
  --text-2xl: 1.5rem;     /* 24px   título de página */
  --text-3xl: 1.9375rem;  /* 31px   saludo editorial */
  --text-4xl: 2.4375rem;  /* 39px   cifras destacadas */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.45;
  --leading-relaxed: 1.65;

  --tracking-wide: 0.1em;
  --tracking-tight: -0.015em;

  /* Times New Roman en Windows tiene DOS ficheros: times.ttf (400) y
     timesbd.ttf (700). No hay 500 ni 600, así que el navegador los resolvía a
     400 y a 700 respectivamente: la capa «medium» no pintaba absolutamente
     nada y por eso la pantalla se leía plana. Se declaran los pesos que
     existen de verdad y la jerarquía se apoya en tamaño y color. */
  --weight-regular: 400;
  --weight-medium: 400;
  --weight-semibold: 700;

  /* --------------------------------------------------------------- COLOR --
     Base: lienzo cálido, superficie blanca, tinta carbón cálido. */
  --color-bg: #f7f6f3;
  --color-bg-sunken: #f1efea;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-hover: #fbfaf8;
  --color-surface-active: #f1efea;

  /* Contrastes medidos sobre --color-surface y sobre --color-bg. Los dos tonos
     tenues anteriores (#8a847c → 3.43:1 y #b0aaa1 → 2.13:1 sobre el lienzo) no
     llegaban al 4.5:1 exigible, y con ellos se pintaban las cabeceras de todas
     las tablas y las pistas de teclado. */
  --color-text: #1b1917;            /* 15.9:1 */
  --color-text-secondary: #6b6660;  /*  5.26:1 */
  --color-text-tertiary: #6f6a63;   /*  4.96:1 · texto tenue LEGIBLE */
  --color-text-faint: #85807a;      /*  3.62:1 · SÓLO iconos y filetes */
  --color-text-inverse: #ffffff;

  --color-border: #e5e2dc;
  --color-border-strong: #d5d1c9;
  --color-border-subtle: #f1efea;

  /* Azul COSAPI: una sola familia, medida del logotipo corporativo.
     --color-brand es EXACTAMENTE el azul de la marca (#0095E4). Contrasta 3.3:1
     sobre blanco, así que sirve para el isotipo, para filetes y para acentos,
     pero NUNCA para texto ni para un botón con letra blanca.
     --color-primary es ese mismo tono oscurecido hasta 5.02:1: ahí sí se puede
     leer. Antes el primario era #0b4fa2, un azul marino de otra familia, y por
     eso el logotipo nunca acababa de pegar con la interfaz. */
  --color-brand: #0095e4;
  --color-brand-soft: #edf9ff;

  --color-primary: #0075b2;         /* 5.02:1 sobre blanco  · texto y botones */
  --color-primary-hover: #005785;   /* 7.77:1 */
  --color-primary-active: #004366;  /* 10.5:1 */
  --color-primary-soft: #edf9ff;
  --color-primary-border: #c4ebff;

  --color-success: #1f7a4d;
  --color-success-soft: #edf6f1;
  --color-success-border: #d3e8de;

  --color-warning: #a9700b;
  --color-warning-soft: #fbf3e2;
  --color-warning-border: #f0e2c4;

  --color-danger: #b02a1f;
  --color-danger-soft: #fbeeec;
  --color-danger-border: #f2d5d1;

  --color-info: var(--color-primary);
  --color-info-soft: var(--color-primary-soft);
  --color-info-border: var(--color-primary-border);

  --color-neutral: var(--color-text-secondary);
  --color-neutral-soft: #f4f2ee;
  --color-neutral-border: var(--color-border);

  --color-focus: #0075b2;
  --color-overlay: rgba(27, 25, 23, 0.18);

  /* -------------------------------------------------------------- ESPACIO -- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 22px;
  --space-xl: 34px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* --------------------------------------------------------------- FORMA -- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 5px;
  --radius-pill: 999px;

  --border-width: 1px;

  /* Sombras contenidas: sin glassmorphism, sin blur pesado, sin color. */
  --shadow-sm: 0 1px 2px rgba(27, 25, 23, 0.05);
  --shadow-md: 0 8px 28px rgba(27, 25, 23, 0.13), 0 2px 6px rgba(27, 25, 23, 0.07);
  --shadow-lg: 0 20px 56px rgba(27, 25, 23, 0.2);

  /* Sólido, no traslúcido: al 45 % se componía en #8cc1dc, 1.95:1 contra la
     superficie, y el foco de teclado era prácticamente invisible. */
  --ring-focus: 0 0 0 2px var(--color-surface), 0 0 0 2px var(--color-primary);

  /* -------------------------------------------------------- MOVIMIENTO --
     Sólo microinteracciones, 140–240 ms. Nada permanente. */
  --motion-fast: 140ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---------------------------------------------------------- ESTRUCTURA -- */
  /* La ventana nativa ya trae su barra con el icono y el nombre del
     producto. La franja propia repetía ambos, así que se retiró; el token
     se queda en cero para no reescribir cada calc() que lo usa. */
  --titlebar-height: 0px;
  --sidebar-width: 224px;
  --sidebar-width-collapsed: 56px;
  --header-height: 56px;
  --content-max: 1460px;
  --z-sidebar: 20;
  --z-header: 30;
  --z-dropdown: 40;
  --z-titlebar: 45;
  --z-modal: 50;
  --z-paleta: 60;
  --z-toast: 70;
}

/* Respeta la preferencia del sistema: sin animaciones si el usuario las apaga. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Escalado de Windows a 125 % y 150 %: se reduce la tipografía grande para que
   los títulos no desborden en 1366×768. */
@media (max-width: 1400px) {
  :root {
    --text-3xl: 1.75rem;
    --text-4xl: 2.125rem;
    --sidebar-width: 216px;
  }
}

@media (max-width: 1180px) {
  :root {
    --text-2xl: 1.375rem;
    --text-3xl: 1.5625rem;
    --text-4xl: 1.9375rem;
    --space-xl: 24px;
  }
}