/* Estilos del espacio OTEA de la consola unificada (F3, 7 oct 2026): los de la consola de
   Administración, solo dentro de #espacio-otea (@scope), para no cambiar el espacio de contrato. Sin sus
   colores de marca (dorado): la consola unificada usa los de la Municipal. Generado en F3 a
   partir de los estilos de la consola de Administración (ya retirada); desde F4 se edita a mano. */
@keyframes entrar-toast {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes parpadeo-marcador {
  0%, 100% { opacity: 0.95; r: 11; }
  50% { opacity: 0.2; r: 19; }
}

@keyframes aparecer-velo {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes deslizar-panel {
  from { transform: translateX(24px); opacity: 0.6; }
  to { transform: translateX(0); opacity: 1; }
}

@scope (#espacio-otea) {
/* Tokens ESTRUCTURALES (espaciado, radios, sombras, tipografía, semánticos)
   viven en tokens-comunes.css, compartido con apps/consola-municipal y
   apps/web-familiar — ver ese archivo para la fuente de verdad y el motivo
   de "oscuro por defecto". Aquí solo quedan los tokens de MARCA de esta
   consola: dorado/ámbar, para distinguirla de un vistazo de la Consola
   Municipal (azul) y de la Web Familiar (teal). Esta consola es una
   herramienta de escritorio para el personal interno de OTEA (cruza todos
   los contratos), no mobile-first como la Web Familiar. */



/* Preparado para un futuro selector manual de tema — sin botón todavía,
   así que hoy nunca se activa por sí solo (no depende de
   prefers-color-scheme: light). */

/* ============ LOGIN ============ */

#pantalla-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}

.tarjeta-login {
  width: 100%; max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex; flex-direction: column; gap: 1.2rem;
  box-shadow: var(--shadow-lg);
}

.marca { display: flex; align-items: center; gap: 0.6rem; }
.marca .icono {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--primary); color: var(--surface);
  display: flex; align-items: center; justify-content: center; flex: none;
  overflow: hidden;
}
.marca .icono svg { width: 19px; height: 19px; }
.marca .icono img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.marca b { display: block; font-weight: 800; letter-spacing: -0.01em; font-size: 1.05rem; }
.marca span { display: block; font-size: 0.78rem; color: var(--ink-dim); }

.campo { display: flex; flex-direction: column; gap: 0.35rem; }
.campo label { font-size: 0.82rem; font-weight: 600; color: var(--ink-dim); }
.campo small { font-size: 0.76rem; color: var(--ink-dim); }

input[type='text'], input[type='password'], input[type='email'], input[type='tel'], input[type='time'], select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  min-height: 42px;
  width: 100%;
  transition: border-color 150ms ease;
}
input:hover, select:hover, textarea:hover { border-color: var(--ink-dim); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-weight: 600; font-size: 0.92rem;
  padding: 0.65rem 1.2rem; min-height: 42px;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.boton:disabled { opacity: 0.55; cursor: not-allowed; }
.boton:active:not(:disabled) { transform: scale(0.97); }
.boton.primario { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.boton.primario:hover:not(:disabled) { background: var(--accent-ink); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.boton.secundario { background: transparent; border-color: var(--line); color: var(--ink); }
.boton.secundario:hover:not(:disabled) { border-color: var(--ink-dim); background: var(--surface-alt); }
.boton.peligro { background: transparent; border-color: var(--crit); color: var(--crit); }
.boton.peligro:hover:not(:disabled) { background: var(--crit-soft); }
.boton.pequeno { padding: 0.4rem 0.8rem; min-height: 34px; font-size: 0.85rem; }

.error-login { font-size: 0.85rem; color: var(--crit); min-height: 1.2em; }

/* ============ SHELL ============ */

#app-shell { min-height: 100vh; display: flex; flex-direction: column; }

header.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.8rem 1.4rem;
  border-bottom: 1px solid var(--line-soft);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  position: sticky; top: 0; z-index: 20;
}
.barra .marca { display: flex; align-items: center; gap: 0.55rem; }
.barra .marca .icono { width: 30px; height: 30px; border-radius: 7px; background: var(--primary); color: var(--surface); display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.barra .marca .icono svg { width: 16px; height: 16px; }
.barra .marca .icono img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.barra .marca b { font-weight: 800; letter-spacing: -0.01em; font-size: 0.95rem; }
.barra .marca span { font-size: 0.74rem; color: var(--ink-dim); }
.barra .estado-conexion { display: flex; align-items: center; gap: 0.8rem; font-size: 0.84rem; color: var(--ink-dim); }

nav.pestañas { display: flex; gap: 0.2rem; padding: 0.5rem 1.1rem; border-bottom: 1px solid var(--line-soft); overflow-x: auto; }
nav.pestañas button {
  background: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
  padding: 0.6rem 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-dim);
  white-space: nowrap; min-height: 40px; position: relative;
  transition: color 150ms ease, background-color 150ms ease;
}
nav.pestañas button:hover { color: var(--ink); background: var(--surface-alt); }
/* Estado activo — no depende solo de una línea inferior (Fase 4 del brief
   de modernización): color de marca + fondo diferenciado + indicador. */
nav.pestañas button[aria-selected='true'] {
  color: var(--brand-hover); background: var(--brand-muted); font-weight: 700;
}
nav.pestañas button[aria-selected='true']::after {
  content: ''; position: absolute; left: 0.6rem; right: 0.6rem; bottom: -0.5rem;
  height: 2px; border-radius: 999px; background: var(--nav-active);
}

.aviso-terminales {
  width: min(100% - 2rem, 1148px); margin: 1rem auto 0; padding: 0.85rem 1rem;
  border: 1px solid var(--warn); border-left-width: 5px; border-radius: var(--radius-md);
  background: var(--warn-soft); color: var(--ink); box-shadow: var(--shadow-sm);
}
.aviso-terminales.crit { border-color: var(--crit); background: var(--crit-soft); }
.aviso-terminales strong { display: block; margin-bottom: 0.2rem; }
.aviso-terminales p { margin: 0; font-size: 0.88rem; }
.aviso-terminales details { margin-top: 0.55rem; font-size: 0.84rem; }
.aviso-terminales summary { cursor: pointer; font-weight: 700; }
.aviso-terminales ul { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.25rem; }

main.contenido { flex: 1; padding: 1.6rem; max-width: 1180px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1.4rem; }
main.contenido > section { display: flex; flex-direction: column; gap: 1.4rem; }

.encabezado-vista { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.encabezado-vista h2 { font-size: 1.4rem; }
.encabezado-vista p { color: var(--ink-dim); font-size: 0.92rem; margin-top: 0.3rem; }

.migas { display: flex; align-items: center; gap: 0.4rem; font-size: var(--text-caption); color: var(--ink-dim); flex-wrap: wrap; }
.migas button { background: none; border: none; padding: 0; cursor: pointer; color: var(--ink-dim); font-weight: 600; font: inherit; }
.migas button:hover { color: var(--brand-hover); text-decoration: underline; }
.migas span.separador { color: var(--line); }

/* ============ PAGE HEADER (Fase 4 del brief de modernización) ============ */
.cabecera-pagina { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.cabecera-pagina-texto { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cabecera-pagina-titulo { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cabecera-pagina-titulo h2 { font-size: var(--text-page-title); }
.cabecera-pagina-subtitulo { margin: 0; font-size: var(--text-small); color: var(--ink-dim); }
.cabecera-pagina-acciones { display: flex; gap: 0.5rem; flex-wrap: wrap; flex: none; }

.titulo-seccion-tarjeta { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-dim); margin: 0 0 0.9rem; }

/* Jerarquía label/valor más clara (Fase 5): etiqueta pequeña en mayúsculas,
   valor con más peso — mismo tratamiento que .metrica .etiqueta/.valor. */
.lista-datos dt { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink-dim); font-weight: 600; }
.lista-datos dd { font-size: var(--text-body); }

@media (max-width: 560px) {
  .lista-datos { grid-template-columns: 1fr; }
  .lista-datos dd { margin-bottom: 0.4rem; }
  .cabecera-pagina-acciones { width: 100%; }
  .cabecera-pagina-acciones .boton { flex: 1; }
}

/* ============ TOAST ============ */

#toast { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; }
.toast-item {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem; font-size: 0.88rem; max-width: 22rem;
  box-shadow: var(--shadow-md);
  animation: entrar-toast 200ms ease;
}
.toast-item.ok { border-left-color: var(--ok); color: var(--ok); }
.toast-item.error { border-left-color: var(--crit); color: var(--crit); }



/* ============ CARDS / TABLES ============ */

.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.3rem; box-shadow: var(--shadow-sm); overflow: hidden; }
.grupo-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }

.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.2rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.crit { background: var(--crit-soft); color: var(--crit); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }

/* DataTable compartida (Fase 5 del brief de modernización) — cabecera con
   fondo propio para distinguirla de un vistazo, filas sin borde pesado
   (solo un separador suave, y ninguno en la última fila para no duplicar
   el borde inferior de la propia tarjeta que la contiene). */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.85rem 1rem; font-size: var(--text-body); vertical-align: middle; }
thead th {
  font-size: var(--text-caption); text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--ink-dim); font-weight: 700;
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
}
tbody td { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clicable { cursor: pointer; transition: background-color 150ms ease; }
tbody tr.clicable:hover { background: var(--surface-alt); }
tbody tr.clicable:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tabla-scroll { overflow-x: auto; }

.fila-vacia { padding: 2.4rem 1rem; text-align: center; color: var(--ink-dim); font-size: var(--text-body); }

/* ============ IMPORTACIONES MASIVAS ============ */
.importaciones-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.importaciones-pasos > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.45rem 0.65rem; }
.importaciones-pasos p { grid-column: 2; margin: 0; color: var(--ink-dim); font-size: var(--text-small); line-height: 1.45; }
.importaciones-controles { align-items: end; }
.importaciones-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; flex-wrap: wrap; }
.ayuda-importaciones { margin: 1rem 0 0; color: var(--ink-dim); font-size: var(--text-small); line-height: 1.55; }
.ayuda-importaciones code, #cuerpo-tabla-importaciones code { font-size: 0.8rem; }
.activacion-importacion { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.35rem; }
.activacion-importacion a { color: var(--brand-hover); font-weight: 700; }
.activacion-importacion small { color: var(--warn); }

