/* assets/css/styles.css */

/* Custom Glassmorphism Panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.dark .glass-panel {
    background: rgba(30, 41, 59, 0.7); /* slate-800 con opacidad */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
}

.dark ::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.5); /* slate-400 */
    border-radius: 10px;
}

.dark ::-webkit-scrollbar-thumb {
    background: rgba(71, 85, 105, 0.5); /* slate-600 */
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.8); /* slate-500 */
}

/* Evitar flashes al iniciar */
body {
    -webkit-tap-highlight-color: transparent;
}

/* --- UI/UX PRO MAX SIDEBAR --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700;900&family=Inter:wght@400;600;700&display=swap');

.font-outfit {
    font-family: 'Outfit', sans-serif;
}

.glass-sidebar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 4px 0 24px rgba(0,0,0,0.02);
}

.dark .glass-sidebar {
    background: rgba(15, 23, 42, 0.4); /* slate-900/40 */
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 4px 0 32px rgba(0,0,0,0.5);
}

/* Sidebar Collapsed State */
.sidebar-collapsed {
    width: 6rem !important; /* w-24 (NAV-1.5) — w-20 left too little room for the footer's
                                40px user avatar circle once its p-4 + px-2 padding is subtracted,
                                cropping it; 6rem gives icons and the avatar comfortable room. */
}

.sidebar-collapsed .nav-item span,
.sidebar-collapsed #user-display-name,
.sidebar-collapsed #user-display-role,
.sidebar-collapsed h1 {
    display: none;
}

.sidebar-collapsed .nav-item {
    justify-content: center;
}

.sidebar-collapsed .nav-item i {
    margin-right: 0;
}

/* NAV-1.6: once .nav-item's text is hidden above, its icon centers correctly —
   but the header logo/toggle rows and the footer avatar/logout rows keep their
   expanded-mode alignment (default flex-start, or justify-end) since they had
   no collapsed-state override, landing on a different horizontal center than
   the nav icons. Force them onto the same centered axis. */
.sidebar-collapsed .sidebar-header-logo-row,
.sidebar-collapsed .sidebar-header-actions-row,
.sidebar-collapsed .sidebar-footer-user-row,
.sidebar-collapsed .sidebar-footer-logout-row {
    justify-content: center;
}

/* Retractable sidebar nav groups (NAV-SIDEBAR-GROUPS-1) */
.sidebar-group-toggle .sidebar-group-chevron {
    transition: transform 0.15s ease;
}

.sidebar-group-toggle[aria-expanded="false"] .sidebar-group-chevron {
    transform: rotate(-90deg);
}

/* A user's per-group retracted preference must not hide icons once the whole
   sidebar goes icon-only — force the content visible regardless of its
   `hidden` attribute while `.sidebar-collapsed` is active. The group toggle
   button itself stays hidden via the existing `.sidebar-collapsed .nav-group-label`
   rule above, so it never behaves as a clickable control in that mode. */
.sidebar-collapsed [data-sidebar-group-content][hidden] {
    display: block !important;
}

