/* Paleta, tipografía y componentes tomados de docs/prototipo (ver su README.md). */
:root {
  --bg: #F7F7F8;
  --surface: #FFFFFF;
  --surface-alt: #F7F7F8;
  --border: #E4E4E6;
  --fg: #19181A;
  --muted: #6B6A6D;
  --accent: #C8102E;
  --accent-fg: #FFFFFF;
  --accent-soft: #FBE2E5;
  --warn: #8A6200;
  --warn-soft: #FBF0D6;
  --ok: #1E7F4F;
  --ok-soft: #E1F3E8;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
/* El atributo hidden debe ganarle a cualquier display (ej. .field { display: flex }). */
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
h1, h2 { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; margin: 0; text-wrap: balance; }
a { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; }
.mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* Navegación superior */
.topnav { display: flex; align-items: center; gap: 4px; padding: 14px 20px; border-bottom: 2px solid var(--accent); background: var(--surface); flex-wrap: wrap; }
.topnav .brand { display: inline-flex; align-items: center; gap: 8px; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); margin-right: 16px; white-space: nowrap; }
.topnav .brand img { width: 20px; height: 22px; object-fit: contain; }
.topnav a { text-decoration: none; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 14px; border-radius: 6px; }
.topnav a:hover { color: var(--accent); background: var(--accent-soft); }
.topnav a.active { color: var(--accent-fg); background: var(--accent); }
.topnav .sesion { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
.topnav .sesion form { margin: 0; }
/* En pantallas anchas el contenedor del menú no existe para el diseño: los enlaces siguen en la barra como siempre. */
.menu-enlaces { display: contents; }
.menu-boton { display: none; }

.pagina { max-width: 1040px; margin: 0 auto; padding: 32px 20px 40px; display: flex; flex-direction: column; gap: 20px; }
.contexto { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* Formularios */
label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; display: block; margin-bottom: 6px; }
input, select { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; padding: 11px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); width: 100%; }
input[type=checkbox], input[type=radio] { width: auto; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field { display: flex; flex-direction: column; min-width: 0; }
.field-validation-error, .validation-summary-errors { color: var(--accent); font-size: 12px; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.fila-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.fila-form .field { flex: 1 1 200px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--fg); margin: 0; }

button, .boton { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 13px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); padding: 10px 16px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button:hover, .boton:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn-proceso { color: var(--accent); border-color: var(--accent); }
.btn-primary:hover { opacity: .92; color: var(--accent-fg); }
.btn-link { background: none; border: none; padding: 0; color: var(--muted); font-size: 12px; }

/* Tarjetas, pestañas y tablas */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); font-weight: 600; }
.card-nota { padding: 12px 20px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { font-weight: 600; font-size: 14px; padding: 12px 18px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { text-decoration: none; color: var(--accent); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--surface-alt); }
td { padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td.acciones { text-align: right; white-space: nowrap; }
td.acciones form.en-linea { display: inline; }
.vacio { padding: 28px 20px; text-align: center; color: var(--muted); font-size: 13px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-off { background: var(--surface-alt); color: var(--muted); }
.badge-proceso { background: var(--accent-soft); color: var(--accent); }

.note-box { font-size: 12px; color: var(--warn); background: var(--warn-soft); border-radius: 8px; padding: 10px 12px; }
.ok-box { font-size: 12px; color: var(--ok); background: var(--ok-soft); border-radius: 8px; padding: 10px 12px; }

/* Pantallas de cuenta (login, selección, confidencialidad) */
.cuenta { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
.cuenta-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 28px; align-items: center; }
.cuenta-col.ancha { max-width: 640px; }
.cuenta-col > img { width: 220px; height: auto; }
.cuenta-card { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 32px; box-shadow: 0 1px 3px rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 18px; }
.cuenta-card button { width: 100%; padding: 12px 16px; font-size: 14px; }
.cuenta-pie { font-size: 12px; color: var(--muted); text-align: center; }
.tenant-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; background: var(--surface); cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.tenant-card:hover { border-color: var(--accent); }
.tenant-card { position: relative; }
.tenant-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.tenant-card:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tenant-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.tenant-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.tenant-rol { font-size: 12px; color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.tenant-card:has(input:checked) .tenant-rol { color: var(--accent); }
.clausula { font-size: 14px; line-height: 1.6; max-height: 55vh; overflow-y: auto; padding-right: 8px; }
.clausula h2 { font-size: 15px; margin: 16px 0 6px; }
.clausula ul, .clausula ol { padding-left: 22px; }
.clausula li + li { margin-top: 4px; }
.clausula-previa { max-height: none; overflow: visible; }
textarea.texto-legal { font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.55; }
.ayuda-formato { font-size: 13px; color: var(--muted); }
.ayuda-formato summary { cursor: pointer; font-weight: 600; }
.ayuda-formato ul { margin: 8px 0 0; padding-left: 20px; }

/* Formulario de registro (prototipo: Main.dc.html) */
.card-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.card-cuerpo > h2, .card h2 { font-size: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } }
.chiprow { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { font-weight: 600; font-size: 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--fg); padding: 9px 16px; cursor: pointer; text-transform: none; letter-spacing: 0; margin: 0; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
/* El input queda oculto a la vista pero accesible con el teclado (Tab + espacio/flechas). */
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip { position: relative; }
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent); }
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-warn { background: var(--warn-soft); color: var(--warn); }
/* Emergencia en proceso: se atiende ahora mismo (rojo de acento). */
.pill-proceso { background: var(--accent-soft); color: var(--accent); }
.stepper { display: flex; align-items: center; gap: 10px; }
.stepper button { width: 32px; height: 32px; padding: 0; font-size: 16px; }
.stepper input { width: 64px; text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 18px; padding: 6px; }
.subcard { border: 1px solid var(--border); border-radius: 8px; padding: 14px; display: flex; flex-direction: column; gap: 12px; background: var(--surface-alt); }
.subtitulo { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.subtitulo .titulo { font-size: 13px; font-weight: 600; }
.subtitulo .ayuda { font-size: 12px; color: var(--muted); }
.tabla-form td { padding: 6px 8px; }
.tabla-form input, .tabla-form select { padding: 8px 10px; }
textarea { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; padding: 11px 12px; border-radius: 6px; border: 1px solid var(--border); width: 100%; resize: vertical; }
.acciones-form { display: flex; justify-content: flex-end; gap: 10px; }
.errores { font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px 16px; }
.errores ul { margin: 6px 0 0; padding-left: 18px; }
fieldset { border: none; margin: 0; padding: 0; min-width: 0; display: contents; }

/* Qué se ve según el tipo de salida y el apoyo (registro.js actualiza data-tipo y data-apoyo). */
#registro:not([data-tipo="Incidente"]) .solo-incidente,
#registro:not([data-tipo="ServicioComunitario"]) .solo-servicio,
#registro:not([data-tipo="Combustible"]) .solo-combustible,
#registro[data-tipo="Combustible"] .no-combustible,
#registro:not([data-apoyo="Recibido"]) .solo-recibido,
#registro:not([data-apoyo="Brindado"]) .solo-brindado,
#registro[data-apoyo="Brindado"] .no-brindado { display: none !important; }

.chip.elegido { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.dialogo { border: 1px solid var(--border); border-radius: 12px; padding: 24px; max-width: 360px; width: calc(100% - 32px); display: flex; flex-direction: column; gap: 14px; }
.dialogo:not([open]) { display: none; }
.dialogo::backdrop { background: rgba(0, 0, 0, .35); }
.dialogo p { margin: 0; font-size: 13px; color: var(--muted); }

.mapa { height: 340px; border-radius: 8px; border: 1px solid var(--border); margin-top: 10px; }
.ayuda-mapa { font-size: 12px; color: var(--muted); }

.dialogo-ancho { max-width: 480px; }
.lista-instituciones { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding: 4px 2px; }
.quitar-chip { background: none; border: none; color: inherit; padding: 0 0 0 6px; font-size: 15px; line-height: 1; cursor: pointer; }
.quitar-chip:hover { color: inherit; opacity: .75; }

/* Detalle de una salida (prototipo Detalle.dc.html). */
.volver { font-size: 13px; color: var(--muted); align-self: flex-start; }
.volver:hover { color: var(--accent); text-decoration: none; }
.pill-off { background: var(--surface-alt); color: var(--fg); text-transform: none; letter-spacing: 0; font-weight: 500; border: 1px solid var(--border); }
.dato { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 14px; }
.dato-etiqueta { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dato-vacio { font-size: 13px; color: var(--muted); }
.texto-largo { white-space: pre-line; line-height: 1.5; }
.timeline { display: flex; margin-top: 14px; }
.timeline .paso { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; min-width: 0; }
.timeline .paso::before { content: ''; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.timeline .paso:first-child::before { display: none; }
.timeline .punto { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 3px solid var(--accent-soft); z-index: 1; }
.timeline .pendiente .punto { background: var(--surface); border-color: var(--border); }
.paso-etiqueta { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.paso-hora { font-size: 12px; font-family: 'IBM Plex Mono', monospace; }
.sev-tile { text-align: center; padding: 14px 8px; border-radius: 8px; background: var(--surface-alt); }
.sev-cantidad { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 28px; font-weight: 700; }
.sev-etiqueta { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.pie-auditoria { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) { .grid4.severidades { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Importar datos (prototipo Importar.dc.html). */
.nota-pagina { font-size: 13px; color: var(--muted); max-width: 720px; margin: 8px 0 0; line-height: 1.5; }
.pasos { display: flex; gap: 24px; flex-wrap: wrap; }
.paso-imp { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--muted); }
.paso-imp .num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); font-size: 12px; }
.paso-imp.actual { color: var(--accent); }
.paso-imp.actual .num { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.paso-imp.hecho { color: var(--ok); }
.paso-imp.hecho .num { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok); }
th.num, td.num { text-align: right; }
.sin-contar { color: var(--muted); background: var(--surface-alt); }
td.resultado-imp { white-space: pre-line; font-size: 12px; color: var(--muted); min-width: 260px; }

/* Estadísticas (prototipo Dashboard.dc.html). Una sola serie por gráfica: color de acento, sin leyenda. */
.filtro-fechas { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filtro-fechas .field { flex: 0 1 200px; }
a.chip { display: inline-flex; text-decoration: none; }
a.chip:hover { text-decoration: none; }
.kpi { gap: 6px; }
.kpi-valor { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 34px; font-weight: 700; line-height: 1.1; }
.kpi-secundario { font-size: 16px; color: var(--muted); }
.kpi-sub { font-size: 12px; color: var(--muted); }
.grafica-meses { display: flex; align-items: flex-end; gap: 2px; height: 210px; overflow-x: auto; }
.columna { flex: 1 1 0; min-width: 28px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.columna-barra { width: 70%; max-width: 44px; background: var(--accent); border-radius: 4px 4px 0 0; }
.columna:hover .columna-barra { opacity: .8; }
.columna-valor { font-size: 11px; color: var(--muted); }
.columna-etiqueta { font-size: 11px; color: var(--muted); white-space: nowrap; }
.barra-fila { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { height: 10px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; }
.barra-relleno { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; }
.barra-fila:hover .barra-relleno { opacity: .8; }
.barra-valor { font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }

/* Estados del incidente: borrador rojo, en proceso naranja, cerrado verde (badge-ok / pill-ok). */
:root { --naranja: #C2410C; --naranja-soft: #FFEDD5; }
.badge-borrador, .pill-borrador { background: var(--accent-soft); color: var(--accent); }
.badge-curso, .pill-curso { background: var(--naranja-soft); color: var(--naranja); }
tr.fila-resaltada td { background: var(--ok-soft); }
.boton-icono { padding: 9px 10px; vertical-align: middle; color: var(--muted); }
.boton-icono:hover { color: var(--accent); }
td.acciones > * + * { margin-left: 4px; }

/* Inicio: tablero de emergencias en proceso, con el logo de fondo como marca de agua. */
.inicio { position: relative; min-height: calc(100vh - 70px); }
.inicio::before { content: ''; position: fixed; inset: 70px 0 0 0; background: url('../img/sigeb-icon.png') center 60% / min(520px, 70vw) no-repeat; opacity: .05; pointer-events: none; z-index: 0; }
.inicio > .pagina { position: relative; z-index: 1; }
.en-vivo { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
/* El anillo se anima solo con transform/opacity: lo resuelve la GPU, sin redibujar la página en cada cuadro. */
.pulso { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; position: relative; }
.pulso::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: currentColor; animation: pulso 2s ease-out infinite; will-change: transform, opacity; }
@keyframes pulso { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pulso::after { animation: none; } }
.kpi-destacado { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.kpi-destacado .dato-etiqueta, .kpi-destacado .kpi-sub { color: rgba(255, 255, 255, .85); }
.kpi-destacado .kpi-valor { font-size: 44px; }
.tarjetas-emergencia { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tarjeta-emergencia { padding: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--fg); font-weight: 400; border-left: 4px solid var(--accent); transition: transform .12s ease, box-shadow .12s ease; }
.tarjeta-emergencia:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tarjeta-cabeza .pill-curso { gap: 8px; }
.transcurrido { font-size: 12px; color: var(--accent); font-weight: 600; }
.tarjeta-tipo { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.tarjeta-lugar { font-size: 14px; }
.tarjeta-datos { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); align-items: center; }
.tarjeta-apoyo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 10px; }
.sin-emergencias { align-items: center; text-align: center; padding: 36px 20px; }
td.celda-ajustable { white-space: normal; min-width: 220px; }

/* Usuarios y permisos (Ronda 10). */
.editar-acceso { border-color: var(--accent); }
.grupo-permisos { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 0; }
.grupo-permisos legend { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 0 6px; }
.permisos-lista { display: flex; flex-wrap: wrap; gap: 4px; }
.permisos-lista .badge { text-transform: none; letter-spacing: 0; font-weight: 500; }
.lista-accesos { display: flex; flex-direction: column; gap: 10px; }
.acceso-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.acciones-acceso { display: flex; gap: 6px; flex-shrink: 0; }
.acciones-acceso button, .acciones-acceso .boton { padding: 6px 10px; font-size: 12px; }

/* Informes y Certificación. */
.caja-seguridad { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px 14px; }
.caja-seguridad svg { flex-shrink: 0; margin-top: 1px; }
@media print {
  .no-imprimir, .topnav { display: none !important; }
  body { background: #fff; }
  .hoja-impresion { padding: 0; max-width: none; }
  .informe { box-shadow: none; border-color: #999; }
}

/* Login: cuenta bloqueada con conteo regresivo (Ronda 13). */
.caja-bloqueo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 12px 14px; }
.caja-bloqueo .conteo { font-size: 22px; font-weight: 600; }
.caja-bloqueo.desbloqueada { color: var(--ok); background: var(--ok-soft); }
.parametro { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 12px 0; border-top: 1px solid var(--border); }
.parametro:first-of-type { border-top: none; padding-top: 0; }
.parametro-nombre { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--fg); margin-bottom: 2px; }
.parametro-valor { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.parametro-valor input { width: 110px; text-align: right; }
@media (max-width: 640px) { .parametro { flex-direction: column; align-items: flex-start; } }

/* Logo del cuerpo (Ronda 13). */
.logo-cuerpo { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.logo-vista { width: 180px; height: 120px; border: 1px dashed var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 10px; background: var(--surface-alt); text-align: center; }
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.encabezado-informe { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--accent); padding-bottom: 12px; }
.encabezado-informe img.logo-cuerpo-impresion { max-height: 72px; max-width: 220px; object-fit: contain; }

/* Edición en una sola ventana (Ronda 14). */
.aviso-edicion { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 8px; padding: 12px 14px; }
.edicion-bloqueada { opacity: .75; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border); }

/* Detalle: tiempo transcurrido de la salida a la llegada, destacado al final de la línea de tiempo. */
.linea-y-tiempo { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.linea-y-tiempo .timeline { flex: 1 1 380px; }
.tiempo-transcurrido { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; text-align: right; padding: 14px 20px; border-radius: 10px; background: var(--accent-soft); border-left: 4px solid var(--accent); }
.tiempo-valor { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 40px; font-weight: 700; line-height: 1; color: var(--accent); }
.tiempo-pendiente { font-size: 18px; color: var(--muted); }
@media (max-width: 640px) { .tiempo-transcurrido { align-items: flex-start; text-align: left; width: 100%; } }

/* Buscador de lugares del mapa (Ronda 15). */
.buscador-lugar { position: relative; margin-top: 10px; z-index: 2000; }
.buscador-lugar input { width: 100%; }
.resultados-lugar { position: absolute; z-index: 2000; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow-y: auto; }
.resultado-lugar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 10px 14px; text-align: left; white-space: normal; background: var(--surface); }
.resultado-lugar:hover, .resultado-lugar:focus { background: var(--accent-soft); color: var(--fg); }
.resultado-lugar span { font-size: 12px; color: var(--muted); font-weight: 400; }
.resultado-aviso { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* Inicio: reloj en vivo del tiempo en proceso. */
.reloj { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; color: var(--accent); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Listas plegables de mantenimiento: <details class="grupo"> por catálogo o por padre (región, provincia). */
.barra-grupos { display: flex; gap: 8px; align-items: center; }
.barra-grupos button { background: none; border: none; color: var(--accent); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.barra-grupos button:hover { text-decoration: underline; }
details.grupo { border-bottom: 1px solid var(--border); }
details.grupo:last-of-type { border-bottom: none; }
details.grupo > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 20px; font-weight: 600; font-size: 14px; }
details.grupo > summary::-webkit-details-marker { display: none; }
details.grupo > summary::before { content: '▸'; color: var(--muted); font-size: 12px; transition: transform .15s; }
details.grupo[open] > summary::before { transform: rotate(90deg); }
details.grupo > summary:hover { background: var(--surface-alt); }
details.grupo > summary .total { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; }
details.grupo[open] > summary { border-bottom: 1px solid var(--border); }
details.grupo > .ok-box, details.grupo > .note-box { margin: 12px 20px 0; }
/* Edición dentro de la misma fila: el formulario aparece donde está el registro. */
tr.editando > td { background: var(--surface-alt); padding: 0; }
tr.editando .fila-form { border-bottom: none; }
tr[id], .fila-form[id] { scroll-margin-top: 80px; }
tr:target > td { background: var(--ok-soft); }

/* Filtro de varios valores (Panel Nacional): un select con aspecto de chip para ir agregando opciones. */
.agregar-filtro { margin: 0; display: inline-flex; }
.agregar-filtro select { width: auto; max-width: 260px; border-radius: 999px; border: 1px dashed var(--accent); color: var(--accent); background: var(--surface); font-weight: 600; font-size: 13px; padding: 8px 14px; cursor: pointer; }
.chip.elegido .quitar-chip { color: inherit; font-weight: 600; text-decoration: none; }

/* Lista de incidentes: botones de acción compactos y estado en dos líneas si hace falta, para que no se salga de la tabla. */
td.acciones .boton, td.acciones button:not(.boton-icono) { padding: 6px 10px; font-size: 12px; }
td.celda-estado { white-space: normal; }
td.celda-estado .badge { display: inline-block; margin: 2px 0; }

/* Pantalla de roles: "Marcar todo" de cada módulo, alineado a la derecha del grupo de permisos. */
.grupo-permisos [data-marcar-modulo] { align-self: flex-end; margin-top: -6px; font-size: 12px; }

/* Unidades ocupadas (Ronda 21): aviso global tras liberar, botón "Liberar" y la insignia de ocupada. */
.aviso-global { max-width: 1180px; margin: 16px auto -8px; padding: 0 20px; }
.boton-liberar { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.badge-ocupada { background: var(--accent-soft); color: var(--accent); }
.unidad-ocupada { display: inline-flex; align-items: center; gap: 6px; }
.aviso-unidades ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.aviso-unidades li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pill-retorno { background: var(--ok-soft); color: var(--ok); }
/* Tiempo de llegada de cada unidad en el detalle (Ronda 23). */
.tiempos-unidades { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; margin-top: 4px; }
.tiempo-unidad { display: flex; gap: 14px; align-items: baseline; font-size: 15px; }
.tiempo-unidad strong { font-family: "Barlow Semi Condensed", sans-serif; font-size: 20px; color: var(--accent); line-height: 1.1; }
.tiempo-unidad .tiempo-pendiente { font-size: 14px; }
@media (max-width: 640px) { .tiempos-unidades { align-items: flex-start; } }

/* Reporte de apoyos (Ronda 25): página actual en la paginación y tablas de la versión para imprimir. */
.boton-actual { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tabla-impresion { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 18px; }
.tabla-impresion th, .tabla-impresion td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; vertical-align: top; white-space: normal; }
.tabla-impresion th { background: var(--surface-alt); font-weight: 600; }
.tabla-impresion td.num { text-align: right; }
.hoja-impresion h2 { margin-top: 14px; font-size: 16px; }

/* Acciones que pueden pasar a una segunda línea sin salirse de la tabla (Usuarios). El flex va en un div
   interno: en el <td> rompe la celda y la línea divisoria de la fila se corre. */
td.acciones-ajustables { white-space: normal; min-width: 320px; }
td.ajustable-corta { white-space: normal; min-width: 130px; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.acciones-fila form { margin: 0; }
td.acciones .acciones-fila > * + * { margin-left: 0; }

/* ---------- Teléfono (hasta 760 px) ---------- */
@media (max-width: 760px) {
  /* Menú plegable: se ve el logo y el botón; al tocarlo se despliegan las opciones en lista. */
  .topnav { flex-wrap: nowrap; justify-content: space-between; padding: 10px 16px; }
  .topnav .brand { margin-right: 0; }
  .menu-boton { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 8px 14px; }
  .menu-enlaces { display: none; }
  .topnav.abierta { flex-wrap: wrap; }
  .topnav.abierta .menu-enlaces { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding-top: 10px; }
  .topnav.abierta .menu-enlaces > a { font-size: 15px; padding: 12px 14px; }
  .topnav .sesion { margin-left: 0; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; }
  .topnav .sesion span { width: 100%; }

  /* Pestañas (Mantenimiento, Administración, Estadísticas…): bajan a otra línea en vez de salirse de la pantalla. */
  .tabs { flex-wrap: wrap; row-gap: 0; }
  .tab { white-space: nowrap; padding: 10px 12px; }

  /* Tablas del formulario de registro: se desplazan dentro de su recuadro, sin empujar la página. */
  .tabla-form { display: block; overflow-x: auto; }

  .pagina { padding: 20px 16px 32px; }
}