/* ============================================================
   Shell común: sidebar izquierdo + cabecera sticky de app
   Multi-página: planificacion, proceso, optimizador, visor
   ============================================================ */

/* Fuente Inter variable (self-hosted, OFL: comun/fuentes/LICENSE-INTER.txt). */
@font-face {
    font-family: 'Inter';
    src: url('fuentes/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Movimiento */
    --hd-dur-micro: 120ms;
    --hd-dur-rapido: 150ms;
    --hd-dur-evento: 200ms;
    --hd-dur-lento: 240ms;
    --hd-ease: cubic-bezier(.2, .7, .3, 1);

    /* Tipografía */
    --hd-fuente: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hd-texto-xs: 12px;
    --hd-texto-s: 13px;
    --hd-texto-m: 14px;
    --hd-texto-l: 15px;
    --hd-texto-xl: 17px;
    --hd-texto-2xl: 20px;

    /* Marca corporativa */
    --hd-verde: #006A3E;
    --hd-verde-oscuro: #005A34;
    --hd-verde-profundo: #00522E;
    --hd-verde-suave: #E4F2EA;
    --hd-verde-borde: #6FB886;
    --hd-rojo: #B3261E;

    /* Superficies y tinta */
    --hd-canvas: #f3f5f7;
    --hd-papel: #ffffff;
    --hd-papel-alto: #f8fafc;
    --hd-tinta: #24313d;
    --hd-tinta-suave: #5F6E7B;
    /* Gris debil con contraste AA sobre blanco (4,6:1): el #7d8d99 que
       usaba la metadata de notificaciones se quedaba en 3,4:1. */
    --hd-tinta-debil: #66757f;
    --hd-linea: #d4dce3;
    --hd-linea-fuerte: #bcc7d0;

    /* Semánticos: éxito / aviso / peligro */
    --hd-exito-texto: #155d2e;
    --hd-exito-borde: #79ba8d;
    --hd-exito-fondo: #ebfaee;
    --hd-exito-fondo-suave: #d8f3de;
    --hd-aviso: #D99A3D;
    --hd-aviso-oscuro: #C78A2D;
    --hd-aviso-borde: #E3B23C;
    --hd-aviso-texto: #7A5600;
    --hd-aviso-fondo: #FFF0BE;
    --hd-aviso-fondo-suave: #FFF9DF;
    --hd-peligro-texto: #A52323;
    --hd-peligro-borde: #DC5151;
    --hd-peligro-fondo: #FFE6E6;

    /* Elevación */
    --hd-sombra-1: 0 1px 3px rgba(20, 40, 58, 0.08);
    --hd-sombra-2: 0 2px 8px rgba(20, 40, 58, 0.10);
    --hd-sombra-3: 0 12px 36px rgba(0, 0, 0, 0.28);

    /* Radios */
    --hd-radio-s: 4px;
    --hd-radio-m: 6px;
    --hd-radio-l: 8px;

    /* Estructura */
    --hd-ancho: 228px;
    --hd-ancho-colapsado: 64px;
    --hd-cabecera-z: 100;
}

body.hd-shell {
    padding-left: var(--hd-ancho);
    transition: padding-left var(--hd-dur-lento) var(--hd-ease);
    margin: 0;
    font-family: var(--hd-fuente);
    color: #24313d;
    background: #f3f5f7;
    -webkit-user-select: none;
    user-select: none;
}

body.hd-shell input,
body.hd-shell textarea,
body.hd-shell select,
body.hd-shell .comentario-flotante,
body.hd-shell .toast,
body.hd-shell .reporte-paginas {
    -webkit-user-select: text;
    user-select: text;
}

/* ---------- Sidebar ---------- */
.hd-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    width: var(--hd-ancho);
    transition: width var(--hd-dur-lento) var(--hd-ease);
    flex-direction: column;
    overflow: hidden;
    color: #f2f7fb;
    background: linear-gradient(180deg, var(--hd-verde-oscuro) 0%, #00492A 100%);
}

.hd-sidebar-cabecera {
    position: relative;
    display: block;
    height: 132px;
    padding: 0 12px;
    flex: 0 0 auto;
}

/* Sin transición: el intercambio logo grande/mini al colapsar es instantáneo,
   igual que el reposicionamiento de los iconos (el fundido con escala se veía
   raro). El mini logo es el fondo del propio botón .hd-colapsar colapsado. */
.hd-logo {
    position: absolute;
    top: 34px;
    left: calc(var(--hd-ancho) / 2);
    transform: translateX(-50%);
    width: 148px;
    height: auto;
    object-fit: contain;
}

.hd-colapsar {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    color: transparent;
    background: transparent;
    cursor: pointer;
}

.hd-colapsar svg {
    display: none;
}

.hd-nav {
    flex: 1 1 auto;
    padding: 18px 10px 10px;
    overflow-y: auto;
    /* Sin scrollbar horizontal: al expandir, durante la animacion de anchura
       los items nowrap desbordan un instante y asomaba una barra sobre el
       separador del pie. Se recortan como el resto de la barra. */
    overflow-x: hidden;
}

.hd-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 3px;
    padding: 8px 12px;
    border-radius: var(--hd-radio-m);
    color: rgba(255, 255, 255, .92);
    font-size: var(--hd-texto-m);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--hd-dur-micro) var(--hd-ease);
}

