/* Estructura de la consola (rediseño del 13 oct 2026): menú lateral con iconos y secciones agrupadas,
   barra superior con la sección actual, y tarjetas con icono. Se carga la última: sustituye a la barra
   superior y las pestañas de estilos.css. Solo usa los tokens de color de la consola (--bg, --surface,
   --accent…), así que el branding de cada ayuntamiento sigue funcionando. */

:root { --ancho-menu: 264px; }

/* Tema claro: tokens-comunes.css solo trae los semánticos y las sombras del tema oscuro. */
:root[data-theme='light'] {
  --focus: #1d5fb8;
  --crit: #b4232f; --crit-soft: #fbe4e6;
  --warn: #8a5a00; --warn-soft: #fbf0d2;
  --ok: #17703e; --ok-soft: #dcf3e4;
  --info: #1d62a8; --info-soft: #dcebf9;
  --shadow-sm: 0 1px 2px rgba(16, 29, 43, 0.08);
  --shadow-md: 0 10px 24px -12px rgba(16, 29, 43, 0.22), 0 2px 6px -2px rgba(16, 29, 43, 0.1);
  --shadow-lg: 0 24px 48px -16px rgba(16, 29, 43, 0.3);
}

.ico {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ============ ESTRUCTURA ============ */

#app-shell {
  display: grid;
  grid-template-columns: var(--ancho-menu) minmax(0, 1fr);
  min-height: 100vh;
}

.area-principal { min-width: 0; display: flex; flex-direction: column; }

/* ============ MENÚ LATERAL ============ */

.menu-lateral {
  position: sticky; top: 0; align-self: start;
  height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.1rem 0.85rem 0.9rem;
  background: var(--surface);
  border-right: 1px solid var(--line-soft);
}
.menu-lateral > * { flex: none; }
/* Solo la lista de secciones se desplaza: la marca y la persona con sesión (Salir) quedan siempre a la vista. */
.menu-lateral > .navegacion { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.menu-lateral .marca { display: flex; align-items: center; gap: 0.7rem; padding: 0.2rem 0.4rem 0; }
.menu-lateral .marca .icono {
  width: 60px; height: 60px; border-radius: 12px; flex: none; overflow: hidden;
  background: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px var(--line);
}
/* El logo entero y cuadrado (branding v2; también el del ayuntamiento, de cualquier proporción), sobre una placa clara. */
.menu-lateral .marca .icono img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.menu-lateral .marca > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.menu-lateral .marca b {
  font-size: 1rem; font-weight: 800; letter-spacing: -0.01em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* El perfil se muestra en la tarjeta de usuario (shell.js lo copia); aquí solo sirve de origen. */
.menu-lateral .marca #cabecera-perfil { display: none; }

/* Espacio (contrato u OTEA): solo si la persona tiene más de uno. */
.menu-lateral .selector-espacio {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--surface-alt);
}
.menu-lateral .selector-espacio > span {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim);
}
.menu-lateral .selector-espacio select {
  max-width: none; min-height: 32px; padding: 0.2rem 0.3rem;
  background: transparent; border: 0; font-weight: 700; font-size: 0.9rem; cursor: pointer;
  text-overflow: ellipsis;
}
.menu-lateral .selector-espacio select:hover { border: 0; }

.navegacion { display: flex; flex-direction: column; gap: 1.1rem; }
.grupo-nav { display: flex; flex-direction: column; gap: 0.15rem; }
.titulo-grupo-nav {
  padding: 0 0.75rem 0.3rem;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim);
}

