/* Gestión Remota Central — estilo "Data-Dense Dashboard" (WCAG AA).
   Tokens semánticos, foco visible, estados de hover/activo y diseño responsive. */

:root {
    --primary:      #2563EB;
    --primary-700:  #1D4ED8;
    --on-primary:   #FFFFFF;
    --accent:       #059669;
    --bg:           #F8FAFC;
    --surface:      #FFFFFF;
    --fg:           #0F172A;   /* texto principal (contraste alto) */
    --muted-fg:     #475569;   /* texto secundario (~7:1 sobre blanco) */
    --muted:        #F1F5F9;   /* fondos sutiles (cabeceras de tabla, chips) */
    --border:       #CBD5E1;   /* bordes visibles (inputs, tablas) */
    --border-soft:  #E2E8F0;
    --danger:       #DC2626;
    --danger-bg:    #FEF2F2;
    --warn:         #D97706;   /* naranja: salón conectado al central pero sin Gran Bolsa */
    --ok:           #047857;
    --ok-bg:        #ECFDF5;
    --warn-bg:      #FFFBEB;
    --warn-border:  #FDE68A;
    --ring:         #2563EB;
    --radius:       8px;
    --radius-sm:    6px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, -apple-system, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--fg);
    background: var(--bg);
    /* La página mide al menos la pantalla completa (con la barra del navegador colapsada). Así, cuando
       Safari de iOS muestra su barra, el documento es más alto que el área visible y se puede hacer
       scroll, lo que permite que esa barra se colapse al bajar (igual que en la app de salón). */
    min-height: 100dvh;
}

/* ---- Foco visible para navegación por teclado (CRÍTICO) ---- */
:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
    border-radius: 4px;
}
/* No quitar el foco a quien navega con teclado; solo se oculta el anillo del ratón */
:focus:not(:focus-visible) { outline: none; }

/* ---- Skip link ---- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--fg);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 1000;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---- Barra superior ---- */
.topbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--primary);
    color: var(--on-primary);
    padding: .65rem 1.1rem;
}
/* flex 0 0 auto + nowrap: el título no se parte en varias líneas; el desbordamiento
   fuerza el colapso del menú en la hamburguesa (como la .navbar-brand de sala) */
