/* ==========================================================================
   KRONOS · Capa de marca / tema (white-label)
   --------------------------------------------------------------------------
   ESTE es el único archivo que una empresa necesita tocar para re-marcar
   la aplicación. Todo el color, radios, sombras y tipografía salen de aquí.

   TIPOGRAFÍA — coloca los archivos de fuente en wwwroot/fonts/ con estos
   nombres exactos (formatos .woff2 y/o .otf; .woff2 es opcional pero pesa
   menos, conviértelo si puedes):
       Atavian.(woff2|otf)                 -> títulos
       ColitezSerif-Regular.(woff2|otf)    -> texto normal
       ColitezSerif-Italic.(woff2|otf)     -> cursivas (opcional)
       ColitezSerif-Bold.(woff2|otf)       -> negritas (opcional)
   Mientras no estén, se usan las fuentes de reserva (Georgia / serif).

   Cómo personalizar para otra empresa:
     1. Cambia los tokens de MARCA (--brand, --brand-strong, --brand-tint...).
     2. Si hace falta, ajusta radios (--radius-*) y tipografía (--font-sans).
     3. Opcional: ajusta las paletas de superficie en :root (claro) y
        [data-bs-theme="dark"] (oscuro).
   No se usan colores "inline" en las vistas: todo se resuelve por variables,
   así el modo claro/oscuro y el cambio de marca funcionan sin tocar HTML.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FUENTES  (auto-alojadas · sin dependencias externas)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Atavian";
    src: url("../fonts/Atavian.woff2") format("woff2"),
         url("../fonts/Atavian.otf") format("opentype");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Colitez Serif";
    src: url("../fonts/ColitezSerif-Regular.woff2") format("woff2"),
         url("../fonts/ColitezSerif-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Colitez Serif";
    src: url("../fonts/ColitezSerif-Italic.woff2") format("woff2"),
         url("../fonts/ColitezSerif-Italic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Colitez Serif";
    src: url("../fonts/ColitezSerif-Bold.woff2") format("woff2"),
         url("../fonts/ColitezSerif-Bold.otf") format("opentype");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. TOKENS DE MARCA  (independientes del modo claro/oscuro)
   -------------------------------------------------------------------------- */
:root {
    /* Color principal de la empresa: DORADO. Cámbialo y toda la app se re-marca. */
    --brand: #c8a23a;          /* dorado */
    --brand-strong: #a5811f;   /* hover / degradados / estados activos */
    --brand-stronger: #856615; /* pressed */
    --brand-soft: #e0c87f;     /* dorado claro para texto sobre oscuro (= accent Android) */
    --brand-tint: #282318;     /* fondo dorado tenue (por defecto: oscuro) */
    --brand-tint-strong: #363021;
    --on-brand: #1c1608;       /* texto/iconos sobre el dorado */

    /* El encabezado y el hero son SIEMPRE oscuros con dorado.
       Degradado igual al de la app Android (brand_header_start → brand_header_end). */
    --header-gradient: linear-gradient(135deg, #3a3a3a 0%, #0c0c0c 100%);
    --on-header: #ece0c4;               /* texto crema sobre el encabezado */
    --on-header-muted: rgba(236, 224, 196, .70);

    /* Colores semánticos de estado (idénticos a la app Android) */
    --success: #3f9e57;
    --success-tint: #16351f80;
    --warning: #cf9128;
    --warning-tint: #3a2c0e80;
    --danger: #cf4b3f;
    --danger-tint: #3a1d1980;
    --info: #4f8bb0;
    --info-tint: #16303c80;

    /* Forma (estilo editorial: radios discretos) */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Elevación (por defecto sobre fondo oscuro) */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40), 0 2px 10px rgba(0, 0, 0, .32);
    --shadow-md: 0 8px 22px rgba(0, 0, 0, .48);
    --shadow-lg: 0 20px 44px rgba(0, 0, 0, .60);

    /* Tipografía
       --font-display : títulos y cifras destacadas   (Atavian)
       --font-body    : texto general del sitio        (Colitez Serif)
       --font-ui      : chrome pequeño donde la serif pierde nitidez
                        (etiquetas versalita, encabezados de tabla, badges)
       DM Serif Display / Spectral son fuentes puente hasta cargar las reales. */
    --font-display: "Atavian", "DM Serif Display", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Colitez Serif", "Spectral", Georgia, "Times New Roman", serif;
    --font-ui: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-sans: var(--font-ui); /* alias compatible */

    /* Ritmo */
    --gutter: 1.5rem;
}

