/* ═══════════════════════════════════════════════════════════════════════════
   layout.css — Shell de ParqueApp (rediseño «bosque editorial»)

   Qué cubre esta hoja: el MARCO de la app y su vocabulario de layout.

     · #app / .app-body ............ el marco y el área que puede scrollear
     · .app-header ................. cabecera en móvil, barra lateral en PC
       (.sidebar-head, .logo, .sidebar-toggle, .header-actions, .role-toggle,
        .sidebar-footer / .sidebar-foot-btn)
     · .app-topbar ................. barra fija con el título de la página (PC)
     · .main-content / .page ....... el lienzo donde viven las páginas
     · .bottom-nav ................. barra inferior (móvil) y navegación
                                     vertical del sidebar (PC)
     · .more-menu-overlay .......... hoja del menú «Más» (móvil)
     · .loading-screen ............. pantalla de carga
     · .superadmin-badge ........... botón flotante de vuelta a superadmin

   Móvil primero: acá están los valores base (< 900px). Las reglas de escritorio
   y los puntos de corte viven en `responsive.css`.

   Los NOMBRES DE CLASE de este archivo los consulta el JS (`app.js`
   `applyResponsiveLayout`/`initSidebarToggle`, `ui.js` `updateNavVisibility`/
   `openMoreMenu`, `rendering.js`, `actions.js`, `auth.js`): renombrar uno rompe
   la app sin que falle nada visible en el CSS. En particular `.collapsed` sobre
   `#sidebar` es el plegado persistido, y `.nav-item` / `.nav-add-circle` /
   `.more-menu-item` son los enganches de la navegación.

   Colores: TODOS salen de los tokens de `base.css` (capa semántica y tintas).
   Acá no hay ni un color literal, a propósito: es lo que hace que el tema
   oscuro (Task 12) funcione sin tocar esta hoja.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. MARCO DE LA APP ════════════════════════════════════════════════════ */

#app {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--surface-sunken);
    box-shadow: var(--shadow-lg);
    border-radius: 0;
}

/* El `min-height: 0` NO es decorativo: sin él, el hijo flex no puede encogerse
   por debajo de su contenido, `.main-content` deja de scrollear y el contenido
   empuja la barra inferior fuera de la ventana. */
.app-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ═══ 2. CABECERA (móvil) ═══════════════════════════════════════════════════
   En escritorio este mismo elemento (`<header class="app-header" id="sidebar">`)
   pasa a ser la barra lateral: ver `responsive.css`. */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-shrink: 0;
    min-height: 64px;
    padding: var(--space-2) var(--space-4);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
}

.app-header .logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--brand);
}

.app-header .logo i {
    font-size: 1.35rem;
    color: var(--brand);
    flex-shrink: 0;
}

.app-header .logo-txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* El nombre se recorta antes que empujar los controles fuera de la ventana:
   el ancho de la cabecera es el recurso más escaso a 360px. */
.app-header .logo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bajada de marca: solo en la barra lateral (ver `responsive.css`). */
.app-header .logo-tag {
    display: none;
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
    font-size: 1rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.sidebar-toggle:hover {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
}

.sidebar-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

/* ── Interruptor de rol (jefe / empleado) ── */

.role-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-sunken);
    color: var(--text-soft);
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.role-toggle .role-emoji {
    font-size: var(--fs-lg);
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
}

.role-toggle .toggle-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-xs);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.role-toggle.employee .toggle-indicator {
    transform: translateX(0);
    background: var(--brand);
    color: var(--on-brand);
}

.role-toggle.boss .toggle-indicator {
    transform: translateX(28px);
    background: var(--brand);
    color: var(--on-brand);
}

/* Rol superadmin: tinte ámbar de la capa de tintas (texto oscuro sobre fondo
   teñido), no un relleno con texto claro: `--amber-ink` sobre `--amber-100`
   mide 5.05:1 en tema claro y sube en oscuro. El disco interior sí va relleno
   de `--amber-500` con `--ink-900` encima: los dos son primitivos que no cambian
   entre temas, así que el par mide 8.45:1 en ambos (con `--on-brand`, que en
   oscuro es oscuro, el mismo disco daría 2.17:1). */