.grupo-nav button, .boton-lateral {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.55rem 0.75rem; min-height: 40px;
  background: none; border: 0; border-radius: 10px;
  color: var(--ink-dim); font-size: 0.92rem; font-weight: 600; text-align: left;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.grupo-nav button > span:not(.contador-nav), .boton-lateral > span { min-width: 0; line-height: 1.25; }
.grupo-nav button:hover, .boton-lateral:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.grupo-nav button[aria-selected='true'] {
  color: var(--nav-active);
  background: color-mix(in srgb, var(--nav-active) 15%, transparent);
  font-weight: 700;
}
.grupo-nav button:focus-visible, .boton-lateral:focus-visible { outline-offset: -2px; }

.contador-nav {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 0.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--crit-soft); color: var(--crit);
  font-size: 0.74rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* Persona con sesión y acciones de cuenta, al pie. */
.usuario-lateral { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.8rem; border-top: 1px solid var(--line-soft); }
.tarjeta-usuario { display: flex; align-items: center; gap: 0.65rem; padding: 0.2rem 0.4rem; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--accent) 22%, var(--surface)); color: var(--accent-ink);
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.02em;
}
.datos-usuario { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.datos-usuario b { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datos-usuario small { font-size: 0.74rem; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acciones-usuario { display: flex; flex-direction: column; gap: 0.1rem; }
.boton-lateral { min-height: 36px; font-size: 0.84rem; padding: 0.4rem 0.75rem; }
.boton-lateral .ico { width: 18px; height: 18px; }
#boton-salir:hover { color: var(--crit); background: var(--crit-soft); }

/* ============ BARRA SUPERIOR ============ */

header.barra {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1.6rem; min-height: 60px;
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.migas-barra { display: flex; align-items: center; gap: 0.55rem; min-width: 0; font-size: 0.92rem; color: var(--ink-dim); }
.migas-barra b { color: var(--ink); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.migas-barra .separador { color: var(--line); }
.migas-barra #miga-espacio { white-space: nowrap; }
header.barra .estado-conexion { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

.boton-icono {
  width: 40px; height: 40px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink-dim); cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}
.boton-icono:hover { color: var(--ink); border-color: var(--ink-dim); background: var(--surface-alt); }
.boton-abrir-menu { display: none; }

main.contenido { max-width: 1320px; padding: 1.8rem 1.8rem 3rem; }
.aviso-terminales { width: min(100% - 3.6rem, 1320px); }

.velo-menu { display: none; }

/* ============ CABECERA DE VISTA ============ */

.encabezado-vista h2 { font-size: 1.75rem; letter-spacing: -0.03em; }
.encabezado-vista p { max-width: 62ch; }

/* ============ TARJETAS DE CIFRA, con icono ============ */

.metrica { padding: 1.15rem 1.2rem 1.05rem; gap: 0.35rem; }
.metrica::before { display: none; }
.metrica:hover { transform: none; box-shadow: var(--shadow-sm); }
.metrica .etiqueta { text-transform: none; letter-spacing: 0; font-size: 0.84rem; font-weight: 600; padding-right: 3rem; }
.metrica .valor { font-size: 2.3rem; line-height: 1.1; }
.metrica-detalle { font-size: 0.8rem; color: var(--ink-dim); }

.metrica.con-icono { --tono: var(--accent); }
.metrica[data-tono='crit'] { --tono: var(--crit); }
.metrica[data-tono='warn'] { --tono: var(--warn); }
.metrica[data-tono='ok'] { --tono: var(--ok); }
.metrica[data-tono='info'] { --tono: var(--info); }
.metrica-icono {
  position: absolute; top: 1rem; right: 1rem;
  width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--tono); background: color-mix(in srgb, var(--tono) 15%, transparent);
}
.metrica[data-tono='crit'] .valor { color: var(--crit); }

/* ============ AVISO DE ALERTAS SIN ATENDER ============ */

.banner-alerta {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--crit) 55%, var(--line)); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--crit) 12%, var(--surface));
}
.banner-icono {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--crit); background: color-mix(in srgb, var(--crit) 18%, transparent);
}
.banner-texto { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 0.1rem; }
.banner-texto strong { color: var(--crit); font-size: 1rem; }
.banner-texto span { font-size: 0.86rem; color: var(--ink-dim); }
.banner-alerta .boton { flex: none; border-color: var(--crit); color: var(--crit); }
.banner-alerta .boton:hover:not(:disabled) { background: var(--crit-soft); border-color: var(--crit); }

/* ============ TARJETA CON CABECERA (tablas con filtros) ============ */

.cabecera-tarjeta {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; flex-wrap: wrap;
  padding: 1rem 1.3rem; border-bottom: 1px solid var(--line-soft);
}
.cabecera-tarjeta h3 { font-size: 1.05rem; }
.filtros-tarjeta { display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap; }
.campo-en-linea { flex-direction: row; align-items: center; gap: 0.5rem; }
.campo-en-linea label { white-space: nowrap; }
.campo-en-linea input { width: 11.5rem; min-height: 34px; padding: 0.3rem 0.6rem; font-size: 0.85rem; }

/* ============ TABLAS ============ */

/* El texto oculto para lectores de pantalla (.solo-lector, posición absoluta) no debe ensanchar la página. */
.tabla-scroll { position: relative; }
thead th { background: transparent; border-bottom: 1px solid var(--line-soft); letter-spacing: 0.06em; font-size: 0.7rem; padding-block: 0.7rem; }
.celda-persona { display: inline-flex; align-items: center; gap: 0.7rem; font-weight: 600; }
.avatar-pequeno { width: 32px; height: 32px; font-size: 0.72rem; background: color-mix(in srgb, var(--ink) 10%, var(--surface)); color: var(--ink); }
td .chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.celda-accion { text-align: right; white-space: nowrap; }
.enlace-fila { font-size: 0.85rem; font-weight: 700; color: var(--accent); }
tbody tr:hover .enlace-fila { text-decoration: underline; }
tbody tr.fila-sin-atender td:first-child { box-shadow: inset 4px 0 0 var(--crit); }

/* ============ PANTALLAS ESTRECHAS: el menú pasa a ser un cajón ============ */

@media (max-width: 960px) {
  #app-shell { grid-template-columns: minmax(0, 1fr); }
  .menu-lateral {
    position: fixed; z-index: 60; inset: 0 auto 0 0; width: min(var(--ancho-menu), 86vw);
    transform: translateX(-102%); transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: var(--shadow-lg);
  }
  .menu-lateral.abierto { transform: none; }
  .velo-menu.visible { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.55); }
  .boton-abrir-menu { display: inline-flex; }
  header.barra { padding: 0 1rem; }
  main.contenido { padding: 1.2rem 1rem 2.5rem; }
  .aviso-terminales { width: min(100% - 2rem, 1320px); }
  .migas-barra #miga-espacio, .migas-barra .separador { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-lateral { transition: none; }
}