/* Shared CSS for ManVal Application */
/* This file contains all common styles to avoid duplication across views */

/* CSS Variables - Color Theme */
:root {
    /* Enhanced Deep Navy Blue Theme - Primary */
    --navy-1: #0a1428;
    --navy-2: #1a2438;
    --navy-3: #2a3448;
    --navy-4: #3a4458;
    --navy-5: #4a5468;

    /* Refined Periwinkle Theme - Secondary */
    --periwinkle-1: #f0f4f8;
    --periwinkle-2: #e1e8f0;
    --periwinkle-3: #c8d6e3;
    --periwinkle-4: #a8c0d6;
    --periwinkle-5: #8aa8c8;

    /* Enhanced Accent Colors */
    --accent-blue: #4a90e2;
    --accent-light-blue: #7bb3f0;
    --accent-orange: #ff8c42;
    --accent-yellow: #ffd93d;

    /* AI accent (copiloto AXI) — usado en login y header para cohesión visual.
       Es color de IDENTIDAD, no de acción: los commits siguen siendo --success y
       lo primario --primary. Ver el skill ui-standard §9. */
    --ai-cyan: #06b6d4;
    --ai-cyan-hover: #22d3ee;

    /* Improved Neutral Colors */
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --medium-gray: #e9ecef;
    --dark-gray: #6c757d;
    --text-dark: #1a1a1a;
    --text-light: #2d3748;
    --text-muted: #718096;

    /* Enhanced UI Colors */
    --card-bg: rgba(255, 255, 255, 0.98);
    --card-border: rgba(255, 255, 255, 0.2);
    --shadow-light: rgba(10, 20, 40, 0.08);
    --shadow-medium: rgba(10, 20, 40, 0.15);
    --shadow-heavy: rgba(10, 20, 40, 0.25);

    /* ════════════════════════════════════════════════════════════════════════
       SISTEMA DE DISEÑO — tokens semánticos (origen único de verdad).
       Las variables de arriba siguen vigentes; la migración a estos tokens es
       por fases. Regla: un solo azul primario; #06b6d4 (cian) = SOLO AXI.
       ════════════════════════════════════════════════════════════════════════ */
    /* Superficies */
    --surface-app: #eef2f7;
    --surface-card: #ffffff;
    --surface-sunken: #f8fafc;
    --surface-hover: #f1f5f9;
    /* Bordes */
    --border-subtle: #eef2f7;
    --border-default: #e2e8f0;
    --border-strong: #cbd5e1;
    /* Texto (rampa slate) */
    --text-strong: #1e293b;
    --text-normal: #334155;
    --text-soft: #64748b;
    --text-faint: #94a3b8;
    --text-on-primary: #ffffff;
    /* Azul primario — UNO solo */
    --primary: #2f6fbf;          /* azul como texto/enlace/activo (AA 4.6:1) */
    --primary-strong: #4a90e2;   /* relleno decorativo / fila activa */
    --primary-hover: #3f82d4;
    --primary-active: #3877c4;
    --primary-tint: #eaf2fc;
    --primary-ring: rgba(74, 144, 226, 0.30);
    /* Acción positiva / commit (Guardar, Autorizar, Aceptar) — verde */
    --success: #16a34a;           --success-hover: #15803d;     --success-active: #166534;
    --success-ring: rgba(22, 163, 74, 0.30);
    /* Estado (fg / bg / borde) */
    --status-ok-fg: #15803d;      --status-ok-bg: #ecfdf3;      --status-ok-bd: #bbf7d0;
    --status-neutral-fg: #64748b; --status-neutral-bg: #f1f5f9; --status-neutral-bd: #e2e8f0;
    --status-warn-fg: #b45309;    --status-warn-bg: #fff7ed;    --status-warn-bd: #fed7aa;
    --status-danger-fg: #b91c1c;  --status-danger-bg: #fef2f2;  --status-danger-bd: #fecaca;
    --status-info-fg: #2f6fbf;    --status-info-bg: #eaf2fc;    --status-info-bd: #cfe0fb;
    /* Tipografía */
    --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
    --fs-micro: 10px; --fs-caption: 11px; --fs-body-sm: 12px; --fs-body: 13px;
    --fs-subtitle: 15px; --fs-title: 18px; --fs-page: 22px;
    --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5;
    /* Espaciado (base 4 + paso 12) */
    --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px;
    --space-5: 16px; --space-6: 24px; --space-7: 32px; --space-8: 48px;
    /* Radio */
    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
    /* Elevación (neutra, sin glow de color) */
    --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-2: 0 2px 6px rgba(15, 23, 42, 0.08);
    --shadow-3: 0 8px 24px rgba(15, 23, 42, 0.12);
    /* Controles */
    --ctrl-h-md: 40px; --ctrl-h-sm: 32px; --ctrl-radius: 6px;
    --ctrl-border: #cbd5e1; --ctrl-border-hover: #94a3b8;

    font-family: var(--font-sans);
    color: var(--text-dark);
}