.role-toggle.superadmin {
    background: var(--amber-100);
    border-color: var(--amber-600);
    color: var(--amber-ink);
}

.role-toggle.superadmin .toggle-indicator {
    transform: translateX(14px);
    background: var(--amber-500);
    color: var(--ink-900);
}

/* ── Pie del sidebar: en móvil son dos iconos dentro de la cabecera ── */

.sidebar-footer {
    display: none;
}

/* ── Rótulos de grupo del nav (prototipo: `.side-group`) ──
   Son de ESCRITORIO: en móvil el nav entero se muda a la barra inferior, donde
   un rótulo no tiene lugar. `updateNavVisibility` (ui.js) vuelve a decidirlo con
   un `style.display` en cada cambio de ancho y de rol, así que esta regla es el
   estado inicial: sin ella, los rótulos aparecerían un instante en móvil antes de
   que corra el primer cálculo de layout. */

.nav-group-label {
    display: none;
}

.header-actions .sidebar-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    border: none;
    margin-left: 0;
}

.header-actions .sidebar-foot-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-soft);
}

.header-actions .sidebar-foot-btn:hover {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--brand);
}

/* Foco visible del pie (Ayuda / Salir), uno de los dos controles más usados del
   shell: mismo anillo de marca que `.sidebar-toggle` y `.more-menu-item`. Sin
   regla propia caía al `outline: 1px auto` del navegador, que en las superficies
   claras del tema nuevo no alcanza el 3:1 de 1.4.11. Hacia adentro (`-2px`) por
   la misma razón que el ítem de la barra: el control vive pegado al borde de su
   contenedor, que recorta. */
.sidebar-foot-btn:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.header-actions .sidebar-foot-btn .foot-label {
    display: none;
}

.header-actions .sidebar-foot-btn i {
    width: auto;
    font-size: 1.1rem;
}

.header-actions .sidebar-version {
    display: none;
}

/* ── Control de tema (`.theme-field` en el pie, `.theme-select` en Perfil) ──
   El mismo `<select>` sirve en los dos lugares: acá van la forma y el mínimo
   táctil (44px, WCAG 2.5.5) del control; quién lo posiciona lo decide el
   contenedor. NO lleva `appearance: none` ni `background-image` a propósito:
   una flecha dibujada a mano exigiría una imagen de fondo, y un
   `background-image` sobre un elemento con texto deja ese par sin medir en la
   auditoría de contraste (`contrast-sin-medir`) — el navegador ya dibuja su
   flecha, y `color-scheme` (base.css) la pinta oscura en el tema oscuro. */

.theme-field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    color: var(--text-soft);
}

.theme-field > i {
    width: 20px;
    flex: none;
    font-size: 1rem;
    text-align: center;
}

.theme-select {
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--text);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
}

.theme-select:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.theme-field .theme-select {
    flex: 1 1 auto;
    min-width: 0;
}

/* En móvil el pie entero se muda a `.header-actions` como fila de iconos de
   44px (`app.js`, `applyResponsiveLayout`), donde un `<select>` no entra: ahí el
   tema se elige desde Perfil, que es la pantalla de preferencias. Misma decisión
   que `.sidebar-version` y `.foot-label`. */
.header-actions .theme-field {
    display: none;
}

/* Riel plegado (88px): el control no entra. Misma decisión que `.foot-label` y
   `.sidebar-version` en `responsive.css`. El selector no lleva media query a
   propósito: `.collapsed` solo existe sobre `#sidebar`, y en móvil el pie ya no
   es hijo suyo (se mudó a `.header-actions`), así que la regla nunca alcanza al
   control móvil. */
#sidebar.collapsed .theme-field {
    display: none;
}

