/* Altura uniforme de los inputs de 60dias (InputGeneric, InputAutocomplete), patrón Gestoría.
   OJO: el Height de estos componentes es la altura TOTAL del campo incluyendo el label
   (text-sm 20px + mb-1 4px = 24px), así que caja = total - 24px. Con 68px la caja queda en 44px,
   igual que el min-h-[44px] del InputComboBox (que no admite Height).
   Se define también inline en MainLayout para que aplique sin depender de la caché de este CSS. */
:root {
    --dv-field-height: 68px;
}

/* ── Tema (claro / oscuro) ─────────────────────────────────────────────────────────────────────
   La paleta de Tailwind (App.razor) lee estas variables como canales RGB sueltos, para que sigan
   funcionando las opacidades (border-ink/10). El tema lo aplica el script del <head> (clase "dark" en
   <html>) antes de pintar, a partir de lo guardado en el navegador. `marino` es el azul oscuro de marca
   FIJO: velos de modales, burbujas de Aldán y panel del login no deben aclararse en oscuro. */
:root {
    --c-ink: 14 42 48;
    --c-ink-soft: 58 102 112;
    --c-paper: 244 246 245;
    --c-paper-alt: 234 238 237;
    --c-paper-deep: 216 223 222;
    --c-surface: 255 255 255;
    --c-brand: 43 173 192;
    --c-brand-hover: 30 142 159;
    --c-brand-soft: 147 216 228;
    --c-brand-bg: 232 247 249;
    --c-accent: 143 201 122;
    --c-accent-hover: 106 171 85;
    --c-accent-soft: 194 224 180;
    --c-accent-bg: 239 247 235;
    --c-marino: 14 42 48;
    color-scheme: light;
}

html.dark {
    --c-ink: 226 236 238;
    --c-ink-soft: 150 176 182;
    --c-paper: 11 21 24;
    --c-paper-alt: 20 33 37;
    --c-paper-deep: 34 52 58;
    --c-surface: 17 29 33;
    --c-brand-hover: 92 201 216;
    --c-brand-soft: 31 95 106;
    --c-brand-bg: 16 52 58;
    --c-accent-hover: 160 214 140;
    --c-accent-soft: 52 84 45;
    --c-accent-bg: 24 42 22;
    color-scheme: dark;
}

/* App-shell: el navegador (html/body) nunca scrollea; todo el scroll vertical ocurre dentro
   del <main> del MainLayout (overflow-auto + min-h-0). Evita el doble scroll (navegador +
   plataforma) cuando el contenido de una página supera el alto del viewport. */
html, body {
    height: 100%;
    overflow: hidden;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* El ModalBase de 60dias se renderiza con z-10, por debajo de la cabecera sticky del Grid
   (z-index: 20). Lo elevamos por encima de la cabecera, los filtros (z-30) y los popovers. */
#modal-container {
    z-index: 1100 !important;
}

/* El desplegable de InputAutocomplete se pinta una vez SIN estilo antes de que la librería calcule su
   posición, y mide el input en ese instante. Esta regla vive en el <style> de InputGeneric: en una
   página sin InputGeneric (el inicio) no existe, el menú entra en el flujo, estira el input (h-full)
   y la posición calculada sale cientos de px por debajo. Declararla aquí la garantiza en todas. */
.dropdown-menu-active {
    position: fixed !important;
    z-index: 999999 !important;
}

/* Modal con un desplegable absolute (InputComboBox) y poco contenido: el cuerpo de ModalBase
   (overflow-y:auto) y su panel (overflow-hidden) lo recortarían. Con .modal-desborde en el contenido
   ambos dejan ver el desbordamiento y el desplegable pasa por encima del pie y fuera del modal. El
   pie redondea sus esquinas, que antes recortaba el overflow-hidden del panel. Solo para modales
   cortos: el cuerpo deja de tener scroll propio. */
#modal-container div.overflow-hidden:has(.modal-desborde) {
    overflow: visible !important;
}

#modal-container div.overflow-hidden:has(.modal-desborde) > div:last-child {
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
}