/* ── Fuentes auto-hospedadas (coloca los .woff2 en wwwroot/fonts/) ───────────
   local() primero: si Inter ya está instalada se usa y no hay regresión; si no,
   se sirve el woff2 del mismo origen (CSP-safe). Hasta colocar los archivos cae
   con elegancia al stack del sistema (igual que hoy). Archivos requeridos:
   Inter-Regular/Medium/SemiBold/Bold.woff2 e IBMPlexMono-Regular/Medium.woff2. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("Inter"), local("Inter-Regular"), url("/fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
    src: local("Inter Medium"), local("Inter-Medium"), url("/fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
    src: local("Inter SemiBold"), local("Inter-SemiBold"), url("/fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
    src: local("Inter Bold"), local("Inter-Bold"), url("/fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("IBM Plex Mono"), local("IBMPlexMono-Regular"), url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
    src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }

/* ── Accesibilidad global ──────────────────────────────────────────────────
   Foco visible por teclado en cualquier control (los que ya traen su propio
   anillo lo conservan; esto cubre los que no tenían indicador). */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
/* Respeta "reducir movimiento" en TODA la app (antes solo lo hacía el login). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Base Styles */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;   /* catch-all: ningún overlay fixed con 100vw provoca scroll horizontal de página */
}

body {
    background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
}

body.authenticated {
    background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
    overflow-x: hidden;   /* sin scroll horizontal de página; la tabla ancha scrollea en su propio .table-container */
    overflow-y: auto;     /* scroll vertical sólo cuando el contenido lo requiere */
    display: block;
    padding: 0;
}

h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    background: linear-gradient(135deg, var(--navy-3), var(--accent-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Form Styles */
form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-light);
}

/* ════════════════════════════════════════════════════════════════════════
   ESTÁNDAR GLOBAL DE CONTROLES (campos de formulario) — token-driven.
   Aplica a TODOS los input/select/textarea del sistema. Las clases de toolbar
   (.table-search-input, .table-filter-select, .date-filter-input,
   .generic-select-display) y de botón (.btn, .action-btn, .generic-button-modal-btn)
   hablan el MISMO lenguaje: alto 40px (--ctrl-h-md), borde 1px --border-strong,
   radio 6px (--radius-sm), 13px (--fs-body), box-sizing border-box y anillo de
   foco --primary.  NO redefinir height/border/border-radius/font-size/box-sizing
   en los <style> de las vistas: rompe el estándar. Para un control compacto usa
   --ctrl-h-sm (32px); para textarea NO fijes height (usa min-height). */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
    height: var(--ctrl-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-normal);
    font-family: inherit;
    font-size: var(--fs-body);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Los inputs de texto llenan su fila por defecto (comportamiento heredado de
   los formularios); <select> y los campos de toolbar fijan su ancho por contexto. */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"] {
    width: 100%;
}