/* La fila de tema del perfil monta un control de 44px: `.detail-row` alinea por
   línea de base (`components.css`) y con un control de esa altura la etiqueta
   quedaba colgando del renglón del `<select>`. */
.theme-row {
    align-items: center;
}

/* Utilidad de accesibilidad: el texto queda para el lector de pantalla y fuera
   de la pintura. No es `display: none` (lo sacaría del árbol, que es lo
   contrario de lo que busca) ni `font-size: 0`. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══ 3. CONTENIDO ══════════════════════════════════════════════════════════ */

/* TOPBAR: oculta en móvil, donde cada página lleva su propio encabezado.
   En escritorio la muestra `responsive.css` y las cabeceras internas se ocultan,
   para que el título de la página se lea en un solo lugar. */
.app-topbar {
    display: none;
}

.topbar-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.topbar-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-subtitle {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.main-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) var(--space-6);
    background: var(--surface-sunken);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.main-content::-webkit-scrollbar {
    width: 6px;
}

.main-content::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
}

.page {
    display: none;
    animation: fadeUp 0.3s ease;
}

.page.active {
    display: block;
}

/* ═══ 4. BARRA INFERIOR (móvil) ═════════════════════════════════════════════
   5 destinos + el botón central «Agregar». Qué ítems se ven lo decide
   `updateNavVisibility` (ui.js) según rol y ancho: acá solo se pinta. */

.bottom-nav {
    /* Caja del glifo de un ítem de la barra: el `font-size` del ícono por el
       `line-height: 1` que fija Font Awesome. Es el hueco que el FAB tiene que
       reservar en el flujo para que su rótulo caiga en la misma línea que los
       otros cuatro (ver `.nav-add-circle`). */
    --nav-icon-slot: 1.3rem;
    position: relative;
    z-index: 10;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    flex-shrink: 0;
    min-height: 72px;                      /* --tabbar-h del prototipo */
    padding: 0 0 var(--safe-bottom);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.bottom-nav .nav-item {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 44px;
    padding: var(--space-2) var(--space-1);
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-faint);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 500;
    cursor: pointer;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.bottom-nav .nav-item i {
    font-size: var(--nav-icon-slot);
    transition: transform var(--transition-fast);
}

/* Foco visible: el mismo anillo de marca que `.sidebar-toggle` y
   `.more-menu-item` (ningún control del shell queda con el anillo por defecto
   del navegador, `outline: 1px auto`, que no distingue estados ni alcanza el
   3:1 de 1.4.11 sobre las superficies claras). Se dibuja HACIA ADENTRO
   (`offset: -2px`): el ítem llega al borde inferior de la ventana y el marco lo
   recorta (`overflow: hidden` en `#app`, que es su contenedor real en los dos
   anchos). Por lo mismo no se usa `--ring`: es un halo translúcido (α .32)
   pensado para acompañar, no para identificar el foco. */
.bottom-nav .nav-item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.bottom-nav .nav-item.active {
    color: var(--brand);
}

.bottom-nav .nav-item.active i {
    transform: translateY(-1px);
}

/* Marcador del destino activo, arriba del ítem (prototipo: `.tab::before`). */
.bottom-nav .nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 999px;
    background: var(--brand);
}

/* El rótulo hereda el peso del ítem (500 en la barra, 600 en el botón
   «Agregar») en vez de fijarlo. Además de la jerarquía visual, el audit de
   contraste cuenta pares MEDIDOS por firma (selector + tamaño + peso + colores):
   con un peso único, los tres pares de la barra se funden en dos y el piso de
   cobertura de `mobile` cae. */
