/* ============================================================
   Praxiom Design Tokens — Graphite & Brass
   Source of truth: docs/branding/praxiom-shell-spec.html
   ============================================================ */

:root,
:root[data-theme="light"] {
    /* --- Graphite (neutral scale, warm undertone) --- */
    --color-graphite-900: #14171F;
    --color-graphite-800: #1A1F2E;
    --color-graphite-700: #2A3142;
    --color-graphite-600: #5A6072;
    --color-graphite-500: #8B92A1;
    --color-carbon: #3D4456;   /* gris carbon para badges (entre graphite-700 y -600); fijo, no cambia en dark */
    --text-on-carbon: #ffffff;   /* texto sobre superficie fija-oscura (carbon). Fijo, como carbon:
                                    NO se redeclara en dark. --text-on-dark ahi invierte a #14171F
                                    y caeria a 1.84:1 sobre carbon (T-136) */
    --color-graphite-400: #B5BAC4;
    --color-graphite-300: #DDDFE3;
    --color-graphite-200: #E8E5DD;
    --color-graphite-100: #F2F0EA;
    --color-graphite-50:  #FAFAF7;

    /* --- Brass (accent scale) --- */
    --color-brass-800: #604724;   /* escalon de presion del acento: hover de la accion primaria (T-065). Dark mode: pendiente de diseno */
    --color-brass-700: #7A5F37;
    --color-brass-600: #B08D57;
    --color-brass-500: #C9A876;
    --color-brass-400: #DDC299;
    --color-brass-300: #EFDFC4;

    /* --- Semantic --- */
    --color-success: #2E7D5B;
    --color-warning: #B8741B;
    --color-error:   #9B2D2D;
    --color-info:    #2C5F8D;

    /* --- Semantic ink/tint (T-071): pares tinta/tinte de estados para chips y franjas.
       Antes vivian en scope de pagina (Facturacion, PresupuestoChip, PresupuestosRiesgo) y dos de
       ellos ya habian divergido bajo el mismo nombre; se unifica al canonico de facturacion (spec
       §13, la unica familia completa con su ratio AA medido). Ningun par pierde AA. Dark mode:
       pendiente de diseno, igual que la escala de antiguedad. */
    --color-warning-ink:        #8A5A12;
    --color-warning-ink-strong: #7C500F;
    --color-warning-tint:       #F9EFDD;
    --color-warning-tint-strong:#F3E2C4;
    --color-success-ink:        #236448;
    --color-success-tint:       #E7F2EC;
    --color-info-tint:          #E8F0F7;
    --color-error-tint:         #F7E6E6;
    --color-brass-ink:          #5F4A26;

    /* --- Antiguedad (T-069): escala SECUENCIAL, no paleta semantica. Sus escalones no significan
       nada por separado, solo el orden entre vecinos (claro = fresco, oscuro = viejo). Valores
       resueltos por luminancia (r = 1.281 por escalon) para rampa monotona. Dark mode: pendiente
       de diseno (invertir el eje de luminancia es decision aparte). */
    --color-aging-1: #599E7C;   /* 0-30    */
    --color-aging-2: #5E8A48;   /* 31-60   */
    --color-aging-3: #836A1F;   /* 61-90   */
    --color-aging-4: #8E4B1D;   /* 91-120  */
    --color-aging-5: #8C2A23;   /* +120    */

    /* --- Surfaces --- */
    --surface-primary: #ffffff;
    --surface-secondary: var(--color-graphite-50);
    --surface-elevated: #ffffff;
    --border-default: var(--color-graphite-200);
    --border-subtle: var(--color-graphite-300);
    --text-primary: var(--color-graphite-800);
    --text-heading: var(--color-graphite-900);
    --text-secondary: var(--color-graphite-600);
    --text-muted: var(--color-graphite-500);
    --text-on-dark: #ffffff;

    /* --- Typography --- */
    --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    --font-icon:  "Material Symbols Rounded";
    --serif-display-tracking: -0.02em;   /* tracking unico para numeros hero serif (74h 24m, dia del calendario) */

    /* --- Wordmark (activo de marca, bloqueado) --- */
    --wordmark-family:   var(--font-sans);
    --wordmark-weight:   600;
    --wordmark-tracking: -0.025em;

    /* --- Shadows --- */
    --shadow-sm: 0 2px 4px rgba(20, 23, 31, .06),
                 0 1px 2px rgba(20, 23, 31, .04);
    --shadow-md: 0 8px 16px rgba(20, 23, 31, .10),
                 0 4px 8px rgba(20, 23, 31, .06);
    --shadow-lg: 0 16px 40px rgba(20, 23, 31, .14),
                 0 8px 16px rgba(20, 23, 31, .06);

    /* --- Border radius --- */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  8px;
    --radius-lg:  10px;
    --radius-xl:  12px;
    --radius-pill: 999px;

    /* --- Motion vocabulary --- */
    /* Curvas de easing */
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);   /* firma de la casa: entradas y expansiones */
    --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);     /* movimientos bidireccionales (hover, toggles) */
    --ease-spring:    cubic-bezier(0.34, 1.4, 0.64, 1); /* overshoot minimo: SOLO micro-feedback de tap/exito */
    --ease-out:       var(--ease-out-quint);            /* alias: vuelve real el token que solo vivia por su fallback (CmdK/TimerModal) */
    /* Escala de duraciones */
    --dur-1: 120ms;
    --dur-2: 180ms;
    --dur-3: 240ms;
    --dur-4: 320ms;
    --dur-5: 480ms;

    /* --- Transitions (compat) — ahora con curva estandar --- */
    --transition-fast: var(--dur-1) var(--ease-standard);
    --transition-med:  var(--dur-2) var(--ease-standard);

    /* --- Accessibility --- */
    /* El anillo de foco viaja en OUTLINE y solo en outline (T-077): es el unico canal que
       sobrevive a forced-colors (alto contraste de Windows apaga todo box-shadow) y el unico
       que ninguna sombra de elevacion puede pisar por orden de enlace del bundle scoped.
       brass-600 sobre blanco = 3.09:1, sobre el piso 3:1 de WCAG 2.2 1.4.11 (indicador no textual). */
    --focus-outline: 2px solid var(--color-brass-600);

    /* --- Sidebar / Shell --- */
    --sidebar-width-expanded: 176px;
    --sidebar-width-collapsed: 67px;
    --sidebar-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --sidebar-bg: var(--color-graphite-50);
    --sidebar-border: var(--color-graphite-200);
    --nav-item-active-bg: #FFFFFF;
    --nav-item-active-accent: var(--color-brass-600);
    --main-bar-height: 56px;
    --main-canvas-max-width: 1080px;
    --main-canvas-padding: 20px 56px 48px;
    --popover-min-width: 220px;

    /* --- Elevacion (T-126 / escala medida en T-095) ---
       La escala NO se invento: se le puso nombre a lo que el producto ya apila de facto.
       No vive dentro de [data-theme] a proposito: la elevacion no cambia por tema, a
       diferencia de los ramps de color. Regla: una capa nueva elige TOKEN, nunca numero;
       si ninguno le queda, se agrega token aqui y se documenta el por que en
       docs/agentes/diseno/SISTEMA-DISENO.md (seccion 4). */
    --z-scrim:        40;     /* velo del drawer: tapa la pagina entera, incluido el sidebar */
    --z-panel:        50;     /* panel del drawer, sobre su propio velo */
    --z-shell-scrim:  99;     /* velo del nav movil (shell): por encima de cualquier drawer */
    --z-shell-panel: 100;     /* panel del nav movil */
    --z-modal:      1000;     /* modal centrado y paleta CmdK */
    --z-toast:      1100;     /* avisos efimeros: tapan al modal a proposito */
    --z-modal-layer:1200;     /* capa DENTRO de un modal (popover de un campo del modal) */
    --z-loading:    9999;     /* barra de carga global */
    --z-reconnect: 10001;     /* modal de reconexion de Blazor: tapa absolutamente todo */

    /* Apilamiento local del sidebar: popovers, dropdown de usuario y tooltips del nav.
       Vale 10 -por DEBAJO de --z-scrim- y esta bien: el sidebar es position:relative sin
       z-index, o sea NO abre contexto de apilamiento, asi que sus capas viven en la raiz y
       el velo de cualquier drawer (40) debe taparlas. Conserva el valor del retirado
       --dropdown-z-index; lo que cambio es el nombre, que prometia ser "el token de
       apilamiento" del producto y mandaba al fondo a quien lo reusara de buena fe. */
    --z-sidebar-popover: 10;

    /* --- Bootstrap overrides --- */
    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-graphite-800);
    --bs-body-bg: var(--color-graphite-50);
}

