/* =============================================================================
   SANORA — TOKENS DEL SHELL
   -----------------------------------------------------------------------------
   Única fuente de color de toda la aplicación. Ningún componente lleva un hex.

   POR QUÉ ESTÁN ACÁ Y NO EN LA LIBRERÍA

   UI_Controles trae su propia paleta en `--st-*`. Esta hoja la SOBRESCRIBE: al
   final del archivo, cada `--st-*` de color queda apuntando a un token de acá.
   Así StTextBox, StLabel y StProgressButton adoptan esta paleta sin reescribir
   una línea de su CSS, y hay una sola definición de qué es "el acento".

   Lo que NO se toca de la librería son sus tokens de métrica y tipografía
   —`--st-input-height`, `--st-fs-*`, `--st-font-ui`—: eso no es color y sigue
   viniendo de tokens.css.

   ORDEN DE CARGA (App.razor): ui-controles.css primero, esta hoja después. Es
   lo que hace que los alias ganen la cascada.

   -----------------------------------------------------------------------------
   LA TRAMPA DEL TEMA OSCURO

   Los tokens claros van EN ESTA HOJA, nunca como estilo inline en un contenedor:
   el inline gana la cascada y `[data-theme="dark"]` no podría sobrescribirlo. El
   atributo `data-theme` va en <html> y lo fija el script del <head> antes del
   primer pintado.
   ============================================================================= */

:root,
[data-theme="light"] {
    --surface-canvas: #F6F7F8;
    --surface-1: #FFFFFF;
    --surface-2: #EFF1F3;

    --border: #E1E5E9;
    --border-strong: #CBD2D8;

    --text-1: #1B2227;
    --text-2: #66727C;
    --text-3: #939DA6;

    --accent: #12796B;
    --accent-weak: rgba(18, 121, 107, 0.10);
    --accent-hover: #0E6355;

    --action-bg: #1F272C;
    --action-fg: #FFFFFF;

    --warn: #A96F12;
    --warn-weak: rgba(169, 111, 18, 0.13);
    --error: #B3261E;
    --error-weak: rgba(179, 38, 30, 0.12);
    --success: #2E7D50;
    --info: #1F6FA8;

    --shadow-popover: 0 4px 12px rgba(0, 0, 0, .10);
    --shadow-dialog: 0 8px 28px rgba(15, 22, 28, .16);
    --backdrop: rgba(27, 34, 39, .32);
}

[data-theme="dark"] {
    color-scheme: dark;

    --surface-canvas: #14181A;
    --surface-1: #1C2124;
    --surface-2: #242A2E;

    --border: #31383D;
    --border-strong: #454E54;

    --text-1: #E6EBEE;
    --text-2: #9AA6AD;
    --text-3: #727E85;

    /* Más claro que en el tema claro, a propósito: el acento oscuro tiene que
       levantarse del fondo, no hundirse. Reutilizar #12796B acá lo dejaría
       casi invisible sobre #1C2124. */
    --accent: #48BFAB;
    --accent-weak: rgba(72, 191, 171, 0.15);
    --accent-hover: #5FD0BC;

    /* El botón primario INVIERTE: fondo claro sobre texto oscuro. No se pinta
       de acento — el acento ya significa "activo" en todo el sistema. */
    --action-bg: #E6EBEE;
    --action-fg: #1C2124;

    --warn: #DFA84E;
    --warn-weak: rgba(223, 168, 78, 0.15);
    --error: #E2726D;
    --error-weak: rgba(226, 114, 109, 0.15);
    --success: #5FBF87;
    --info: #64AEE0;

    --shadow-popover: 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-dialog: 0 8px 28px rgba(0, 0, 0, .48);
    --backdrop: rgba(0, 0, 0, .45);
}

/* ---- Geometría y espaciado -------------------------------------------------
   No cambian con el tema, pero viven acá para que ningún componente invente
   un radio suelto.                                                          */