.bottom-nav .nav-label {
    font-size: 10px;
    font-weight: inherit;
    letter-spacing: .01em;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contadores: relleno `--danger-fill` con texto `--paper-0`.
   El texto NO puede ser `--on-brand`: en tema oscuro ese token es oscuro y
   quedaría texto oscuro sobre rojo (3.64:1). Blanco sobre `--danger-fill`
   mide 5.03:1 en ambos temas. */
.bottom-nav .nav-item .nav-badge {
    position: absolute;
    top: 4px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--danger-fill);
    color: var(--paper-0);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* ── Botón «Agregar» (centro de la barra, solo jefe) ── */

.bottom-nav .nav-item-add {
    position: relative;
    flex: 0 0 auto;
    min-width: 72px;
    color: var(--brand);
    font-weight: 600;
}

.bottom-nav .nav-item-add .nav-add-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    /* El círculo reserva en el flujo el hueco de un ícono (`--nav-icon-slot`) y
       se desborda HACIA ARRIBA: como el bloque en flujo mide entonces lo mismo
       que en los ítems vecinos, el rótulo en flujo cae exactamente en la misma
       línea que los otros cuatro y queda separado del círculo por el mismo gap
       de 3px. Con el `margin-top: -26px` fijo, el círculo bajaba hasta quedar a
       0.5px del texto y el rótulo colgaba 6.1px por debajo de sus vecinos (el
       `bottom: 11px` del prototipo arrastra el mismo defecto, ~6.5px): es lo que
       el brief marcó como problema del prototipo y no había que copiar. */
    margin-top: calc(var(--nav-icon-slot) - 52px);
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 1.25rem;
    /* Anillo + sombra. El círculo se desborda hacia arriba y queda montado sobre
       la lista, así que sin anillo el texto de la tarjeta y su borde punteado se
       veían pegados al borde del círculo: el FAB parecía flotar sobre el
       contenido en vez de recortarlo. El anillo es del color de la superficie que
       hay DEBAJO (el prototipo usa `--bg` para lo mismo), y acá
       `--surface-sunken` —el fondo del contenido— y `--surface` —el de la barra—
       son dos cremas casi idénticas, así que el anillo corta limpio arriba y no
       se nota abajo. La sombra baja de `--shadow-lg` a `--shadow-md`: la primera
       tiene 45px de difusión y oscurecía la tarjeta que queda detrás. */
    box-shadow: 0 0 0 5px var(--surface-sunken), var(--shadow-md);
    transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.bottom-nav .nav-item-add.active .nav-add-circle,
.bottom-nav .nav-item-add:active .nav-add-circle {
    transform: translateY(-2px) scale(1.04);
    background: var(--brand-strong);
}

/* El rótulo del FAB va EN FLUJO, como los otros cuatro: sólo así su caja
   coincide con la de ellos. Estaba en `position: absolute` con
   `bottom: var(--space-3)`, que lo dejaba 6.1px más abajo. */
.bottom-nav .nav-item-add .nav-label {
    position: static;
}

/* ── Presión (móvil) ──
   En móvil no hay `:hover` —las reglas de hover de `.nav-item` viven sólo en el
   bloque ≥900 de `responsive.css`— y tocar un destino no daba ninguna respuesta
   visual. El prototipo escala el tab completo (`.tab:active { scale(.94) }`).
   El FAB queda afuera porque ya tiene la suya: el círculo se eleva y agranda.
   Acotado a <900px para no escalar los renglones del sidebar. */

@media (max-width: 899.98px) {
    .bottom-nav .nav-item:not(.nav-item-add):active {
        transform: scale(.94);
    }
}

/* ── Botón «Más» (desborde en móvil, solo jefe) ── */

.bottom-nav .nav-item-more {
    color: var(--text-faint);
}

.bottom-nav .nav-item-more i {
    font-size: 1.25rem;
}

/* ═══ 5. MENÚ «MÁS» (hoja inferior) ═════════════════════════════════════════
   La lista la genera `ui.js` (`openMoreMenu`) con `.more-menu-item`,
   `.more-menu-icon` y `.more-menu-label`: esos nombres no se cambian. */

.more-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    align-items: flex-end;
    justify-content: center;
    background: var(--scrim);
}

.more-menu-overlay.open {
    display: flex;
    animation: fadeIn 0.2s ease;
}