.hd-item:hover {
    background: rgba(255, 255, 255, .08);
}

.hd-item:active {
    filter: brightness(0.97);
    transform: translateY(1px);
}

.hd-item.activo {
    background: rgba(255, 255, 255, .15);
}

/* Indicador redondeado de la sección activa */
.hd-item.activo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    bottom: 7px;
    width: 3px;
    border-radius: 999px;
    background: var(--hd-verde-borde);
}

.hd-icono {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    text-align: center;
    border-radius: var(--hd-radio-m);
    background: rgba(255, 255, 255, .12);
}

.hd-item.activo .hd-icono {
    background: rgba(255, 255, 255, .22);
}

.hd-icono svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Indicadores de foco por teclado (accesibilidad) */
.hd-item:focus-visible,
.hd-colapsar:focus-visible,
.hd-hamburguesa:focus-visible,
.hd-scroll-top:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .7);
    outline-offset: 2px;
}

.hd-hamburguesa:focus-visible,
.hd-scroll-top:focus-visible {
    outline-color: var(--hd-verde);
}

.hd-sidebar-pie {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

/* Usuario conectado en el pie de la barra (el cierre de sesión vive en el home).
   Extendido va a la izquierda y la campana (margin-left auto) a la derecha. */
.hd-pie-usuario {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 2px;
    min-height: 30px;
}

.hd-pie-usuario.oculto {
    display: none;
}

.hd-pie-usuario-inicial {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #ffffff;
    background: rgba(255, 255, 255, .18);
    font-size: var(--hd-texto-xs);
    font-weight: 700;
    text-transform: uppercase;
}

.hd-pie-usuario-nombre {
    overflow: hidden;
    color: rgba(255, 255, 255, .92);
    font-size: var(--hd-texto-s);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.hd-shell.hd-colapsado .hd-pie-usuario {
    justify-content: center;
    margin-left: 0;
    padding: 0;
}

body.hd-shell.hd-colapsado .hd-pie-usuario-nombre {
    display: none;
}

/* ---------- Colapsado a iconos (escritorio) ---------- */
body.hd-shell.hd-colapsado {
    padding-left: var(--hd-ancho-colapsado);
}

body.hd-shell.hd-colapsado .hd-sidebar {
    width: var(--hd-ancho-colapsado);
}

body.hd-shell.hd-colapsado .hd-texto {
    display: none;
}

body.hd-shell.hd-colapsado .hd-logo {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.42);
}

body.hd-shell.hd-colapsado .hd-sidebar-cabecera {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0;
}

body.hd-shell.hd-colapsado .hd-colapsar {
    inset: auto;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: transparent url('logo-empresa-mini-blanco.png') center / 30px 30px no-repeat;
    color: transparent;
}

body.hd-shell.hd-colapsado .hd-item {
    justify-content: center;
    padding: 7px 0;
}

body.hd-shell.hd-colapsado .hd-icono {
    width: 30px;
    height: 30px;
}

/* El pie conserva su padding de 12px tambien colapsado: la zona del usuario
   mide lo mismo en ambos estados (el padding reducido de 8px compensaba al
   boton de cierre, que ya no vive aqui). */

/* ---------- Campana de notificaciones (cabecera de la app) ---------- */

.hd-notificaciones {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    color: #24313d;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--hd-dur-rapido) var(--hd-ease), color var(--hd-dur-rapido) var(--hd-ease);
}

.hd-notificaciones:hover {
    background: rgba(0, 0, 0, .08);
}

.hd-notificaciones.oculto {
    display: none;
}

/* Vista sin cabecera (p. ej. inicio): boton flotante fijo arriba-derecha,
   espejo de la hamburguesa flotante. */
.hd-notificaciones.flotante {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 100;
    border: 1px solid #d4dce3;
    background: #f3f5f7;
    box-shadow: 0 2px 8px rgba(20, 40, 58, .18);
}

.hd-notificaciones-contador {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    color: #ffffff;
    background: var(--hd-rojo);
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.hd-notificaciones-contador.oculto {
    display: none;
}

/* ---------- Panel de notificaciones ---------- */

.hd-notificaciones-panel {
    position: fixed;
    z-index: 6000;
    display: flex;
    flex-direction: column;
    width: min(340px, calc(100vw - 24px));
    max-height: min(430px, calc(100dvh - 24px));
    border: 1px solid var(--hd-linea);
    border-radius: var(--hd-radio-m);
    background: var(--hd-papel);
    box-shadow: 0 16px 38px rgba(20, 40, 58, 0.28);
    overflow: hidden;
}

.hd-notificaciones-panel.oculto {
    display: none;
}

.hd-notificaciones-cabecera {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--hd-linea);
}

.hd-notificaciones-cabecera strong {
    color: var(--hd-tinta);
    font-size: var(--hd-texto-s);
}

.hd-notificaciones-borrar {
    border: 0;
    padding: 2px 4px;
    background: transparent;
    color: #5b6b76;
    cursor: pointer;
    font-family: var(--hd-fuente);
    font-size: var(--hd-texto-xs);
    font-weight: 600;
}

.hd-notificaciones-borrar:hover {
    color: var(--hd-rojo);
}

.hd-notificaciones-borrar.confirmada {
    color: var(--hd-rojo);
    font-weight: 700;
}

.hd-notificaciones-lista {
    margin: 0;
    padding: 4px;
    list-style: none;
    overflow-y: auto;
}

.hd-notificacion {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-radius: var(--hd-radio-s);
    cursor: pointer;
}

.hd-notificacion:hover {
    background: #eef2f5;
}

.hd-notificacion.vista {
    opacity: .55;
}

.hd-notificacion-icono {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #5b6b76;
    background: #eef2f5;
}

.hd-notificacion-icono.tipo-terminado,
.hd-notificacion-icono.tipo-averia_fin,
.hd-notificacion-icono.tipo-parada_fin,
.hd-notificacion-icono.tipo-iniciado,
.hd-notificacion-icono.tipo-reinicio {
    color: #1e7a45;
    background: #e2f3e7;
}

.hd-notificacion-icono.tipo-averia {
    color: var(--hd-rojo);
    background: #fbe4e2;
}

.hd-notificacion-icono.tipo-parada,
.hd-notificacion-icono.tipo-parada_inicio {
    color: #a67408;
    background: #fdf3d9;
}

.hd-notificacion-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.hd-notificacion-titulo {
    color: var(--hd-tinta);
    font-size: var(--hd-texto-xs);
    overflow-wrap: anywhere;
}

.hd-notificacion-fecha {
    color: var(--hd-tinta-debil);
    font-size: 11px;
}

.hd-notificacion-borrar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--hd-tinta-suave);
    cursor: pointer;
}