.topbar .brand { font-weight: 600; font-size: 1.05rem; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.topbar .brand__icon { width: 2.1em; height: 2.1em; border-radius: var(--radius-sm); flex: 0 0 auto; }
.topbar .brand__titles { display: inline-flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.topbar .brand__text { overflow: hidden; text-overflow: ellipsis; }
.topbar .brand__empresa { font-weight: 500; font-size: .95rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.topbar nav a {
    color: var(--on-primary);
    text-decoration: none;
    padding: .4rem .7rem;
    border-radius: var(--radius-sm);
    transition: background-color .15s ease;
}
.topbar nav a:hover { background: rgba(255, 255, 255, .16); }
.topbar nav a[aria-current="page"] { background: rgba(255, 255, 255, .24); font-weight: 600; }
.topbar .logout { display: inline-flex; align-items: center; gap: .6rem; margin: 0; }
.topbar .user { opacity: .9; font-size: .9rem; }

main { padding: 1.4rem 1.1rem; max-width: 1600px; margin: 0 auto; }

h1 { font-size: 1.45rem; margin: 0 0 .9rem; }
h2 { font-size: 1.12rem; margin: 1.8rem 0 .7rem; }

a { color: var(--primary-700); }

/* ---- Botones ---- */
button,
.btn {
    cursor: pointer;
    font: inherit;
    min-height: 40px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--fg);
    padding: .45rem .9rem;
    border-radius: var(--radius-sm);
    transition: background-color .15s ease, border-color .15s ease;
}
button:hover, .btn:hover { background: var(--muted); }
button.danger, .btn.danger {
    color: #fff; background: var(--danger); border-color: var(--danger);
}
button.danger:hover, .btn.danger:hover { background: #B91C1C; }
button:disabled { opacity: .5; cursor: not-allowed; }

.topbar .logout button {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    min-height: 36px;
}
.topbar .logout button:hover { background: rgba(255, 255, 255, .26); }

/* ---- Inputs ---- */
input, select {
    font: inherit;
    min-height: 40px;
    padding: .45rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--fg);
}
input::placeholder { color: #94A3B8; }

/* ---- Tablas de datos ---- */
table.grid {
    border-collapse: collapse;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
table.grid th, table.grid td {
    border-bottom: 1px solid var(--border-soft);
    padding: .55rem .75rem;
    text-align: left;
    vertical-align: middle;
}
table.grid thead th {
    background: var(--muted);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted-fg);
}
table.grid tbody tr:hover { background: #F8FAFF; }
table.grid tbody tr:last-child td { border-bottom: none; }
table.grid .center { text-align: center; }
table.grid .actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
table.grid .actions form { margin: 0; display: inline-flex; gap: .3rem; align-items: center; }
table.grid .actions input[type="password"] { min-width: 9rem; }
/* Formulario en línea directo en celda (sin .actions) */
.inline-form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; }
.inline-form input:not([type="hidden"]) { min-height: 2rem; padding: .2rem .5rem; min-width: 8rem; }

/* ============================================================
   Grid desplazable estilo "Estado / Recaudaciones": contenedor con
   scroll horizontal, cabecera fija y primera columna congelada.
   Solo afecta a las tablas envueltas en .table-scroll.
   ============================================================ */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
    /* Altura máxima para que la cabecera fija tenga efecto en tablas largas */
    max-height: calc(100dvh - 4rem);
}
/* El borde/redondeo los aporta el contenedor; la tabla va a ras */
.table-scroll table.grid { border: 0; border-radius: 0; overflow: visible; }
.table-scroll table.grid th,
.table-scroll table.grid td { white-space: nowrap; }

/* Cabecera fija al hacer scroll vertical, estilo oscuro como en Estado */
.table-scroll table.grid thead th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #172554;
    color: #fff;
    text-transform: none;
    letter-spacing: normal;
}

/* Fondo de fila vía variable, para que la columna fija herede el mismo color */
.table-scroll table.grid tbody tr { --row-bg: var(--surface); background: var(--row-bg); }
.table-scroll table.grid tbody tr:nth-child(even) { --row-bg: var(--muted); }
.table-scroll table.grid tbody tr:hover { --row-bg: #EEF2FF; background: var(--row-bg); }

/* Primera columna congelada al hacer scroll horizontal (siempre visible) */
.table-scroll table.grid th:first-child,
.table-scroll table.grid td:first-child { position: sticky; left: 0; }
.table-scroll table.grid tbody td:first-child {
    background: var(--row-bg);
    z-index: 5;
    box-shadow: 4px 0 6px -4px rgba(15, 23, 42, .15);
}
.table-scroll table.grid thead th:first-child {
    z-index: 12;   /* esquina superior izquierda, por encima del resto */
    box-shadow: 4px 0 6px -4px rgba(15, 23, 42, .25);
}

/* Segunda columna congelada (el left se calcula con JS tras renderizar) */
.table-scroll table.grid tbody td.col-sticky-2 {
    position: sticky; background: var(--row-bg); z-index: 5;
    box-shadow: 4px 0 6px -4px rgba(15, 23, 42, .15);
}
.table-scroll table.grid thead th.col-sticky-2 { position: sticky; z-index: 12; }

code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    background: var(--muted);
    padding: .1rem .35rem;
    border-radius: 4px;
    font-size: .9em;
}

/* ---- Insignia de estado (texto + color + forma, no solo color/emoji) ---- */
.badge {
    display: inline-flex; align-items: center; gap: .4em;
    font-size: .85rem; font-weight: 500;
    padding: .15rem .6rem; border-radius: 999px;
    white-space: nowrap;
}
.badge::before { content: ""; width: .6em; height: .6em; border-radius: 50%; flex: none; }
.badge--on  { background: var(--ok-bg); color: var(--ok); }
.badge--on::before  { background: var(--accent); }
.badge--off { background: var(--muted); color: var(--muted-fg); }
.badge--off::before { background: #94A3B8; }

/* ---- Texto solo para lectores de pantalla ---- */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Resumen de estado por sala (Mis salas) ---- */
/* Punto de conexión delante del nombre de la sala: verde = salón + Gran Bolsa OK,
   naranja = central llega al salón pero el salón no llega a Gran Bolsa, rojo = central no llega al salón. */
.estado-dot {
    display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
    margin-right: .5rem; flex: none; vertical-align: middle;
}
.estado-dot.is-on   { background: var(--accent); }
.estado-dot.is-warn { background: var(--warn); }
.estado-dot.is-off  { background: var(--danger); }

/* Celdas numéricas: alineadas a la derecha, cifras tabulares; negativos en rojo. */
table.grid .num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .negative { color: var(--danger); font-weight: 600; }

/* Barra de acciones sobre la tabla (selector de columnas a la derecha). */
.table-actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin-bottom: .6rem; }
.table-tools { display: flex; gap: .5rem; }
/* Título del panel de resumen: a la izquierda; el margen automático empuja el selector a la derecha. */
.resumen-titulo { margin-right: auto; font-weight: 600; color: var(--muted-fg); }
/* Separación entre el panel de resumen y la tabla por sala. */
.resumen-scroll { margin-bottom: 1.2rem; }

/* ---- Input de pin con botones de acción integrados ---- */
.pin-group {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--surface);
}
.pin-group:focus-within { outline: 2px solid var(--ring); outline-offset: 1px; }
.pin-group form { display: contents; }
.pin-group .pin-input {
    border: none; outline: none; background: transparent;
    padding: .2rem .4rem; width: 6rem; font-size: .875rem; min-height: 0; min-width: 0;
}
.pin-group select.pin-input { cursor: pointer; }
.pin-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 .35rem; border: none; border-left: 1px solid var(--border);
    cursor: pointer; min-height: 1.6rem; line-height: 1;
}
.pin-btn.del { background: var(--danger-bg); color: var(--danger); }
.pin-btn.del:hover:not(:disabled) { background: var(--danger); color: #fff; }
.pin-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---- Panel de incidencias de máquinas ---- */
.incidencias-header { margin-top: 2rem; }
.incidencias-ok { color: var(--ok); margin: 0; padding: .4rem 0; font-size: .95rem; }
.incidencia-ts { font-size: .8rem; color: var(--muted-fg); }
.incidencias-grid td:nth-child(3) { white-space: nowrap; }

/* Agrupación por sala: banda de grupo igual que en informes */
.incidencias-grid tbody .grupo-band td {
    background: var(--muted);
    font-weight: 600;
    border-top: 2px solid var(--primary);
    padding-left: 0;
}
.incidencias-grid tbody.salon-grupo:first-of-type .grupo-band td { border-top: none; }
.incidencias-grid tbody .grupo-band .grupo-band__label {
    position: sticky;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 0 .75rem;
}

/* Fila de total del panel "Resumen — todas las salas" (primera fila, en negrita). */
.mis-salas-total-grid tr.resumen-total-fila td { font-weight: 700; }

/* ---- Foco (maximizar) en "Mis salas" ---- */
[data-foco] .icon-min { display: none; }
body.mis-salas-foco-delegaciones [data-foco="delegaciones"] .icon-max,
body.mis-salas-foco-resumen      [data-foco="resumen"]      .icon-max,
body.mis-salas-foco-incidencias  [data-foco="incidencias"]  .icon-max { display: none; }
body.mis-salas-foco-delegaciones [data-foco="delegaciones"] .icon-min,
body.mis-salas-foco-resumen      [data-foco="resumen"]      .icon-min,
body.mis-salas-foco-incidencias  [data-foco="incidencias"]  .icon-min { display: inline; }
body.mis-salas-foco-delegaciones [data-foco="delegaciones"],
body.mis-salas-foco-resumen      [data-foco="resumen"],
body.mis-salas-foco-incidencias  [data-foco="incidencias"] {
    background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
/* Foco delegaciones (panel "todas las salas"): ocultar listado por sala, incidencias y título */
body.mis-salas-foco-delegaciones main > h1,
body.mis-salas-foco-delegaciones #mis-salas-acciones,
body.mis-salas-foco-delegaciones #mis-salas,
body.mis-salas-foco-delegaciones .incidencias-header,
body.mis-salas-foco-delegaciones #incidencias-panel { display: none; }
/* En foco delegaciones, su tabla llena el alto: se quita el margen inferior de separación. */
body.mis-salas-foco-delegaciones .resumen-scroll { margin-bottom: 0; }
/* Foco resumen (listado por sala): ocultar el bloque "todas las salas", incidencias y título */
body.mis-salas-foco-resumen main > h1,
body.mis-salas-foco-resumen #mis-salas-total-panel,
body.mis-salas-foco-resumen .incidencias-header,
body.mis-salas-foco-resumen #incidencias-panel { display: none; }
/* Foco incidencias: ocultar título y panel de resumen */
body.mis-salas-foco-incidencias main > h1,
body.mis-salas-foco-incidencias #mis-salas-resumen-panel { display: none; }
/* Maximizado: pegar la barra de herramientas arriba (sin hueco encima): se reduce el padding superior
   de la página y se quita el margen de separación que la cabecera de incidencias usa en modo normal. */
body.mis-salas-foco-delegaciones main,
body.mis-salas-foco-resumen main,
body.mis-salas-foco-incidencias main { padding-top: .4rem; }
body.mis-salas-foco-incidencias .incidencias-header { margin-top: 0; }
/* Pantallas de poca altura (móvil apaisado): en foco se oculta también la barra de menús
   para dejar sólo la tabla. El fitter recalcula el alto al girar (orientationchange). */
@media (max-height: 480px) {
    body.mis-salas-foco-delegaciones .topbar,
    body.mis-salas-foco-resumen .topbar,
    body.mis-salas-foco-incidencias .topbar { display: none; }
}
/* Táctil + maximizado: el alto de la tabla se fija con `lvh` (large viewport = altura con la barra del
   navegador colapsada, valor fijo y fiable en iOS), no por JS. El contenedor queda algo más alto que lo
   visible mientras la barra de Safari está puesta → el documento hace scroll y la barra se colapsa al
   bajar; ya colapsada, encaja justo y la cabecera fija (sticky) sigue visible (igual que salón). El
   `dvh` es respaldo para navegadores sin `lvh`. El restado deja sitio a la barra de herramientas. */
@media (pointer: coarse) and (max-height: 480px) {
    body.mis-salas-foco-delegaciones #mis-salas-total-panel .resumen-scroll,
    body.mis-salas-foco-resumen #mis-salas,
    body.mis-salas-foco-incidencias #incidencias-panel .table-scroll {
        max-height: calc(100dvh - 3.5rem);
        max-height: calc(100lvh - 3.5rem);
    }
}

.btn-secondary {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--surface); color: var(--primary-700);
    border: 1px solid var(--primary); border-radius: var(--radius-sm);
}
.btn-secondary:hover { background: var(--muted); }
.btn-icon { padding: .4rem; min-width: 40px; justify-content: center; }
.btn-icon svg { width: 1.2em; height: 1.2em; display: block; }