/* --------------------------------------------------------------------------
   2. PALETA POR DEFECTO — GRIS OSCURO  (igual a la app Android · brand_colors.xml)
      Superficies y texto = valores exactos de Android; el estilo editorial
      (filetes dorados, versalitas, planitud) se mantiene.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
    --app-bg: #0f0f0e;          /* brand_background */
    --surface: #1a1a18;         /* brand_surface */
    --surface-2: #242320;       /* brand_surface_soft */
    --surface-inset: #141413;   /* brand_surface_inset */

    --text: #ece7db;            /* brand_text_primary */
    --text-muted: #a19a89;      /* brand_text_secondary */
    --text-subtle: #6e6a5e;

    /* Bordes: filete neutro muy tenue + versión sólida (= brand_border Android);
       los filetes DELIBERADOS son dorados. */
    --border: rgba(236, 231, 219, .09);
    --border-strong: #34312a;                /* brand_border */
    --rule: rgba(236, 231, 219, .09);        /* separador secundario */
    --rule-gold: rgba(200, 162, 58, .28);    /* filete editorial dorado */

    --brand-tint: #282318;
    --brand-tint-strong: #363021;

    --focus-ring: rgba(200, 162, 58, .50);
}

/* --------------------------------------------------------------------------
   3. PALETA ALTERNA — EDITORIAL PAPEL  (crema + tinta oscura + filetes)
   -------------------------------------------------------------------------- */
[data-bs-theme="light"] {
    --app-bg: #f4efe3;          /* crema cálido */
    --surface: #fbf7ee;
    --surface-2: #efe8d6;
    --surface-inset: #f6f1e5;

    --text: #1e1a12;            /* tinta casi negra */
    --text-muted: #6b6250;
    --text-subtle: #9a9078;

    --border: rgba(30, 26, 18, .10);
    --border-strong: rgba(30, 26, 18, .20);
    --rule: rgba(30, 26, 18, .10);
    --rule-gold: rgba(165, 129, 31, .38);

    --brand-soft: #7a5e12;
    --brand-tint: #f6efda;
    --brand-tint-strong: #ecdfbc;
    --success-tint: #e6f3e9;
    --warning-tint: #f8eed7;
    --danger-tint: #f8e5e2;
    --info-tint: #e6eef4;

    --focus-ring: rgba(165, 129, 31, .38);

    --shadow-sm: 0 1px 2px rgba(30, 26, 18, .06), 0 2px 8px rgba(30, 26, 18, .05);
    --shadow-md: 0 6px 18px rgba(30, 26, 18, .10);
    --shadow-lg: 0 18px 40px rgba(30, 26, 18, .16);
}

/* --------------------------------------------------------------------------
   4. PUENTE HACIA BOOTSTRAP 5.3
   Mapea los tokens de Kronos sobre las variables --bs-* para que TODOS los
   componentes de Bootstrap (badge, alert, list-group, tabla, formularios...)
   sigan la marca y el modo sin reescribirlos uno a uno.
   -------------------------------------------------------------------------- */
:root,
[data-bs-theme="dark"] {
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-subtle);
    --bs-emphasis-color: var(--text);

    --bs-body-font-family: var(--font-body);

    --bs-primary: var(--brand);
    --bs-primary-rgb: 200, 162, 58;
    --bs-primary-text-emphasis: #e0c87f;
    --bs-primary-bg-subtle: var(--brand-tint);
    --bs-primary-border-subtle: var(--brand-tint-strong);

    --bs-link-color: #d9bd6b;
    --bs-link-color-rgb: 217, 189, 107;
    --bs-link-hover-color: #ecd79c;

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);

    --bs-success-rgb: 63, 158, 87;
    --bs-warning-rgb: 207, 145, 40;
    --bs-danger-rgb: 207, 75, 63;
    --bs-info-rgb: 79, 139, 176;

    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-inset);

    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: var(--surface-2);

    --bs-emphasis-color-rgb: 236, 231, 219;
}

[data-bs-theme="light"] {
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-tertiary-color: var(--text-subtle);
    --bs-emphasis-color: var(--text);

    --bs-primary: var(--brand);
    --bs-primary-rgb: 200, 162, 58;
    --bs-primary-text-emphasis: var(--brand-stronger);
    --bs-primary-bg-subtle: var(--brand-tint);
    --bs-primary-border-subtle: var(--brand-tint-strong);

    --bs-link-color: #7a5e12;
    --bs-link-color-rgb: 122, 94, 18;
    --bs-link-hover-color: #5c460c;

    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--border);

    --bs-secondary-bg: var(--surface-2);
    --bs-tertiary-bg: var(--surface-inset);

    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--border);
    --bs-card-cap-bg: var(--surface-2);

    --bs-emphasis-color-rgb: 30, 26, 18;
}