.hd-notificacion-borrar.armada { color: var(--hd-rojo); background: #fbe4e2; font-weight: 700; }

.hd-notificacion-borrar:hover {
    color: var(--hd-rojo);
    background: #fbe4e2;
}

.hd-notificaciones-vacio {
    padding: 18px 12px;
    color: var(--hd-tinta-debil);
    font-size: var(--hd-texto-xs);
    text-align: center;
}

.hd-notificaciones-vacio.oculto {
    display: none;
}

/* ---------- Toast de nueva notificación ---------- */

/* Tarjeta de aviso al llegar una notificacion con el panel cerrado (el
   feedback de acciones de las apps usa su propio .toast verde/rojo). Se
   posiciona bajo la campana, alineada a su borde derecho (queda en la
   esquina superior derecha); el clic la oculta y abre el panel. */
.hd-notificacion-toast {
    position: fixed;
    z-index: 6100;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: min(340px, calc(100vw - 24px));
    padding: 10px 12px;
    border: 1px solid var(--hd-linea);
    border-radius: var(--hd-radio-m);
    background: var(--hd-papel);
    box-shadow: var(--hd-sombra-3);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity var(--hd-dur-evento) var(--hd-ease), transform var(--hd-dur-evento) var(--hd-ease);
}

.hd-notificacion-toast.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.hd-notificacion-toast-cuerpo {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.hd-notificacion-toast-titulo {
    color: var(--hd-tinta);
    font-size: var(--hd-texto-s);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hd-notificacion-toast-extra {
    color: var(--hd-tinta-debil);
    font-size: 11px;
}

.hd-notificacion-toast-cerrar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--hd-tinta-suave);
    cursor: pointer;
}

.hd-notificacion-toast-cerrar:hover {
    color: var(--hd-tinta);
    background: #eef2f5;
}

/* ---------- Login sin menú lateral ---------- */
body.hd-shell.hd-sin-sidebar {
    padding-left: 0;
}

body.hd-shell.hd-sin-sidebar .hd-sidebar,
body.hd-shell.hd-sin-sidebar .hd-fondo {
    display: none !important;
}

/* ---------- Cabecera sticky (común a las 4 apps) ---------- */
body.hd-shell .cabecera {
    position: sticky;
    top: 0;
    z-index: var(--hd-cabecera-z);
    color: var(--hd-tinta);
    background: var(--hd-papel);
    border-bottom: 1px solid var(--hd-linea);
    box-shadow: var(--hd-sombra-1);
}

body.hd-shell .cabecera h1 {
    color: var(--hd-tinta);
    font-size: var(--hd-texto-2xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* El separador de la cabecera antigua desaparece: el usuario vive en el sidebar */
body.hd-shell .separador-cabecera {
    display: none !important;
}

body.hd-shell .cabecera h1 .titulo-corto {
    display: none;
}

/* En móvil el título desaparece: cada píxel compite con hamburguesa y
   acciones y el nombre de la vista lo acaba de poner el menú. Los puestos
   de proceso (nivel 8, sin sidebar) lo conservan: el h1 les muestra el
   nombre de su máquina. */
@media (max-width: 900px) {
    body.hd-shell .cabecera h1 {
        display: none;
    }

    body.hd-shell .cabecera h1 .titulo-largo {
        display: none;
    }

    body.hd-shell .cabecera h1 .titulo-corto {
        display: inline;
    }

    body.hd-shell.hd-sin-sidebar .cabecera h1 {
        display: block;
    }
}

/* Los botones de cabecera conservan sus variantes (primario verde en todas
   las apps; antes se fuerzan a gris salvo en planificación). */
body.hd-shell .cabecera .boton.active {
    border-color: var(--hd-verde);
    color: var(--hd-verde-profundo);
    background: var(--hd-verde-suave);
}

body.hd-shell .cabecera .boton.active:hover {
    background: #d3e7dc;
}

body.hd-shell .cabecera .boton:disabled {
    opacity: .55;
    cursor: default;
}

.boton-icono {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* En móvil se oculta el texto y queda solo el icono */
@media (max-width: 900px) {
    body.hd-shell .cabecera .boton .boton-texto {
        display: none;
    }

    body.hd-shell .cabecera .boton {
        gap: 0;
        padding: 0;
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
    }
}

/* El resultado pegajoso del optimizador: su contenedor de scroll ya
   empieza bajo la cabecera. */
body.hd-shell .columna-resultado {
    top: 12px;
}

/* ---------- Hamburguesa (solo móvil) ---------- */
.hd-hamburguesa {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 4px;
    color: #24313d;
    background: transparent;
    cursor: pointer;
}

.hd-hamburguesa svg {
    display: block;
}

.hd-hamburguesa:hover {
    background: rgba(0, 0, 0, .08);
}

.hd-hamburguesa-flotante {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    border: 1px solid #d4dce3;
    background: #f3f5f7;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(20, 40, 58, .18);
}

/* ---------- Cerrar sesión mínimo (nivel 8, en la cabecera de la app) ---------- */
.hd-cerrar-minimo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    color: #24313d;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hd-cerrar-minimo svg {
    display: block;
}

.hd-cerrar-minimo:hover {
    background: rgba(0, 0, 0, .08);
}

.hd-cerrar-minimo:focus-visible {
    outline: 2px solid #00693C;
    outline-offset: 2px;
}

/* ---------- Nivel 8 en móvil: una línea con badges y logout ---------- */
@media (max-width: 900px) {
    body.hd-nivel8 .app-proceso .trabajadores-proceso {
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    body.hd-nivel8 .app-proceso .trabajador-badge {
        min-height: 40px;
        min-width: 28px;
        padding: 0 12px;
        font-size: 14px;
    }

    body.hd-nivel8 .app-proceso .hd-cerrar-minimo {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Ocultar barras de scroll (mantiene el desplazamiento) ---------- */
/* Scrollbars finas y visibles (antes se ocultaban: no se veía qué quedaba
   por recorrer en colas y tablas). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--hd-linea-fuerte) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--hd-linea-fuerte);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #a5b1bc;
}

/* ---------- Botón dinámico de scroll ---------- */
.hd-scroll-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 900;
    display: flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--hd-verde-borde);
    border-radius: 50%;
    color: #ffffff;
    background: var(--hd-verde);
    box-shadow: 0 4px 14px rgba(0, 60, 34, .35);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--hd-dur-evento) var(--hd-ease), transform var(--hd-dur-evento) var(--hd-ease), background var(--hd-dur-evento) var(--hd-ease);
}

.hd-scroll-top:hover {
    background: var(--hd-verde-oscuro);
}

.hd-scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.hd-scroll-top svg {
    display: block;
    width: 24px;
    height: 24px;
    transition: transform var(--hd-dur-evento) var(--hd-ease);
}

.hd-scroll-top:not(.arriba) svg {
    animation: hd-scroll-balanceo 1.6s ease-in-out infinite;
}

@keyframes hd-scroll-balanceo {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}

/* Timbre de la campana al llegar una notificacion nueva: la clase la pone
   comun/notificaciones.js y la retira en animationend (con respaldo por
   timeout). El giro cuelga del punto de suspension de la campana. */
.hd-notificaciones.timbrando .hd-notificaciones-icono svg {
    animation: hd-campana-timbre .9s var(--hd-ease);
    transform-origin: 50% 3px;
}

@keyframes hd-campana-timbre {
    0% { transform: rotate(0); }
    15% { transform: rotate(14deg); }
    30% { transform: rotate(-12deg); }
    45% { transform: rotate(9deg); }
    60% { transform: rotate(-6deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0); }
}

.hd-scroll-top.arriba svg {
    transform: rotate(180deg);
    animation: none;
}

@media (max-width: 900px) {
    .hd-scroll-top {
        right: 14px;
        bottom: 14px;
        width: 48px;
        height: 48px;
    }
}

@media print {
    .hd-scroll-top,
    .hd-notificaciones-panel,
    .hd-notificacion-toast,
    .menu-avisos {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.hd-shell {
        transition: none;
    }

    .hd-sidebar,
    .hd-sidebar.abierta {
        transition: none;
    }

    .hd-scroll-top,
    .hd-scroll-top svg {
        animation: none;
        transition: opacity .1s ease, transform .1s ease;
    }

    .hd-notificaciones.timbrando .hd-notificaciones-icono svg {
        animation: none;
    }
}

/* ---------- Fondo móvil ---------- */
.hd-fondo {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(10, 20, 32, .55);
}

/* ---------- Responsive móvil ---------- */
@media (max-width: 900px) {
    body.hd-shell {
        padding-left: 0;
    }

    .hd-sidebar {
        z-index: 1200;
        width: var(--hd-ancho);
        transform: translateX(-100%);
        transition: transform var(--hd-dur-evento) var(--hd-ease);
    }

    .hd-sidebar.abierta {
        transform: translateX(0);
    }

    .hd-fondo.visible {
        display: block;
    }

    .hd-hamburguesa {
        display: inline-flex;
    }

    body.hd-shell .cabecera .cabecera-izquierda {
        margin-right: auto;
    }

    body.hd-shell .cabecera {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        /* Alineada con el main a 14px: el padding base de 24px dejaba la
           cabecera metida por ambos lados sobre el contenido en movil. */
        padding-left: calc(14px + env(safe-area-inset-left, 0px));
        padding-right: calc(14px + env(safe-area-inset-right, 0px));
    }

    .hd-colapsar {
        display: none;
    }
}

/* ---- Panel de error del enrutador (fallo de carga/montaje de una vista) ---- */

.hd-error-vista {
    display: flex;
    min-height: 60vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 24px;
    text-align: center;
    color: #3a4e5c;
}

.hd-error-vista p {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.hd-error-reintentar {
    padding: 8px 20px;
    border: 1px solid #9fcdb4;
    border-radius: 4px;
    color: var(--hd-verde, #005a34);
    background: #eef7f1;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.hd-error-reintentar:hover { background: #dcefe3; }

/* Objetivos táctiles que se quedaban por debajo de 44px en móvil: campana
   (34px), cerrar sesión de nivel 8 (40px), borrar notificación (22px),
   cerrar toast de notificación (22px) y "Borrar todas" (~30x18). */
@media (max-width: 900px) {
    .hd-notificaciones { width: 44px; height: 44px; }
    .hd-cerrar-minimo { width: 44px; height: 44px; }
    .hd-notificacion-borrar { width: 44px; height: 44px; }
    .hd-notificacion-toast-cerrar { width: 44px; height: 44px; }
    .hd-notificaciones-borrar { padding: 12px 14px; font-size: 13px; }
}