/* Selector de columnas (mismo comportamiento que en las vistas de salón). */
.col-picker { position: relative; }
.col-picker__panel {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 40;
    min-width: 14rem; max-height: 60vh; overflow-y: auto;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 8px 24px rgba(15, 23, 42, .18);
    padding: .4rem;
}
.col-picker__item {
    display: flex; align-items: center; gap: .5rem;
    min-height: 40px; padding: 0 .5rem; border-radius: var(--radius-sm);
    cursor: pointer;
}
.col-picker__item:hover { background: var(--muted); }
.col-picker__item input { width: 1.1rem; height: 1.1rem; flex: none; cursor: pointer; min-height: 0; }
.col-picker__item input:disabled { cursor: not-allowed; }
.col-picker__item input:disabled + span { color: var(--muted-fg); }

@media (max-width: 640px) {
    .col-picker__panel { max-width: calc(100vw - 1rem); }
}

/* ---- Avisos (banners) ---- */
.banner { padding: .7rem .9rem; border-radius: var(--radius-sm); margin: .9rem 0; border: 1px solid transparent; }
.banner.secret { background: var(--warn-bg); border-color: var(--warn-border); }
.banner.secret code { font-size: 1.05em; background: #fff; }
.secret-copy { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.secret-copy .copy-btn { min-height: 32px; padding: .25rem .7rem; }
.copy-btn--done { background: var(--ok-bg); border-color: #A7F3D0; color: #065F46; }
.banner.ok { background: var(--ok-bg); border-color: #A7F3D0; color: #065F46; }
.banner.error, .error { color: #991B1B; }
.banner.error { background: var(--danger-bg); border-color: #FECACA; }

.muted { color: var(--muted-fg); }

/* ---- Tarjeta (login / cambio de contraseña) ---- */
.card {
    max-width: 380px; margin: 3rem auto; padding: 1.6rem;
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.card h1 { text-align: center; }
.card.login label { display: block; margin: .7rem 0; font-weight: 500; }
.card.login input { display: block; width: 100%; margin-top: .25rem; }
.card.login button {
    width: 100%; margin-top: 1.1rem;
    background: var(--primary); color: var(--on-primary); border-color: var(--primary);
}
.card.login button:hover { background: var(--primary-700); }

/* ---- Formulario "nuevo" (alta) ---- */
.newform { display: flex; gap: 1rem; align-items: end; flex-wrap: wrap; background: var(--surface); padding: 1rem; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.newform label { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; font-size: .9rem; }
.newform button { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.newform button:hover { background: var(--primary-700); }

/* ---- "Mis salas": el alto de las tablas lo calcula mis-salas-fit.js (mismo mecanismo que
   "Estado de máquinas": se mide el top real y se reparte el alto visible, con mínimo de 5 filas).
   Aquí sólo se ajusta el espaciado del título para pegarlo a la barra de menús. ---- */
/* El respiro inferior lo da el propio fitter (MARGEN); sin padding-bottom para no desbordar. */
body:has(#mis-salas-resumen-panel) main { padding-top: .8rem; padding-bottom: 0; }
body:has(#mis-salas-resumen-panel) main > h1 { margin-bottom: .6rem; }

/* Barras de acción: en pantallas medianas el título salta a su propia línea
   y las herramientas quedan en la línea siguiente, alineadas a la derecha */
@media (max-width: 860px) {
    .table-actions { flex-wrap: wrap; }
    /* El título ("Resumen — todas las salas", "Incidencias de máquinas") se mantiene en la MISMA línea
       que la barra de herramientas (se encoge con elipsis si no cabe), en vez de saltar a su propia fila. */
    .resumen-titulo {
        flex: 0 1 auto; margin-right: auto; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
}

@media (max-width: 640px) {
    main { padding: .9rem .7rem; }
    h1   { font-size: 1.2rem; margin-bottom: .6rem; }
    .topbar nav { width: 100%; }
    .newform { flex-direction: column; align-items: stretch; }
    .newform label, .newform button { width: 100%; }
    table.grid .actions { flex-direction: column; align-items: stretch; }
    table.grid .actions input[type="password"] { min-width: 0; width: 100%; }
    .table-scroll table.grid th,
    .table-scroll table.grid td { padding: .38rem .5rem; font-size: .84rem; }
    .incidencias-header { margin-top: 1.2rem; }
    .resumen-scroll { margin-bottom: .8rem; }
}

/* ---- Movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ---- Menú de usuario (desplegable al pulsar el nombre) ---- */
.user-menu { position: relative; display: inline-block; }
/* Separador entre el menú y el usuario */
.navbar-menu .user-menu { margin-left: .5rem; padding-left: .75rem; border-left: 1px solid rgba(255, 255, 255, .25); }
.navbar--collapsed .navbar-menu .user-menu { margin-left: 0; padding-left: 0; border-left: none; margin-top: .35rem; padding-top: .5rem; border-top: 1px solid rgba(255, 255, 255, .2); }
.user-menu__toggle {
    display: inline-flex; align-items: center; gap: .35rem;
    background: transparent; border: 1px solid transparent; color: inherit;
    cursor: pointer; padding: .4rem .7rem; border-radius: 6px; font: inherit; min-height: 36px;
}
.user-menu__toggle:hover { background: rgba(255, 255, 255, .18); }
.user-menu__toggle svg { width: 1em; height: 1em; transition: transform .15s ease; }
.user-menu__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.user-menu__panel {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 13rem;
    background: #fff; color: #0f172a;
    border: 1px solid #e2e8f0; border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .18); padding: .35rem; z-index: 1000;
}
.user-menu__panel form { margin: 0; }
.user-menu__panel .user-menu__item {
    display: block; width: 100%; box-sizing: border-box; text-align: left;
    background: transparent; border: none; color: #0f172a; text-decoration: none;
    padding: .6rem .7rem; border-radius: 6px; font: inherit; cursor: pointer; min-height: 40px;
}
.user-menu__panel .user-menu__item:hover { background: #f1f5f9; }
@media (prefers-reduced-motion: reduce) { .user-menu__toggle svg { transition: none; } }
/* ---- Navbar colapsable (hamburguesa cuando no cabe en una línea), como en la web de sala ---- */
/* Anclada arriba al hacer scroll, igual que la .navbar de la web de sala.
   relative -> sticky; por encima del contenido y por debajo del menú de usuario fijo (z 1000). */
.topbar { flex-wrap: nowrap; position: sticky; top: 0; z-index: 100; }
/* Con poca altura (p. ej. móvil apaisado) no se ancla, para no robar espacio vertical */
@media (max-height: 480px) { .topbar { position: relative; } }
.topbar nav { flex-wrap: nowrap; }
@media (max-width: 640px) { .topbar nav { width: auto; } }
/* Marca recortable en colapsado para que no empuje el botón fuera (como en sala) */
.topbar.navbar--collapsed .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.navbar-toggle {
    display: none; align-items: center; justify-content: center; margin-left: auto;
    min-height: 40px; min-width: 40px;
    background: transparent; border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--radius-sm); color: var(--on-primary); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.navbar-toggle:hover { background: rgba(255, 255, 255, .16); }
/* Mientras el menú está desplegado, el botón se resalta para indicar el estado abierto. */
.navbar--open .navbar-toggle { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .7); }
.navbar-toggle svg { width: 1.4em; height: 1.4em; }
.topbar.navbar--collapsed .navbar-toggle { display: inline-flex; }
.topbar.navbar--collapsed .navbar-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: var(--primary); padding: .6rem 1.1rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .25); z-index: 200;
}
.topbar.navbar--collapsed.navbar--open .navbar-menu { display: flex; }

/* Fila de cabecera de grupo (delegación) en la tabla de "Mis salas". */
.mis-salas-grid tr.grupo-delegacion td {
    background: var(--muted);
    font-weight: 600;
    border-top: 1px solid var(--border);
}
/* Fila de subtotal por delegación: misma base que la cabecera pero en cursiva para distinguirla. */
.mis-salas-grid tr.grupo-delegacion-total td {
    background: var(--muted);
    font-weight: 600;
    font-style: italic;
    border-bottom: 2px solid var(--border);
}
/* Total general (toda la tabla): no cursiva y borde superior marcado. */
.mis-salas-grid tr.grupo-delegacion-total--all td {
    font-style: normal;
    border-top: 2px solid var(--border);
}

/* Colapsar/expandir delegaciones: botón con chevron en la cabecera de grupo. */
.grupo-toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; font-weight: 600; cursor: pointer;
}
.grupo-chevron { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .15s ease; }
.grupo-toggle[aria-expanded="false"] .grupo-chevron { transform: rotate(-90deg); }
.grupo-conectadas { font-weight: 500; color: var(--muted-fg); }
.mis-salas-grid tr.grupo-oculto { display: none; }

/* Cabecera "Incidencias de máquinas": punto de estado junto al título. */
.incidencias-titulo { display: inline-flex; align-items: center; gap: .5rem; }

/* Colapsar agrupaciones por sala dentro del panel de incidencias. La banda de salón es clicable. */
.incidencias-grid .grupo-band__toggle {
    display: inline-flex; align-items: center; gap: .4rem;
    background: none; border: 0; padding: 0; margin: 0;
    font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.incidencias-grid .grupo-band__toggle[aria-expanded="false"] .grupo-chevron { transform: rotate(-90deg); }
.incidencias-grid tbody.salon-colapsado tr:not(.grupo-band) { display: none; }

/* ---- Selección de salas por delegación (mismo estilo que el filtro de máquinas de informes) ---- */
/* Casilla maestra "Salas (x/y)": mismo tamaño que la de máquinas en informes. */
.maq-master { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.maq-master__input {
    width: 1.4rem; height: 1.4rem; flex-shrink: 0; margin: 0; cursor: pointer;
    position: relative; top: -1px;
}
.maq-selector__title { font-weight: 600; }
.maq-groups { display: flex; flex-wrap: wrap; gap: .6rem; margin: .6rem 0; }
.maq-group {
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    padding: 0;
    min-width: 14rem;
    flex: 1 1 14rem;
}
.maq-group__head {
    display: block;
    width: 100%;
    padding: .4rem .6rem;
    background: var(--muted);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 1px solid var(--border-soft);
    font-weight: 600;
}
.maq-group__headrow { display: flex; align-items: center; gap: .6rem; width: 100%; }
.maq-group__toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer; flex: 1; min-width: 0; }
.maq-group__name { flex: 1; min-width: 0; }
.maq-group__count {
    font-size: .75rem;
    font-weight: 600;
    padding: 0 .4rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .12);
    flex-shrink: 0;
}
.maq-group__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.maq-group__collapse:hover { background: rgba(0, 0, 0, .08); }
.maq-group__collapse svg { width: 1.15rem; height: 1.15rem; transition: transform .15s ease; }
.maq-group--collapsed .maq-group__collapse svg { transform: rotate(-90deg); }
.maq-group__collapse[aria-expanded="false"] svg { transform: rotate(-90deg); }
.maq-group--collapsed .maq-group__items { display: none; }
.maq-group__items { display: flex; flex-direction: column; gap: .25rem; padding: .4rem .6rem; }
.maq-item { display: flex; align-items: center; gap: .4rem; font-size: .875rem; cursor: pointer; }
.maq-item input { flex-shrink: 0; }

@media (max-width: 640px) {
    .maq-group { flex-basis: 100%; }
    .maq-group__headrow { gap: 1rem; }
    .maq-group__collapse { width: 44px; height: 44px; }
}