#modal-container div:has(> .modal-desborde) {
    overflow: visible !important;
}

/* Entrada del mini chat de Aldán (widget flotante): la clase Tailwind arbitraria
   animate-[aldan-in_.18s_ease-out] referencia este keyframe. */
@keyframes aldan-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Entrada de cada mensaje del hilo (animate-[aldan-msg_.2s_ease-out]). */
@keyframes aldan-msg {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Puntos del indicador "Aldán está escribiendo…" (animation:aldan-dot 1s infinite). */
@keyframes aldan-dot {
    0%, 80%, 100% {
        opacity: .3;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

/* Fase de auditoría en curso: latido lento del contorno para transmitir que el ERP está trabajando.
   No se anima la opacidad del contenido, para que el texto siga legible todo el rato. */
@keyframes fase-activa {
    0%, 100% {
        border-color: rgb(30 142 159 / .3);
        box-shadow: 0 0 0 0 rgb(30 142 159 / 0);
    }

    50% {
        border-color: rgb(30 142 159 / .75);
        box-shadow: 0 0 0 4px rgb(30 142 159 / .12);
    }
}

.fase-activa {
    animation: fase-activa 2.4s ease-in-out infinite;
}

@keyframes fase-activa-punto {
    0%, 100% {
        opacity: .45;
        transform: scale(.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.fase-activa-punto {
    display: inline-block;
    animation: fase-activa-punto 2.4s ease-in-out infinite;
}

/* Barrido de cierre de fase. Una fase puede completarse entre dos sondeos (la selección, o una
   extracción de tickets ya extraídos), y entonces el 100% nunca llega a renderizarse: el componente
   lo fabrica manteniendo la barra llena un instante antes de reiniciarla para la fase siguiente. */
@keyframes barra-completando {
    from {
        box-shadow: 0 0 0 0 rgb(30 142 159 / .45);
    }

    to {
        box-shadow: 0 0 0 7px rgb(30 142 159 / 0);
    }
}

.barra-completando {
    animation: barra-completando .9s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .fase-activa,
    .fase-activa-punto,
    .barra-completando {
        animation: none;
    }
}

/* ══ Modo oscuro ═══════════════════════════════════════════════════════════════════════════════
   Nuestras pantallas usan la paleta de tema (ink, paper, surface, brand…), que ya cambia sola. Aquí va
   lo que no: (1) los colores del Grid que la librería admite por parámetro (GridTema), como variables;
   (2) los grises/blancos de Tailwind que pinta la propia librería 60dias (Grid, InputGeneric, modales,
   chips), que no tiene parámetro de modo oscuro; (3) los tintes de estado (rojo, ámbar, esmeralda…),
   que en oscuro pasan a fondos translúcidos y textos claros. Selectores con html.dark delante: ganan a
   las reglas encapsuladas de la librería; donde ella usa !important, aquí también. */

:root {
    --grid-cabecera-bg: #F3F4F6;
    --grid-cabecera-texto: #374151;
    --grid-agrupar-bg: #F9FAFB;
    --grid-paginacion-bg: #FFFFFF;
    --grid-acento-bg: #EFF6FF;
    --grid-acento-texto: #1E40AF;
    --grid-acento-borde: #BFDBFE;
    --grid-contador-bg: #2563EB;
    --grid-contador-texto: #FFFFFF;
}

html.dark {
    --grid-cabecera-bg: rgb(var(--c-paper-alt));
    --grid-cabecera-texto: rgb(var(--c-ink));
    --grid-agrupar-bg: rgb(var(--c-paper-alt));
    --grid-paginacion-bg: rgb(var(--c-surface));
    --grid-acento-bg: rgb(var(--c-brand-bg));
    --grid-acento-texto: rgb(var(--c-brand-hover));
    --grid-acento-borde: rgb(var(--c-brand-soft));
    --grid-contador-bg: rgb(var(--c-brand));
    --grid-contador-texto: #FFFFFF;
    /* Variables con valor por defecto en la hoja del Grid: paginación y desplegables. */
    --panel-text: rgb(var(--c-ink));
    --grid-surface: rgb(var(--c-surface));
    --grid-border: rgb(var(--c-ink) / .14);
    --grid-foggy: rgb(var(--c-ink-soft));
    --grid-midnight: rgb(var(--c-ink));
    --grid-primary: rgb(var(--c-brand));
    --grid-primary-soft: rgb(var(--c-brand-bg));
}

/* ── (2) Grises y blancos de Tailwind usados por la librería ── */
html.dark .bg-white { background-color: rgb(var(--c-surface)); }
html.dark .bg-white\/90 { background-color: rgb(var(--c-surface) / .9); }
html.dark .bg-gray-50, html.dark .bg-slate-50 { background-color: rgb(var(--c-paper-alt)); }
html.dark .bg-gray-100, html.dark .bg-slate-100 { background-color: rgb(var(--c-paper-alt)); }
html.dark .bg-gray-200, html.dark .bg-gray-300, html.dark .bg-slate-300 { background-color: rgb(var(--c-paper-deep)); }
html.dark .odd\:bg-white:nth-child(odd) { background-color: rgb(var(--c-surface)); }
html.dark .even\:bg-gray-50:nth-child(even) { background-color: rgb(var(--c-paper)); }
html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover { background-color: rgb(var(--c-paper-deep)); }
html.dark .hover\:bg-blue-50:hover, html.dark .hover\:bg-blue-100:hover, html.dark .hover\:bg-indigo-100:hover,
html.dark .bg-blue-50, html.dark .bg-blue-100, html.dark .bg-indigo-50 { background-color: rgb(var(--c-brand-bg)); }
html.dark .text-gray-900, html.dark .text-gray-800, html.dark .text-gray-700, html.dark .text-slate-800,
html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-gray-600:hover { color: rgb(var(--c-ink)); }
html.dark .text-gray-600, html.dark .text-gray-500, html.dark .text-gray-400, html.dark .text-slate-600,
html.dark .text-slate-500 { color: rgb(var(--c-ink-soft)); }
html.dark .text-gray-300 { color: rgb(var(--c-ink-soft) / .6); }
html.dark .text-blue-500, html.dark .text-blue-600, html.dark .text-blue-800, html.dark .hover\:text-blue-800:hover { color: rgb(var(--c-brand-hover)); }
html.dark .border-gray-100, html.dark .border-gray-200 { border-color: rgb(var(--c-ink) / .12); }
html.dark .border-gray-300 { border-color: rgb(var(--c-ink) / .2); }
html.dark .border-blue-200, html.dark .border-indigo-200 { border-color: rgb(var(--c-brand-soft)); }
html.dark .placeholder-gray-400::placeholder { color: rgb(var(--c-ink-soft) / .7); }
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--c-ink) / .12); }

/* Grid: barra, desplegables, paneles de agrupar y filtrar, paginación, pie y menú contextual. */
html.dark .main-card { background: rgb(var(--c-surface)); border-color: rgb(var(--c-ink) / .1); }
html.dark .grid-toolbar { background: rgb(var(--c-surface)); border-bottom-color: rgb(var(--c-ink) / .1); }
html.dark .grid-toolbar-btn, html.dark .grid-dropdown, html.dark .grid-group-panel, html.dark .grid-group-panel-label,
html.dark .grid-filter-panel, html.dark .grid-filter-panel-label {
    background: rgb(var(--c-surface)); border-color: rgb(var(--c-ink) / .16); color: rgb(var(--c-ink-soft));
}
html.dark .grid-toolbar-btn:hover, html.dark .grid-filter-panel-label:hover { color: rgb(var(--c-ink)); background: rgb(var(--c-paper-alt)); }
html.dark .grid-dropdown-divider { background: rgb(var(--c-ink) / .1); }
html.dark .grid-page-header-title { color: rgb(var(--c-ink)); }
html.dark .grid-page-header-subtitle { color: rgb(var(--c-ink-soft)); }
html.dark .add-filter-btn { color: rgb(var(--c-ink-soft)); border-color: rgb(var(--c-ink) / .2); }
html.dark .add-filter-btn:hover { color: rgb(var(--c-ink)); background: rgb(var(--c-brand-bg)); }
html.dark .grid-group-panel-hint { color: rgb(var(--c-ink-soft) / .7); }
html.dark .grid-group-row:hover td { background-color: rgb(var(--c-brand-bg)) !important; }
html.dark .grid-group-row .group-arrow, html.dark .grid-group-row .group-count { color: rgb(var(--c-brand-hover)); }
html.dark tr.group-row-level-0, html.dark tr.group-row-level-1, html.dark tr.group-row-level-2 { background-color: rgb(var(--c-paper-alt)) !important; }
html.dark .pagination-btn-inactive { background-color: rgb(var(--c-surface)) !important; border-color: rgb(var(--c-ink) / .14) !important; color: rgb(var(--c-ink-soft)) !important; }
html.dark tfoot td { background: rgb(var(--c-paper-alt)); color: rgb(var(--c-ink)); border-top-color: rgb(var(--c-ink) / .14); }
html.dark #blazorContextMenu { background: rgb(var(--c-surface)); border-color: rgb(var(--c-ink) / .14); }
html.dark #blazorContextMenu button:hover { background-color: rgb(var(--c-paper-alt)) !important; }
html.dark .custom-scroll::-webkit-scrollbar-thumb { background: rgb(var(--c-ink) / .25); }

/* Mapa (Leaflet): controles y atribución sobre el basemap oscuro. */
html.dark .leaflet-bar a, html.dark .leaflet-control-attribution {
    background-color: rgb(var(--c-surface) / .9); color: rgb(var(--c-ink-soft)); border-color: rgb(var(--c-ink) / .14);
}
html.dark .leaflet-control-attribution a { color: rgb(var(--c-brand-hover)); }
html.dark .leaflet-container { background: rgb(var(--c-paper-alt)); }

/* ── (3) Tintes de estado: fondos translúcidos y textos claros ── */
html.dark .bg-red-50, html.dark .hover\:bg-red-50:hover { background-color: rgb(239 68 68 / .12); }
html.dark .bg-red-100, html.dark .hover\:bg-red-100:hover { background-color: rgb(239 68 68 / .2); }
html.dark .bg-amber-50, html.dark .hover\:bg-amber-50:hover { background-color: rgb(245 158 11 / .12); }
html.dark .from-amber-50 {
    --tw-gradient-from: rgb(245 158 11 / .12) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(245 158 11 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.dark .bg-amber-100, html.dark .hover\:bg-amber-100:hover { background-color: rgb(245 158 11 / .2); }
html.dark .hover\:bg-amber-200:hover { background-color: rgb(245 158 11 / .28); }
html.dark .bg-emerald-50 { background-color: rgb(16 185 129 / .12); }
html.dark .bg-emerald-100, html.dark .hover\:bg-emerald-100:hover { background-color: rgb(16 185 129 / .2); }
html.dark .bg-sky-50 { background-color: rgb(14 165 233 / .12); }
html.dark .hover\:bg-sky-100:hover { background-color: rgb(14 165 233 / .2); }
html.dark .bg-orange-100 { background-color: rgb(249 115 22 / .2); }
html.dark .border-red-200 { border-color: rgb(239 68 68 / .35); }
html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgb(245 158 11 / .35); }
html.dark .border-emerald-200 { border-color: rgb(16 185 129 / .35); }
html.dark .border-sky-200 { border-color: rgb(14 165 233 / .35); }
html.dark .text-red-600, html.dark .text-red-700, html.dark .hover\:text-red-600:hover, html.dark .hover\:text-red-700:hover { color: #FCA5A5; }
html.dark .text-amber-600, html.dark .text-amber-700, html.dark .text-amber-800, html.dark .text-amber-900 { color: #FCD34D; }
html.dark .text-emerald-600, html.dark .text-emerald-700, html.dark .text-emerald-800, html.dark .text-emerald-900 { color: #6EE7B7; }
html.dark .text-sky-600, html.dark .text-sky-700, html.dark .text-sky-800 { color: #7DD3FC; }
html.dark .text-orange-700 { color: #FDBA74; }