/* HUD Glow indicators for validation summary */
.hud-glow-red { border-left: 4px solid #ef4444; box-shadow: -4px 0 20px -5px rgba(239, 68, 68, 0.35); }
.hud-glow-amber { border-left: 4px solid #f59e0b; box-shadow: -4px 0 20px -5px rgba(245, 158, 11, 0.35); }
.hud-glow-green { border-left: 4px solid #10b981; box-shadow: -4px 0 20px -5px rgba(16, 185, 129, 0.35); }
.hud-glow-blue { border-left: 4px solid #3b82f6; box-shadow: -4px 0 20px -5px rgba(59, 130, 246, 0.35); }
.hud-glow-purple { border-left: 4px solid #a855f7; box-shadow: -4px 0 20px -5px rgba(168, 85, 247, 0.35); }
.hud-glow-gray { border-left: 4px solid #94a3b8; }
.autocomplete-dropdown { max-height: 150px; overflow-y: auto; position: absolute; z-index: 50; width: 100%; }

/* FRONTEND-ASSET-CACHE-INVALIDATION-1D-A: banner persistente de nueva versión.
   #view-login, #view-dashboard y su columna principal interna fijan su propia
   altura en unidades de viewport (min-h-screen/h-screen) en vez de heredarla
   de <body>. Un padding-top en <body> por sí solo no las reduciría, dejando
   un scroll de página nuevo exclusivamente por el banner — por eso las tres
   además reducen su altura al espacio realmente restante bajo el banner
   mientras esté activo.
   El desplazamiento hacia abajo (para que el contenido no quede calculado
   detrás del banner fixed) se hace con padding-top en <body>, no con
   margin-top en las vistas: un margin-top en el primer hijo en flujo de
   <body> colapsa a través de <body> hacia <html> (ambos sin borde/padding
   propio que lo evite), sumando esa misma altura al scrollHeight del
   documento — confirmado empíricamente durante esta fase (scrollTo(0,100)
   sí desplazaba la página exactamente la altura del banner). padding-top
   nunca colapsa, así que <body> crece exactamente lo necesario (padding +
   altura ya reducida de la vista = 100dvh) sin excedente.
   La altura real del banner (variable, según ancho/zoom/salto de línea) la
   mide y actualiza appVersionUpdateUi.js vía ResizeObserver, nunca por
   polling. */
:root {
    --app-version-banner-height: 0px;
}

body.app-version-mismatch-active {
    padding-top: var(--app-version-banner-height, 0px);
}

body.app-version-mismatch-active .app-version-fill-height {
    height: calc(100dvh - var(--app-version-banner-height, 0px));
    min-height: calc(100dvh - var(--app-version-banner-height, 0px));
}

/* #auth-global-error ya existe con top-4 (1rem) fijo — cuando el banner de
   versión también está activo, se desplaza justo debajo de él para que
   ambos avisos puedan coexistir sin superponerse. No toca su JS ni su
   contrato de cierre, solo su posición. */
body.app-version-mismatch-active #auth-global-error {
    top: calc(var(--app-version-banner-height, 0px) + 1rem);
}

/* FRONTEND-ASSET-CACHE-INVALIDATION-1D-B1: estado visual de "modo lectura"
   para controles mutantes. Depende exclusivamente de la combinación clase-
   del-body + atributo — nunca solo de `disabled`, porque un módulo puede
   reactivar `disabled=false` en su propio `finally` sin saber que el modo
   lectura sigue activo (appVersionReadOnly.js es quien vuelve a aplicar el
   bloqueo real ante ese caso). No usa pointer-events:none: la defensa
   funcional vive en JS (captura de click/submit/keydown), este selector es
   puramente informativo — pointer-events:none impediría además el foco por
   teclado y el propio tooltip nativo. No se toca tamaño ni se oculta texto,
   solo opacidad y cursor, igual en claro/oscuro. */
body.app-version-mismatch-active [data-app-mutation-control] {
    opacity: 0.55;
    cursor: not-allowed;
    transition: opacity 0.15s ease;
}

body.app-version-mismatch-active [data-app-mutation-control]:hover {
    opacity: 0.55;
}

/* UFS-06-UI-HEADER-ALIGN: el <select> de Cliente/Faena en el header global
   toma su altura del contenido (line-height del texto de la opción elegida
   vía populateSelect() en dashboard.js). Cuando queda sin <option> (estado
   "sin selección") no hay texto que establezca esa altura, y el <span>
   read-only equivalente (#scope-readonly-*, mostrado para roles con alcance
   fijo) tampoco fija su propia altura/line-height — en ambos casos el
   contenido puede desalinearse verticalmente respecto al ícono lucide de
   14px (w-3.5 h-3.5) de al lado. Se fija una altura de línea consistente
   igual al ícono para que el estado "con selección" y "sin selección"
   compartan siempre el mismo eje vertical. */
#sel-cliente,
#sel-zona,
#scope-readonly-cliente,
#scope-readonly-zona {
    line-height: 0.875rem; /* 14px, igual a w-3.5/h-3.5 */
    display: inline-flex;
    align-items: center;
}