/* TODO: dark mode — sprint futuro. Descomentar y ajustar valores.
:root[data-theme="dark"] {
    --color-graphite-900: #F2F0EA;
    --color-graphite-800: #E8E5DD;
    --color-graphite-700: #DDDFE3;
    --color-graphite-600: #B5BAC4;
    --color-graphite-500: #8B92A1;
    --color-graphite-400: #5A6072;
    --color-graphite-300: #2A3142;
    --color-graphite-200: #1E2333;
    --color-graphite-100: #1A1F2E;
    --color-graphite-50:  #14171F;

    --color-brass-700: #DDC299;
    --color-brass-600: #C9A876;
    --color-brass-500: #B08D57;
    --color-brass-400: #8B6E40;
    --color-brass-300: #6B5530;

    --surface-primary: #1A1F2E;
    --surface-secondary: #14171F;
    --surface-elevated: #232838;
    --border-default: #2A3142;
    --border-subtle: #353D50;
    --text-primary: #E8E5DD;
    --text-heading: #F2F0EA;
    --text-secondary: #B5BAC4;
    --text-muted: #8B92A1;
    --text-on-dark: #14171F;

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, .20),
                 0 1px 2px rgba(0, 0, 0, .15);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, .30),
                 0 4px 8px rgba(0, 0, 0, .20);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .40),
                 0 8px 16px rgba(0, 0, 0, .25);

    --focus-outline: 2px solid var(--color-brass-500);

    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--color-graphite-800);
    --bs-body-bg: var(--color-graphite-50);
}
*/