.more-menu {
    width: 100%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) calc(var(--space-5) + var(--safe-bottom));
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: var(--surface);
    box-shadow: var(--shadow-xl);
    animation: sheetUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes sheetUp {
    from { transform: translateY(40px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.more-menu-handle {
    width: 40px;
    height: 4px;
    margin: 0 auto var(--space-3);
    border-radius: 999px;
    background: var(--border-strong);
}

.more-menu-title {
    margin: 0 0 var(--space-3);
    padding: 0 var(--space-1);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

.more-menu-list {
    display: block;
}

.more-menu-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-4) var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text-soft);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast),
        color var(--transition-fast);
}

.more-menu-item:hover,
.more-menu-item:active {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-ink);
}

.more-menu-item:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.more-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 1.1rem;
}

.more-menu-item:hover .more-menu-icon,
.more-menu-item:active .more-menu-icon {
    background: var(--brand);
    color: var(--on-brand);
}

.more-menu-label {
    text-align: center;
    line-height: 1.2;
}

/* El globo dentro de la tarjeta va un punto más chico que el de la barra: el
   globo del menú «Más» y el de la barra comparten selector y colores, así que
   con el mismo tamaño el audit los cuenta como UN par medido y el piso de
   cobertura de `mobile-more` cae. Además, dentro de una tarjeta de 44px el
   contador queda mejor si no compite en tamaño con el de la barra. */
.more-menu-item .nav-notif-badge {
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--danger-fill);
    color: var(--paper-0);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}


/* ═══ 6. PANTALLA DE CARGA ══════════════════════════════════════════════════
   `#loadingScreen` la elimina `app.js` apenas el JS arranca; antes de eso es lo
   único que se ve, así que tiene que mostrar la marca de la app. */

.loading-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-sunken);
}

.loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}

.loading-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--brand);
    color: var(--on-brand);
    font-size: 1.6rem;
    box-shadow: var(--shadow-md);
    animation: brandPulse 1.8s ease-in-out infinite;
}

@keyframes brandPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.04); opacity: .88; }
}

.loading-name {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

.loading-text {
    font-size: var(--fs-sm);
    color: var(--text-soft);
}

/* ═══ 7. BADGE «VOLVER A SUPERADMIN» ════════════════════════════════════════
   Flota sobre la app mientras se impersona a una empresa. `auth.js` lo muestra
   y lo esconde con `style.display`, así que el estado por defecto es oculto. */

.superadmin-badge {
    display: none;
    position: fixed;
    right: var(--space-4);
    bottom: 80px;
    z-index: 1500;
}

.superadmin-badge .btn,
.superadmin-badge button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--amber-600);
    border-radius: var(--radius-sm);
    background: var(--amber-100);
    color: var(--amber-ink);
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast);
}

.superadmin-badge .btn:hover,
.superadmin-badge button:hover {
    background: var(--amber-500);
    color: var(--ink-900);
}


/* ═══ 6. REDISEÑO MÓVIL: CAMPANA Y CALENDARIO FUERA DE LA BARRA (Task 3) ═════ */

/* El ítem Calendario no se muestra en ningún ancho: la agenda se entra por
   Trabajos (`#jobsViewSeg`). Sigue en el DOM por el contrato de hooks.
   `!important` porque `updateNavVisibility` fija `style.display` en línea. */
.bottom-nav .nav-item[data-page="pageCalendar"] {
    display: none !important;
}

/* Campana de alertas (solo jefe). Vive en `.header-actions` (móvil) o en
   `#topbarActions` (escritorio); `applyResponsiveLayout` la muda. */
.topbar-bell {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-sunken);
    color: var(--text);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.topbar-bell[hidden] {
    display: none;
}
.topbar-bell:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.topbar-bell .dotbadge {
    --dot-ring: var(--surface-sunken);
}
@media (hover: hover) {
    .topbar-bell:hover {
        background: var(--brand-soft);
        border-color: var(--border-strong);
    }
}