textarea {
    min-height: calc(var(--ctrl-h-md) * 2);
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-normal);
    font-family: inherit;
    font-size: var(--fs-body);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

input[type="text"]::placeholder,
input[type="password"]::placeholder,
input[type="email"]::placeholder,
input[type="search"]::placeholder,
input[type="number"]::placeholder,
input[type="tel"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    color: var(--text-soft);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--surface-sunken);
    color: var(--text-soft);
    cursor: not-allowed;
}

input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    min-width: 140px;
}

/* `.form-control` — clase de campo reutilizable en modales/formularios.
   Misma norma que los campos nativos; es la regla GLOBAL para vistas nuevas.
   Las copias inline existentes se normalizan a estos mismos tokens. */
.form-control {
    height: var(--ctrl-h-md);
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-normal);
    font-family: inherit;
    font-size: var(--fs-body);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.form-control {
    height: auto;
    min-height: calc(var(--ctrl-h-md) * 2);
    padding: 8px 12px;
}

.form-control:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background: var(--surface-sunken);
    color: var(--text-soft);
}

/* Button Styles — flat, token-driven (login.css overrides these for the login card) */
button.primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--primary);
    border: none;
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: inherit;
}

button.primary:hover {
    background: var(--primary-hover);
}

button.primary:active {
    background: var(--primary-active);
}

button.primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

button.ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--text-soft);
    font-size: 14px;
    margin-top: 12px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    font-family: inherit;
}

button.ghost:hover {
    color: var(--primary);
}

button.ghost:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ════════════════════════════════════════════════════════════════════════
   SISTEMA CANÓNICO DE BOTONES — .btn + variantes (flat, token-driven).
   Una sola base; las familias heredadas se re-skinnean a este lenguaje.
   ════════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: var(--ctrl-h-md);
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    text-decoration: none;
}

.btn:disabled,
.btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn--primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn--primary:active { background: var(--primary-active); border-color: var(--primary-active); }

.btn--secondary {
    background: #fff;
    color: var(--text-normal);
    border-color: var(--border-strong);
}
.btn--secondary:hover { background: var(--surface-hover); border-color: #94a3b8; }

.btn--ghost {
    background: transparent;
    color: var(--text-soft);
    border-color: transparent;
}
.btn--ghost:hover { background: var(--surface-hover); color: var(--primary); }

.btn--danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.btn--danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* Acción positiva / commit (Guardar, Autorizar, Aceptar, Confirmar) — verde. */
.btn--success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn--success:hover { background: var(--success-hover); border-color: var(--success-hover); }
.btn--success:active { background: var(--success-active); border-color: var(--success-active); }

.btn--icon {
    min-width: 28px;
    min-height: 28px;
    height: auto;
    padding: 4px;
    background: transparent;
    color: var(--text-soft);
    border-color: transparent;
    border-radius: var(--radius-sm);
}
.btn--icon:hover { background: var(--surface-hover); color: var(--primary); }

/* Icono destructivo (eliminar, limpiar): base .btn--icon con hover de peligro. */
.btn--icon-danger {
    min-width: 28px;
    min-height: 28px;
    height: auto;
    padding: 4px;
    background: transparent;
    color: var(--text-soft);
    border-color: transparent;
    border-radius: var(--radius-sm);
}
.btn--icon-danger:hover:not(:disabled) {
    background: var(--status-danger-bg);
    color: var(--status-danger-fg);
    border-color: var(--status-danger-bd);
}

/* Icono de commit (guardar): base .btn--icon con hover verde. Mismo tamaño y
   forma que .btn--icon-danger, sin gradientes ni sombras. */
.btn--icon-success {
    min-width: 28px;
    min-height: 28px;
    height: auto;
    padding: 4px;
    background: transparent;
    color: var(--text-soft);
    border-color: transparent;
    border-radius: var(--radius-sm);
}
.btn--icon-success:hover:not(:disabled) {
    background: var(--status-ok-bg);
    color: var(--status-ok-fg);
    border-color: var(--status-ok-bd);
}

.btn--sm {
    height: var(--ctrl-h-sm);
    padding: 0 12px;
    font-size: 12px;
}

/* ============================================================================
   Selector de rango de fechas compartido (ds-drp)
   Markup: Views/Shared/_DateRangePicker.cshtml · Comportamiento: js/daterange.js
   Trigger con la geometría estándar de control (40px / border-strong / radius-sm
   / 13px) + popover con presets y calendario doble + listbox de años.
   Los paneles flotantes son position:fixed — las toolbars viven bajo varios
   overflow (data-table-section, main-content, layout) que recortarían un
   absolute — y arrancan en top:-10000px para que ningún frame se pinte en la
   esquina 0,0 antes de que el JS los posicione (flip + clamp al viewport).
   ============================================================================ */
.ds-drp { position: relative; flex-shrink: 0; }

.ds-drp-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    height: var(--ctrl-h-md);
    padding: 0 12px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body);
    color: var(--text-normal);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-drp-trigger:hover { border-color: var(--primary); }