/* ============================================================
   Animations
   ============================================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.fade-in-up {
    animation: fadeInUp var(--dur-4) var(--ease-out-quint) both;
}

.stagger > * {
    animation: fadeInUp var(--dur-4) var(--ease-out-quint) both;
}

.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 50ms; }
.stagger > *:nth-child(3) { animation-delay: 100ms; }
.stagger > *:nth-child(4) { animation-delay: 150ms; }
.stagger > *:nth-child(5) { animation-delay: 200ms; }
.stagger > *:nth-child(6) { animation-delay: 250ms; }
.stagger > *:nth-child(7) { animation-delay: 300ms; }
.stagger > *:nth-child(8) { animation-delay: 350ms; }

/* Sobriedad: sin movimiento si el usuario lo pidio. */
@media (prefers-reduced-motion: reduce) {
    .fade-in-up,
    .stagger > * {
        animation: none;
    }
}

/* ============================================================
   Base selectors
   ============================================================ */

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--text-primary);
    background: var(--surface-secondary);
    line-height: 1.6;
    margin: 0;
}

h1, h2, h3 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-heading);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-brass-700);
}

.eyebrow::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1px;
    background: var(--color-brass-600);
    vertical-align: middle;
    margin-right: 8px;
}

.text-mono {
    font-family: var(--font-mono);
    font-feature-settings: "tnum";
}

/* Simbolo de moneda de una sola linea (el $ del serif Newsreader es cifrao doble-raya).
   GLOBAL a proposito: el Indicador renderiza <span class="cur">$</span> dentro de varios
   componentes hijos; un .cur scoped por componente no aplicaria a los demas. */
.cur {
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 0.92em;
}

/* Icon font — defensivo. Ambas clases reciben la fuente de iconos para que NUNCA
   se renderice el texto del ligature ("schedule", "add", "lock", "pause") en vez del
   glifo. Muchos spans usan .material-symbols-rounded (la clase oficial de Google) y
   otros usan el alias corto .msr; las hojas cargadas no garantizaban la fuente en la
   primera. 'liga' activa las ligaturas que convierten el texto en icono. */
.msr,
.material-symbols-rounded {
    font-family: var(--font-icon);
    font-feature-settings: "liga";
    -webkit-font-feature-settings: "liga";
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
}

.msr {
    font-family: var(--font-icon);
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.msr.fill {
    font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.msr.bold {
    font-variation-settings: "FILL" 0, "wght" 700, "GRAD" 0, "opsz" 24;
}

/* ============================================================
   Interactive element defaults
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--focus-outline);
    outline-offset: 2px;
}

input, select, textarea {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* ============================================================
   Utility: visually hidden (accessible screen-reader text)
   ============================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}