:root {
    --radius-control: 7px;
    --radius-container: 10px;
    --radius-pill: 999px;

    /* Alturas del cromo. El vertical suma 40 + 44 + 28 = 112px y no debe crecer. */
    --h-tabstrip: 40px;
    --h-period-banner: 32px;
    --h-doc-header: 44px;
    --h-status-bar: 28px;

    --w-sidebar: 248px;
    --w-sidebar-collapsed: 56px;
    --w-rail: 320px;
    --w-rail-collapsed: 40px;

    --ease-shell: cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================================
   MENSAJE FIJO DEL FORMULARIO
   -----------------------------------------------------------------------------
   Los errores de una ficha larga no pueden quedar al final de su área de scroll:
   la persona debe verlos desde cualquier pestaña y posición. La geometría la
   publica FrmMain para respetar el sidebar y el rail. Los modales conservan el
   mensaje dentro de su propio diálogo.
   ============================================================================= */

.shell-documento
    .st-formulario-mantenimiento:not(.st-formulario-mantenimiento--modal)
    .st-formulario-mensaje {
    position: fixed;
    z-index: 20;
    inset-inline-start: var(--shell-sidebar-actual);
    inset-inline-end: var(--shell-rail-actual);
    bottom: var(--h-status-bar);
    max-height: 92px;
    margin-left:0.75rem;
    margin-right: 0.75rem;
    padding: 8px 12px;
    overflow: auto;
    border: 0;
    border-top: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 0;
    background: var(--surface-1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
    color: var(--text-1);
    font-size: 12px;
}

.shell-documento
    .st-formulario-mantenimiento:not(.st-formulario-mantenimiento--modal)
    .st-formulario-mensaje[role="alert"],
.shell-documento
    .st-formulario-mantenimiento:not(.st-formulario-mantenimiento--modal)
    .st-formulario-mensaje[class*="--error"] {
    border-left-color: var(--error);
    background: var(--error-weak);
    color: var(--error);
}

/* Reserva el espacio de una barra de dos líneas al final del recorrido. Así el
   último control nunca queda oculto detrás del mensaje al llegar al fondo. */
.cont:has(
    .st-formulario-mantenimiento:not(.st-formulario-mantenimiento--modal)
    .st-formulario-mensaje) {
    padding-bottom: 58px;
    scroll-padding-bottom: 58px;
}

/* =============================================================================
   TIPOGRAFÍA
   ============================================================================= */

/*  Inter viene de la librería de controles: se reutiliza el mismo archivo en
    vez de servir dos copias del mismo tipo.                                  */
@font-face {
    font-family: 'Inter';
    src: url('/_content/UI_Controles/fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/*  PENDIENTE — JetBrains Mono.

    El archivo todavía no está en el proyecto. Mientras tanto, la familia de
    datos cae a la monoespaciada del sistema, que en Windows es Consolas y se
    comporta bien: ancho fijo y buena distinción entre 0 y O.

    Para activarla: dejar JetBrainsMono-Regular.woff2 en
    UI_Controles/wwwroot/fonts/ y descomentar este bloque.

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/_content/UI_Controles/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
*/

:root {
    --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-data: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono',
                 Consolas, 'Liberation Mono', monospace;
}

/*  Clase única para todo dato monoespaciado: historia clínica, cédula, RUC,
    número de documento, hora, período, versión y contadores "1 / 6".

    tabular-nums alinea las columnas de dígitos; slashed-zero distingue 0 de O,
    que en un número de historia clínica no es cosmética.                     */
.dato {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums slashed-zero;
}

/* =============================================================================
   RESET
   ============================================================================= */

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

html, body {
    height: 100%;
    margin: 0;
    /* El body NUNCA scrollea. El scroll vive solo en la lista del sidebar, la
       tira de pestañas, el área de contenido y la lista de la paleta. */
    overflow: hidden;
}

body {
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.45;
    background: var(--surface-canvas);
    color: var(--text-1);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Foco -----------------------------------------------------------------
   :focus-visible y no :focus — el anillo aparece al navegar con teclado y no
   al hacer clic, que es cuando molesta sin aportar nada.                    */
:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

::selection {
    background: var(--accent-weak);
    color: var(--text-1);
}

/* ---- Scrollbars finos ------------------------------------------------------
   6px: presente cuando hace falta, sin robarle ancho al contenido.          */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-pill);
}

/* ---- Movimiento reducido ---------------------------------------------------
   Se respeta la preferencia del sistema. Lo que se apaga es el movimiento
   decorativo —chevrons, deslizamiento de paneles—, no la información.       */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/*  Durante el cambio de tema se apagan TODAS las transiciones. Sin esto, cada
    superficie interpola su color por separado y la pantalla hace un barrido
    sucio de medio segundo en vez de cambiar de golpe.                        */
.st-sin-transiciones,
.st-sin-transiciones *,
.st-sin-transiciones *::before,
.st-sin-transiciones *::after {
    transition: none !important;
}

/* ---- Accesible pero invisible --------------------------------------------- */
.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;
}

/* =============================================================================
   PUENTE HACIA UI_CONTROLES
   -----------------------------------------------------------------------------
   Cada token de color de la librería queda apuntando a uno de acá. Es lo que
   hace que un StTextBox dentro del shell tenga el mismo foco verde que el resto
   de la interfaz en vez de su turquesa original.

   Va al final del archivo para ganar la cascada sobre tokens.css, y se declara
   en :root y en [data-theme="dark"] porque las variables no heredan el valor
   recalculado de otra rama del selector.

   NOTA: light.css y dark.css de la librería quedan inertes, porque responden a
   `data-st-theme` y ese atributo ya no se emite. Es intencional: dos atributos
   de tema es una forma segura de que un día queden desincronizados.
   ============================================================================= */

:root, [data-theme="light"], [data-theme="dark"] {
    --st-surface: var(--surface-canvas);
    --st-surface-raised: var(--surface-1);
    --st-surface-alt: var(--surface-2);
    --st-surface-hover: var(--surface-2);
    --st-surface-active: var(--surface-2);
    --st-overlay: var(--backdrop);

    --st-text: var(--text-1);
    --st-text-secondary: var(--text-2);
    --st-text-muted: var(--text-3);
    --st-text-disabled: var(--text-3);
    --st-text-heading: var(--text-1);
    --st-text-on-accent: var(--action-fg);

    --st-border: var(--border);
    --st-border-strong: var(--border-strong);
    --st-border-radius: var(--radius-control);
    --st-border-radius-sm: 5px;

    --st-accent: var(--accent);
    --st-accent-hover: var(--accent-hover);
    --st-accent-active: var(--accent-hover);
    --st-accent-soft: var(--accent-weak);
    --st-accent-glow: var(--accent-weak);

    --st-secondary: var(--info);
    --st-secondary-hover: var(--info);
    --st-secondary-soft: var(--accent-weak);

    --st-danger: var(--error);
    --st-danger-soft: var(--error-weak);
    --st-warning: var(--warn);
    --st-warning-soft: var(--warn-weak);
    --st-success: var(--success);
    --st-success-soft: var(--accent-weak);
    --st-info: var(--info);
    --st-info-soft: var(--accent-weak);

    --st-focus-outline: 2px solid var(--accent);
    --st-focus-halo: var(--accent-weak);
    --st-focus-ring: 0 0 0 2px var(--accent-weak);

    --st-input-bg: var(--surface-1);
    --st-input-bg-hover: var(--surface-1);
    --st-input-bg-focus: var(--surface-1);
    --st-input-bg-readonly: var(--st-input-bg);
    --st-input-bg-disabled: var(--surface-2);
    --st-input-text: var(--text-1);
    --st-input-text-disabled: var(--text-3);
    --st-input-placeholder: var(--text-3);
    --st-input-border: var(--border);
    --st-input-border-hover: var(--border-strong);
    --st-input-border-focus: var(--accent);
    --st-input-border-disabled: var(--border);
    --st-input-border-error: var(--error);
    --st-input-border-success: var(--success);
    --st-input-label: var(--text-1);
    --st-input-help: var(--text-2);
    --st-input-error-text: var(--error);
    --st-input-shadow: none;

    --st-icon: var(--text-3);
    --st-icon-hover: var(--accent);
    --st-icon-active: var(--accent);
    --st-icon-disabled: var(--text-3);
    --st-icon-danger: var(--error);
    --st-icon-success: var(--success);
    --st-icon-chip-bg: var(--surface-2);
    --st-icon-chip-fg: var(--text-2);

    --st-iconbtn-bg-hover: var(--surface-2);
    --st-iconbtn-bg-active: var(--accent-weak);

    /* Sin sombra fuera de popovers y menús: es regla del sistema, no un ajuste. */
    --st-shadow-sm: none;
    --st-shadow-md: var(--shadow-popover);
    --st-shadow-lg: var(--shadow-dialog);

    --st-font-datos: var(--font-data);

    --st-font-display: var(--font-ui);
    --st-font-ui: var(--font-ui);
    --st-numeric-features: tabular-nums slashed-zero;
}