@media (max-width: 760px) {
  .importaciones-pasos { grid-template-columns: 1fr; }
  .importaciones-acciones { justify-content: flex-start; }
}

/* ============ ESTADÍSTICAS ============ */
/* Tarjetas de métrica y gráficas (rejilla-metricas/.metrica/.dona-envoltorio/
   .grafica-barras-tiempo/.tarjeta-gauge/.sin-datos) viven en
   tokens-comunes.css desde el 26 sep 2026 — compartidas con
   apps/consola-municipal, unificadas al mejorar su estética. */

/* ============ MAPA DE ALERTAS (Monitoreo) ============ */

.mapa-monitoreo { padding: 1rem 1.1rem 1.1rem; margin-bottom: 1rem; }
.encabezado-mapa-monitoreo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.encabezado-mapa-monitoreo h4 { font-size: 0.92rem; font-weight: 700; }
.leyenda-mapa-monitoreo { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--ink-dim); }
.leyenda-mapa-monitoreo span { display: inline-flex; align-items: center; gap: 0.35rem; }
.punto-leyenda { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
/* Rojo intenso de las alertas sin atender (8 oct 2026): `--rojo-alerta`, definido en estilos.css. */
.punto-leyenda.activa { background: var(--rojo-alerta, var(--crit)); box-shadow: 0 0 0 2px rgba(255, 26, 26, 0.35); }
.punto-leyenda.cerrada { background: var(--ok); }

#mapa-monitoreo { width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--surface-alt); }
#mapa-monitoreo svg { display: block; width: 100%; height: auto; cursor: grab; touch-action: none; user-select: none; }
#mapa-monitoreo.arrastrando svg { cursor: grabbing; }

.marcador-mapa { cursor: pointer; }
.marcador-mapa:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.marcador-mapa .anillo-marcador { fill: none; stroke-width: 3.5; opacity: 0.9; }
/* Número de alertas en el mismo sitio (8 oct 2026). */
.contador-marcador circle { fill: var(--surface-raised); stroke: var(--ink); stroke-width: 1.5; }
.contador-marcador text { fill: var(--ink); font-size: 10px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.marcador-mapa.activa .anillo-marcador {
  animation: parpadeo-marcador 1.2s ease-in-out infinite;
}
.aviso-sonido { margin-bottom: 1rem; }
#monitoreo-sonido[aria-pressed='true'] { border-color: var(--ok); color: var(--ok); }



/* ============ PANEL LATERAL ============ */

.velo { position: fixed; inset: 0; background: rgba(20, 18, 10, 0.45); backdrop-filter: blur(2px); display: flex; justify-content: flex-end; z-index: 60; animation: aparecer-velo 180ms ease; }
.panel-lateral { background: var(--bg); width: min(560px, 100%); height: 100%; overflow-y: auto; border-left: 1px solid var(--line); padding: 1.6rem; display: flex; flex-direction: column; gap: 1.3rem; box-shadow: var(--shadow-lg); animation: deslizar-panel 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.panel-lateral .cabecera-panel { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.panel-lateral h3 { font-size: 1.15rem; }
.cerrar-panel { background: none; border: 1px solid var(--line); border-radius: 8px; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; transition: background-color 150ms ease; }
.cerrar-panel:hover { background: var(--surface-alt); }




.cerrar-panel svg { width: 16px; height: 16px; }

.seccion-panel { display: flex; flex-direction: column; gap: 0.8rem; }
.seccion-panel h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-dim); font-weight: 700; }

/* Funcionalidades adicionales (23 sep 2026) — mismo criterio que
   apps/consola-municipal: se distingue del resto de secciones de
   parámetros, son módulos que pueden facturarse por separado. */
.seccion-addons {
  border: 1px solid var(--info-soft);
  border-left: 3px solid var(--info);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  background: var(--surface);
}
.seccion-addons h4 { color: var(--info); }

.check-linea { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; }
/* flex: 0 0 18px además de width/height (no solo width/height): sin esto, un
   checkbox junto a una etiqueta de dos líneas (p. ej. "Funcionalidades
   adicionales") se estira dentro del flex y aparece más grande que el resto. */
.check-linea input { width: 18px; height: 18px; flex: 0 0 18px; align-self: center; }

.dias-semana { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.check-dia {
  display: flex; align-items: center; gap: 0.25rem;
  font-size: 0.76rem; font-weight: 600; color: var(--ink-dim);
  border: 1px solid var(--line-soft); border-radius: 6px;
  padding: 0.2rem 0.45rem; cursor: pointer;
}
.check-dia input { width: 14px; height: 14px; }
.check-dia.marcado { background: var(--primary-soft); color: var(--primary-ink); border-color: var(--primary); }

.linea-acciones { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.fila-cadena {
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 0.6rem 0.8rem;
}
.fila-cadena:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 1px;
}
.fila-cadena .orden { font-weight: 700; color: var(--primary-ink); width: 1.4rem; text-align: center; flex: none; }
.fila-cadena .info { flex: 1; min-width: 0; }
.fila-cadena .info .nombre { font-weight: 600; font-size: 0.9rem; }
.fila-cadena .info .meta { font-size: 0.76rem; color: var(--ink-dim); }
.fila-cadena .info .correo { display: block; font-size: 0.76rem; color: var(--ink-dim); }
.fila-cadena .acciones { display: flex; gap: 0.3rem; flex: none; }
.fila-cadena .acciones button { background: none; border: none; cursor: pointer; width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); }
.fila-cadena .acciones button:hover { background: var(--surface-alt); color: var(--ink); }
.fila-cadena .acciones button svg { width: 15px; height: 15px; }

.id-usuario {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--surface-alt); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 0.5rem 0.7rem; font-size: 0.8rem; color: var(--ink-dim);
}
.id-usuario code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  color: var(--ink); font-size: 0.78rem;
}