.ds-drp-trigger[aria-expanded="true"] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.ds-drp-trigger > svg { color: var(--text-soft); flex-shrink: 0; }

/* Grid de una sola celda: sizer y etiqueta ocupan la MISMA celda, así el ancho
   del trigger es el del más ancho de los dos y no cambia entre "rango aplicado"
   y "Todas las fechas". */
.ds-drp-labelbox { display: grid; }
.ds-drp-labelbox > * { grid-area: 1 / 1; }
.ds-drp-sizer { visibility: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-drp-label { white-space: nowrap; text-align: left; font-variant-numeric: tabular-nums; }
.ds-drp-caret { transition: transform .15s ease; }
.ds-drp-trigger[aria-expanded="true"] .ds-drp-caret { transform: rotate(180deg); }

.ds-drp-popover {
    position: fixed; top: -10000px; left: 0; z-index: 1200; /* sobre el header fijo (1000-1002), para el flip hacia arriba */
    display: flex; align-items: stretch;
    overflow: auto;   /* solo si el viewport es tan bajo que no cabe ni con flip */
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .14), 0 2px 8px rgba(15, 23, 42, .08);
}
.ds-drp-popover[hidden] { display: none; }

.ds-drp-presets {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 8px; min-width: 148px;
    border-right: 1px solid var(--border-subtle);
    background: var(--surface-sunken);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ds-drp-preset {
    text-align: left; padding: 7px 10px; border: none; background: transparent;
    border-radius: var(--radius-sm); cursor: pointer;
    font-size: var(--fs-body); color: var(--text-normal);
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.ds-drp-preset:hover { background: var(--surface-hover); }
.ds-drp-preset.is-active {
    background: var(--primary-tint);
    color: var(--primary);
    font-weight: 600;
}

.ds-drp-main { display: flex; flex-direction: column; }
.ds-drp-calendars { display: flex; gap: 18px; padding: 12px 14px 8px; }
.ds-drp-month { width: 238px; }
.ds-drp-month-head { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }

/* Selects de mes: contexto compacto → --ctrl-h-sm (32px), la única desviación de
   alto permitida. Borde/radio/fuente vienen del estándar global de <select>. */
.ds-drp-sel { min-width: 0; flex: 1 1 auto; padding: 0 4px 0 6px; height: var(--ctrl-h-sm); }
.ds-drp-sel--month { flex-grow: 1.5; }

/* Botón que abre el listbox de años: replica la caja del <select> de mes que
   tiene al lado para que la fila se lea homogénea. */
.ds-drp-yearbtn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 2px;
    flex: 1 1 auto; min-width: 0;
    height: var(--ctrl-h-sm); padding: 0 4px 0 8px;
    background: #fff;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--fs-body); color: var(--text-normal);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ds-drp-yearbtn:hover { border-color: var(--primary); }
.ds-drp-yearbtn[aria-expanded="true"] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}
.ds-drp-yearbtn > svg { color: var(--text-soft); flex-shrink: 0; }

/* Listbox de años: alto = 10 filas exactas y scroll; el JS centra el año
   seleccionado al abrir (lee las dos custom properties). */
.ds-drp-yearlist {
    --ds-drp-year-row: 30px;
    --ds-drp-year-rows: 10;
    position: fixed; top: -10000px; left: 0; z-index: 1300;
    width: 108px;
    max-height: calc(var(--ds-drp-year-row) * var(--ds-drp-year-rows));
    overflow-y: auto;
    padding: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
}
.ds-drp-yearlist[hidden] { display: none; }
.ds-drp-yearopt {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: var(--ds-drp-year-row);
    border: none; background: transparent; cursor: pointer;
    font-size: var(--fs-body); color: var(--text-normal);
    font-variant-numeric: tabular-nums;
}
.ds-drp-yearopt:hover { background: var(--surface-hover); }
.ds-drp-yearopt.is-active {
    background: var(--primary-tint);
    color: var(--primary); font-weight: 600;
}
.ds-drp-yearopt.is-today-year { box-shadow: inset 0 0 0 1px var(--border-strong); }

.ds-drp-nav {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; flex: 0 0 26px; border: none; background: transparent;
    border-radius: var(--radius-sm); cursor: pointer; color: var(--text-soft);
}
.ds-drp-nav:hover { background: var(--surface-hover); color: var(--primary); }
.ds-drp-nav--ghost { visibility: hidden; }

.ds-drp-grid { display: grid; grid-template-columns: repeat(7, 34px); }
.ds-drp-dow {
    height: 24px; display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-caption); font-weight: 600; color: var(--text-faint);
    text-transform: uppercase;
}
.ds-drp-day {
    height: 30px; margin: 1px 0; border: none; background: transparent;
    font-size: var(--fs-body-sm); color: var(--text-normal);
    border-radius: var(--radius-sm); cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.ds-drp-day--void { cursor: default; }
.ds-drp-day[data-date]:hover:not(.is-start):not(.is-end) { background: var(--surface-hover); }
.ds-drp-day.is-today { box-shadow: inset 0 0 0 1px var(--border-strong); }
.ds-drp-day.in-range { background: var(--primary-tint); border-radius: 0; }
.ds-drp-day.is-start, .ds-drp-day.is-end {
    background: var(--primary); color: #fff; font-weight: 600;
}
.ds-drp-day.is-start { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.ds-drp-day.is-end { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ds-drp-day.is-start.is-end { border-radius: var(--radius-sm); }

.ds-drp-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 10px 10px 14px;
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-body-sm); color: var(--text-soft);
}
.ds-drp-summary strong { color: var(--text-strong); font-weight: 600; }
.ds-drp-clear { flex-shrink: 0; gap: 6px; }

/* --- Modo fecha única (_DatePicker.cshtml) --------------------------------------
   Mismo control con un solo calendario y sin columna de presets: el resumen empuja los
   dos botones (Hoy · Borrar) a la derecha. Las reglas del panel se anclan al POPOVER, no
   al wrapper: al abrirse se mueve a <body> y dejaría de ser su descendiente. */
.ds-drp-popover--single .ds-drp-summary { flex: 1 1 auto; }
.ds-drp-popover--single .ds-drp-footer { gap: 6px; justify-content: flex-end; }

/* Este modo vive en formularios, donde el campo ocupa todo el ancho de su .form-group
   igual que un input o un select. El trigger se estira y la etiqueta crece para que el
   caret quede pegado al borde derecho, como en un <select>. (En los filtros el de rango
   conserva su ancho automático, fijado por el sizer.) */
.ds-drp--single { display: block; }
.ds-drp--single .ds-drp-trigger { width: 100%; }
.ds-drp--single .ds-drp-labelbox { flex: 1 1 auto; }

/* El trigger deshabilitado se lee como control apagado, igual que un input
   deshabilitado (Programas y Padrones apaga los campos del tipo no elegido). */
.ds-drp-trigger:disabled {
    background: var(--surface-sunken);
    color: var(--text-soft);
    cursor: not-allowed;
}
.ds-drp-trigger:disabled:hover { border-color: var(--border-strong); }

/* Paneles portalizados a <body> (ver daterange.js): position:fixed contra el viewport,
   fuera del alcance de contenedores con overflow o backdrop-filter que los recortarían.
   El z-index ya lo traen .ds-drp-popover (1200) y .ds-drp-yearlist (1300), por encima
   del overlay de los modales (1000). */
body > .ds-drp-portal { position: fixed; }

/* Dashboard Container */
.dashboard-container {
    position: relative;
    z-index: 10;
    max-width: 90vw;
    width: 90%;
    margin: 0 auto;
    padding: 32px;
    border-radius: 20px;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.95) 50%,
            rgba(248, 250, 252, 0.92) 100%);
    box-shadow:
        0 20px 40px rgba(10, 20, 40, 0.25),
        0 8px 16px rgba(10, 20, 40, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.dashboard-container {
    margin-top: 48px;
    padding: 24px;
    min-height: calc(100vh - 48px);
    max-width: 90vw;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 20px 40px var(--shadow-medium);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Calculator Container */
.calculator-container {
    margin-top: 48px;
    padding: 24px;
    min-height: calc(100vh - 48px);
    width: 90%;
    max-width: 90vw;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(135deg, var(--navy-1) 0%, var(--navy-2) 50%, var(--navy-3) 100%);
}
/* =========================================================================
   Axi — asistente visual del producto. Renderado vía Views/Shared/_AxiExpression.cshtml.
   Todos los usos de Axi comparten esta clase base.
   ========================================================================= */
.axi-expression {
    display: inline-block;
    object-fit: contain;
    user-select: none;
}

/* HeadOnly: recorta la cabeza como avatar circular para las expresiones verticales
   (axi-pensando, axi-alerta, etc.) sin necesidad de wrapper HTML. */
.axi-expression--head-only {
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
}

/* =========================================================================
   Instantes formateados en el huso del usuario — <time class="fecha-local">
   change: fix-fecha-registro-huso-usuario

   El servidor emite estos elementos VACÍOS, con el instante sólo en el atributo
   `datetime`, y los llena `wwwroot/js/fecha-local.js` en el huso del navegador.

   El `::after` es el FALLBACK, y no es cosmético: si el módulo no carga o el JS
   falla, sin esta regla la celda queda EN BLANCO — y una celda en blanco se lee
   como "no hay dato", no como "falló el formateo". Mostrar el ISO crudo es feo y
   por eso mismo inconfundible: la diferencia entre una falla que se reporta y una
   que se interpreta mal.
   ========================================================================= */
time.fecha-local:empty::after {
    content: attr(datetime);
    font-variant-numeric: tabular-nums;
    color: var(--text-soft);
}

/* =========================================================================
   Aviso de vigencia de la FIEL — etiqueta bajo el header del dashboard
   ========================================================================= */
.fiel-aviso {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    border-bottom: 1px solid transparent;
    font-size: var(--fs-body);
    font-weight: 500;
    flex-shrink: 0;
}

.fiel-aviso--proxima {
    background: var(--status-warn-bg);
    border-bottom-color: var(--status-warn-bd);
    color: var(--status-warn-fg);
}

.fiel-aviso--vencida {
    background: var(--status-danger-bg);
    border-bottom-color: var(--status-danger-bd);
    color: var(--status-danger-fg);
}

.fiel-aviso__icono {
    flex-shrink: 0;
}

.fiel-aviso__texto {
    flex: 1;
    min-width: 0;
}

.fiel-aviso__cerrar {
    flex-shrink: 0;
    color: inherit;
}

.fiel-aviso__cerrar:hover {
    background: rgba(15, 23, 42, .08);
}