input[type='number'] {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  min-height: 42px;
  width: 100%;
  transition: border-color 150ms ease;
}
.fila-cadena input[type='time'], .fila-cadena select { width: auto; min-height: 38px; }

.lista-datos { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; margin: 0; font-size: 0.88rem; }
.lista-datos dt { color: var(--ink-dim); }
.lista-datos dd { margin: 0; font-weight: 600; }

.fila-evento {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.fila-evento .fila-evento-principal { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.fila-evento .tipo-evento { font-weight: 700; font-size: 0.92rem; }
.fila-evento .transcurrido { font-size: 0.78rem; color: var(--ink-dim); background: var(--surface-alt); border-radius: 999px; padding: 0.15rem 0.55rem; white-space: nowrap; }
.fila-evento .fecha-evento { font-size: 0.8rem; color: var(--ink-dim); }

@media (max-width: 640px) {
  .encabezado-vista { flex-direction: column; align-items: flex-start; }
  nav.pestañas { padding: 0 0.8rem; }
  main.contenido { padding: 1rem; }
}

/* ============ MANTENIMIENTOS MASIVOS (1 oct 2026) ============ */
.solo-lector {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.columna-seleccion { width: 2.75rem; text-align: center; }
.seleccion-mantenimiento { width: 1.1rem; height: 1.1rem; cursor: pointer; }
.barra-mantenimiento {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  padding: 0.75rem 1rem; background: var(--surface-alt); border-bottom: 1px solid var(--line-soft);
}
.barra-mantenimiento label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.barra-mantenimiento-acciones { display: flex; gap: 0.5rem; margin-left: auto; flex-wrap: wrap; }
.resultado-mantenimiento { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line-soft); background: var(--surface); }
.resultado-mantenimiento-cabecera { display: flex; justify-content: space-between; gap: 1rem; }
.resultado-mantenimiento progress { width: 100%; height: 0.6rem; margin-top: 0.55rem; accent-color: var(--primary); }
.resultado-mantenimiento p { margin: 0.45rem 0; color: var(--ink-dim); }
.resultado-mantenimiento ul { list-style: none; margin: 0.5rem 0; padding: 0; max-height: 15rem; overflow: auto; }
.resultado-mantenimiento li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 0.65rem; padding: 0.45rem 0; border-top: 1px solid var(--line-soft); }
.resultado-mantenimiento li small { grid-column: 1 / -1; color: var(--ink-dim); }

@media (max-width: 640px) {
  .barra-mantenimiento { align-items: stretch; }
  .barra-mantenimiento-acciones { width: 100%; margin-left: 0; }
  .barra-mantenimiento-acciones .boton { flex: 1; }
}

/* Logo por color según la app (25 ago 2026, pedido explícito de Santi, ver
   branding OTEA adjunto): esta consola es la del propio personal de OTEA, sin
   ninguna app Android equivalente a la que igualar — se deja el teal de marca
   sin filtrar (el color "por defecto"), mismo criterio de filtro CSS que
   apps/consola-municipal/apps/web-familiar para el resto de apps/consolas.
*/
img[src="logo-otea.jpeg"] { filter: none; }

/* ===== Salud del sistema (27 sep 2026) ===== */
.titulo-bloque-salud { margin: 1.6rem 0 0.6rem; font-size: var(--text-md, 1rem); color: var(--ink-muted, var(--ink)); }
.semaforo-salud { margin-bottom: 1rem; }
.semaforo {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.9rem 1.1rem; border-radius: var(--radius-lg, 12px);
  background: var(--surface); border: 1px solid var(--line-soft);
}
.semaforo .luz { flex: none; width: 14px; height: 14px; margin-top: 0.2rem; border-radius: 50%; }
.semaforo.ok .luz { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.semaforo.warn .luz { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }
.semaforo.crit .luz { background: var(--crit); box-shadow: 0 0 0 4px var(--crit-soft); }
.semaforo.crit { border-color: var(--crit); }
.semaforo p { margin: 0.25rem 0 0; color: var(--ink-muted, var(--ink)); font-size: 0.9em; }
.semaforo ul { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }

/* Detalle de errores 4xx/5xx (6 oct 2026): tarjeta desplegable bajo los indicadores de la API. */
/* <details> no admite bien display:flex en todos los navegadores: bloque con márgenes. */
.desplegable-errores { display: block; margin-top: 1rem; }
.desplegable-errores > * + * { margin-top: 0.8rem; }
.desplegable-errores > summary { cursor: pointer; list-style: none; }
.desplegable-errores > summary::-webkit-details-marker { display: none; }
.desplegable-errores > summary h4::before { content: '▸ '; display: inline-block; width: 1.1em; }
.desplegable-errores[open] > summary h4::before { content: '▾ '; }
.desplegable-errores > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }
/* Nombre de función Lambda: se parte si es muy largo, para no empujar fuera de la vista las columnas de
   invocaciones y errores (7 oct 2026). */
.nombre-funcion { overflow-wrap: anywhere; }
.subtitulo-errores { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ink-dim); }
.ruta-error { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; word-break: break-all; min-width: 14rem; }
.detalle-alarma-lambda { display: flex; flex-direction: column; gap: 0.4rem; }
.historial-alarma-lambda { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; }
.error-lambda > summary { cursor: pointer; }
.error-lambda > * + * { margin-top: 0.5rem; }
.pila-error-lambda { font-size: 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-alt); padding: 0.6rem; border-radius: 6px; }
.mensaje-error { min-width: 14rem; max-width: 32rem; }

/* Distribución de APK (3 oct 2026): notas legibles con sus saltos de línea y
   lista de terminales en una fila propia a todo el ancho, para que abrirla no
   empuje la columna de notas fuera de la vista. */
.notas-apk { white-space: pre-line; min-width: 16rem; max-width: 28rem; }
.fila-detalle-apk > td { background: var(--surface-alt); padding: 0.75rem 1rem 1rem; }

}