/* Centinela · estilos de acceso. Sin fuentes ni recursos externos. */
:root {
  --fondo: #b9d0e4;
  --superficie: #ffffff;
  --superficie-honda: #dbe9f5;
  --borde: #7fa3c4;
  --texto: #0f2338;
  --texto-suave: #3f5b76;
  --ambar: #d98c00;
  --ambar-oscuro: #fff3de;
  --error-fondo: #fbdfe0;
  --error-borde: #c23b3b;
  --ok-fondo: #dcf3e8;
  --ok-borde: #1f8a5e;
  --nav-fondo: #16293d;
  --admin-fondo: #6fbf8b;
  /* Aspecto de CuadrantePL: botón azul de acción principal, rojo para imprimir/PDF, cabecera de
     tabla azul marino, campos con borde suave. */
  --boton-azul: #1a6fc4;
  --boton-azul-oscuro: #155a9e;
  --boton-rojo: #e53935;
  --boton-rojo-oscuro: #c62f2c;
  --borde-campo: #c5d3e1;
  --borde-suave: #dbe3ec;
  --tabla-cabecera: #1b3a5c;
  --ok-texto: #1f7a3a;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
  color: var(--texto);
  font: 1rem/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pagina {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 8vh, 4rem) 1.25rem 2rem;
}
/* Excepción para pantallas con tablas anchas (el cuadrante, por ahora). El resto de
   pantallas son formularios y listas sencillas que quedan mejor centradas y estrechas. */
.pagina-ancha { max-width: 90rem; }
/* Fichas y formularios más cómodos: ancho intermedio, con los campos en dos columnas. */
.pagina-media { max-width: 56rem; }
.form-dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.form-dos-col > .boton, .form-dos-col > .campo-completo { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-dos-col { grid-template-columns: 1fr; } }

/* Marca: escudo + nombre del servicio. Cuando hay barra de navegación, comparten una misma fila
   de cabecera (.cabecera-centinela): la marca a la izquierda, la barra como caja oscura a la
   derecha — en vez de dos franjas a todo lo ancho por encima de la página. */
.cabecera-centinela { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem 1.5rem; margin-bottom: 1.75rem; }
.marca { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; }
.marca .escudo { width: 3.6rem; height: auto; flex: none; }
.marca h1 { margin: 0; font-size: 2.1rem; line-height: 1.1; font-weight: 700; letter-spacing: .01em; }
.marca p { margin: .3rem 0 0; font-size: 1.2rem; font-weight: 600; color: var(--texto); }

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: .75rem;
  padding: 1.5rem 1.25rem;
  box-shadow: 0 6px 18px rgba(15, 35, 56, .14);
}
.tarjeta h2 { margin: 0 0 1rem; font-size: 1.35rem; line-height: 1.25; }
.tarjeta p { margin: 0 0 1rem; }

.campo { margin-bottom: 1.1rem; }
label { display: block; margin-bottom: .35rem; font-weight: 600; }

input[type="text"], input[type="password"], input[type="search"], input[type="email"], input[type="tel"] {
  width: 100%;
  padding: .75rem .85rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: .5rem;
}
/* Desplegables, fechas, números y áreas de texto: antes salían con el aspecto por defecto del
   navegador (pequeños y cuadrados). :where() les da especificidad cero, así que cualquier clase
   suelta (.num-corto, .texto-corto, .popover-editar select...) sigue mandando sobre esto. */
:where(select, input[type="date"], input[type="number"], input[type="time"], input[type="month"], textarea) {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: .5rem;
}
:where(textarea) { min-height: 5rem; resize: vertical; }
:where(select, input[type="date"], input[type="number"], input[type="time"], input[type="month"], textarea):focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}
/* El PIN es lo que se teclea: grande, con los dígitos bien separados. */
input.pin { font-size: 1.5rem; letter-spacing: .35em; font-variant-numeric: tabular-nums; text-align: center; }
input:focus-visible, .boton:focus-visible, .enlace:focus-visible {
  outline: 3px solid var(--ambar);
  outline-offset: 2px;
}

.boton {
  display: inline-block;
  width: 100%;
  padding: .8rem 1rem;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: .5rem;
  border: 2px solid transparent;
  cursor: pointer;
}
.boton-principal { color: #fff; background: var(--boton-azul); }
.boton-principal:hover { background: var(--boton-azul-oscuro); }
.boton-secundario { color: var(--texto); background: transparent; border-color: var(--borde); }
.boton-secundario:hover { background: var(--superficie-honda); }
/* Navegación (Anterior/Siguiente...): discreto, para que no compita con las acciones. */
.boton-neutro { color: var(--texto); background: #eef2f7; border-color: var(--borde-campo); }
.boton-neutro:hover { background: #e1e8f0; }
/* Imprimir / PDF: acción distinta de navegar, con color propio como en CuadrantePL. */
.boton-rojo { color: #fff; background: var(--boton-rojo); }
.boton-rojo:hover { background: var(--boton-rojo-oscuro); }
/* Botón de formulario con ancho propio (no a todo el ancho) y más relleno que .boton-chico. */
.boton-auto { width: auto; padding: .8rem 1.5rem; }
.acciones-formulario { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }

.aviso { padding: .75rem .9rem; border-radius: .5rem; border-left: 4px solid; }
.aviso-error { background: var(--error-fondo); border-color: var(--error-borde); }
.aviso-ok { background: var(--ok-fondo); border-color: var(--ok-borde); }
.aviso-atencion { background: var(--ambar-oscuro); border-color: var(--ambar); }

.nota { color: var(--texto-suave); font-size: .95rem; }

.ficha { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1.25rem; }
.ficha dt { color: var(--texto-suave); }
.ficha dd { margin: 0; font-weight: 600; }

.acciones { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.acciones form { margin: 0; }

.salida-secundaria { margin: 1.25rem 0 0; text-align: center; }
.enlace {
  padding: 0;
  font: inherit;
  color: var(--texto);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

@media (max-width: 22rem) {
  .acciones { grid-template-columns: 1fr; }
}

/* Segundo factor */
.pasos { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.pasos li { margin-bottom: 1rem; }
.pasos .nota { display: block; margin: .5rem 0; }

.qr {
  width: 100%;
  max-width: 264px;
  margin: .75rem auto;
  padding: 0;
  background: #fff;          /* el QR necesita fondo claro para leerse */
  border-radius: .5rem;
  line-height: 0;
}
.qr svg { display: block; width: 100%; height: auto; }

.campo-monoespaciado {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  font-size: .85rem;
}

.clave-manual, .codigos code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.clave-manual {
  display: block;
  padding: .6rem .75rem;
  text-align: center;
  letter-spacing: .08em;
  word-break: break-all;
  background: var(--superficie-honda);
  border: 1px solid var(--borde);
  border-radius: .5rem;
  user-select: all;
}

.codigos { display: grid; grid-template-columns: 1fr; gap: .5rem; margin: 1rem 0; padding: 0; list-style: none; }
.codigos li { padding: .55rem .75rem; text-align: center; background: var(--superficie-honda); border: 1px solid var(--borde); border-radius: .5rem; }
.codigos code { font-size: 1.05rem; letter-spacing: .06em; user-select: all; }
@media (min-width: 26rem) { .codigos { grid-template-columns: 1fr 1fr; } }

.ayuda { margin: 1rem 0 0; color: var(--texto-suave); }
.ayuda summary { cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.ayuda summary:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.aviso-seguridad { margin-top: 1.25rem; padding-left: .75rem; border-left: 3px solid var(--ambar); }
a.boton { text-decoration: none; }

/* Gestión de usuarios */
.cabecera-lista { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cabecera-lista h2 { margin: 0; }
.boton-chico { width: auto; padding: .55rem .9rem; }
.cabecera-botones { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

.lista-usuarios { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 700px) { .lista-usuarios { grid-template-columns: 1fr; } }
.lista-usuarios a {
  display: grid;
  grid-template-columns: minmax(3.5rem, max-content) minmax(0, 1fr) auto;
  align-items: center;
  gap: .15rem .75rem;
  padding: .6rem .8rem;
  height: 100%;
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  background: #f6f7f9;
  border: 1px solid #d5d9e0;
  border-left: 4px solid #1f3a5f;
  border-radius: .5rem;
  transition: box-shadow .15s, border-color .15s;
}
.lista-usuarios a:hover { background: #fff; border-color: #1f3a5f; box-shadow: 0 2px 8px rgba(31, 58, 95, .15); }
.lista-usuarios a:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.lista-usuarios li.de-baja a { opacity: .6; }
.lu-placa { font-weight: 700; font-variant-numeric: tabular-nums; }
.lu-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lu-rol { grid-column: 2; color: var(--texto-suave); font-size: .9rem; }
.lu-etiquetas { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }

.etiqueta { padding: .1rem .5rem; font-size: .78rem; font-weight: 700; border-radius: 999px; }
.etiqueta-baja { color: var(--texto); background: var(--superficie-honda); border: 1px solid var(--borde); }
.etiqueta-aviso { color: var(--ambar-oscuro); background: var(--ambar); }
.etiqueta-pendiente { color: var(--ambar-oscuro); background: var(--ambar); }
.etiqueta-aprobada { color: var(--ok-borde); background: var(--ok-fondo); border: 1px solid var(--ok-borde); }
.etiqueta-rechazada { color: var(--error-borde); background: var(--error-fondo); border: 1px solid var(--error-borde); }

.lista-resultados-busqueda { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.tarjeta-resultado-busqueda {
  display: flex; align-items: center; gap: .9rem;
  padding: .7rem 1rem; border: 1px solid var(--borde); border-radius: .6rem;
  color: inherit; text-decoration: none; background: var(--superficie);
}
.tarjeta-resultado-busqueda:hover { background: var(--superficie-honda); }
.tarjeta-resultado-busqueda .icono-resultado { font-size: 1.4rem; }
.tarjeta-resultado-busqueda .cuerpo-resultado { flex: 1; display: flex; flex-direction: column; }
.tarjeta-resultado-busqueda .titulo-resultado { font-weight: 600; }
.tarjeta-resultado-busqueda .detalle-resultado { font-size: .85rem; color: var(--texto-suave); }

.tarjeta h3 { margin: 1.5rem 0 .75rem; font-size: 1.05rem; }
.acciones-ficha { display: grid; gap: .75rem; }
.acciones-ficha > form { margin: 0; }

/* Cabecera del portal: azul marino, escudo como marca de agua, remate de damero policial. */
.portal-hero {
  position: relative;
  overflow: hidden;
  padding: 1.9rem 2rem 2.5rem;
  margin: 0 0 1.75rem;
  border-radius: .9rem;
  background: linear-gradient(135deg, #0c1f38 0%, #123a63 55%, #1a4d80 100%);
  box-shadow: 0 10px 28px rgba(6, 20, 36, .35);
}
.portal-hero-escudo {
  position: absolute;
  top: 50%;
  right: -1.5rem;
  width: 13rem;
  height: 13rem;
  transform: translateY(-50%);
  opacity: .18;
  object-fit: contain;
  pointer-events: none;
}
.portal-hero-texto { position: relative; z-index: 1; max-width: 34rem; }
.portal-hero h2 { margin: 0 0 .75rem; font-size: 1.65rem; color: #fff; }
.portal-hero .ficha dt { color: #9db9d6; }
.portal-hero .ficha dd { color: #fff; }
.portal-hero .aviso-ok { background: rgba(255, 255, 255, .12); border-color: #6fcf9e; color: #eafff3; margin-bottom: 1rem; }
.portal-buscador { display: flex; gap: .5rem; margin-top: 1.1rem; max-width: 26rem; }
.portal-buscador input[type="search"] { flex: 1 1 auto; min-width: 0; width: auto; background: rgba(255, 255, 255, .92); }
.portal-buscador .boton { width: auto; flex: none; }
.portal-hero .salida-secundaria { text-align: left; margin-top: .9rem; }
.portal-hero .enlace { color: #cfe3f7; }
.portal-hero .enlace:hover { color: #fff; }
.portal-buscador .boton-secundario { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); color: #fff; }
.portal-buscador .boton-secundario:hover { background: rgba(255, 255, 255, .2); }
.portal-damero {
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2.2rem;
  /* Casillas más anchas y borde superior difuminado: el damero se funde con el azul en vez de
     cortarse en seco. */
  background: repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 2.2rem 2.2rem;
  opacity: .7;
  filter: blur(.7px);
  -webkit-mask-image: linear-gradient(to top, #000 15%, transparent 100%);
  mask-image: linear-gradient(to top, #000 15%, transparent 100%);
}

.rejilla-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 9.5rem)); gap: 1.1rem; margin: 0 0 1.5rem; }
.tarjeta-modulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  padding: 1.2rem .75rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: .8rem;
  color: inherit;
  text-decoration: none;
}
a.tarjeta-modulo:hover { border-color: var(--ambar); }
a.tarjeta-modulo:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

.modulo-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: .8rem;
  background: var(--superficie-honda);
  color: var(--borde);
}
.modulo-icono svg { width: 2rem; height: 2rem; }
.tarjeta-modulo.activo .modulo-icono { background: var(--ok-fondo); }

.modulo-titulo { display: block; font-weight: 700; }
.estado-modulo { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .03em; }
.estado-operativo { color: var(--ok-borde); }
.estado-proximamente { color: var(--texto-suave); }
.tarjeta-modulo.proximamente { cursor: default; }
.tarjeta-modulo.proximamente .modulo-titulo { color: var(--texto-suave); }

.rejilla-modulos-chica { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.tarjeta-modulo-chica {
  display: block;
  padding: 0;
  text-align: left;
  border-radius: .7rem;
}
.tarjeta-modulo-chica .modulo-cuerpo { display: block; padding: 1rem 1.1rem; }
.tarjeta-modulo-chica .nota { display: block; margin-top: .2rem; }

.acciones-portal { max-width: none; grid-template-columns: repeat(3, 1fr); }
.acciones-portal .boton { width: 100%; }
@media (max-width: 30rem) { .acciones-portal { gap: .4rem; } .acciones-portal .boton { padding-inline: .3rem; font-size: .9rem; } }

.accion-motivo {
  padding: .75rem .9rem;
  background: var(--superficie-honda);
  border: 1px solid var(--borde);
  border-radius: .5rem;
}
.accion-motivo summary { cursor: pointer; font-weight: 700; }
.accion-motivo summary:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.accion-motivo form { margin-top: .75rem; }
.accion-motivo .campo { margin-bottom: .75rem; }

.pin-grande { font-size: 1.5rem; letter-spacing: .15em; text-align: center; }

/* Permisos y auditoría */
.lista-permisos { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .6rem; }
.fila-permiso {
  display: grid;
  gap: .6rem;
  padding: .65rem .8rem;
  background: var(--superficie-honda);
  border: 1px solid var(--borde);
  border-radius: .5rem;
}
.fila-permiso a { color: inherit; font-weight: 700; }

.filtros-auditoria { display: grid; gap: .9rem; margin-bottom: 1.25rem; }

.lista-auditoria { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.fila-auditoria {
  display: grid;
  gap: .15rem;
  padding: .55rem .75rem;
  background: var(--superficie-honda);
  border: 1px solid var(--borde);
  border-radius: .5rem;
  font-size: .92rem;
}
.aud-fecha { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.aud-accion { font-weight: 700; }
.aud-detalle { color: var(--texto-suave); }


/* Cuadrante — medidas calcadas de la app original (columnas de 36px para que quepa el mes entero) */
.nav-mes { display: flex; gap: .5rem; }

.tabla-cuadrante-envoltorio { overflow-x: auto; margin-bottom: 1rem; border: 1px solid var(--borde); border-radius: .5rem; box-shadow: 0 2px 8px rgba(15,35,56,.10); }
/* width:100% + min-width (fijado por mes vía nonce, según el número de días) hace que las columnas se
   repartan el ancho sobrante en pantallas anchas, en vez de dejar hueco vacío a la derecha de la tabla;
   por debajo del mínimo, el envoltorio de arriba pasa a scroll horizontal, como siempre. */
.tabla-cuadrante { border-collapse: collapse; width: 100%; background: var(--superficie); font-size: 11px; table-layout: fixed; }
.tabla-cuadrante th, .tabla-cuadrante td {
  padding: 3px 2px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid var(--borde);
  /* Sin overflow:hidden aquí: las celdas de patrulla meten hasta 3 insignias (M/T/N) una junto a
     otra, y recortar el contenido del td se comía la última. Ya no hace falta para el texto largo
     de un turno (OFICINA, M_OF...): eso se resuelve abreviando a una letra en la plantilla, no
     recortando con CSS. Solo la columna de agente (.col-persona, más abajo) necesita su propio
     recorte, porque ahí sí puede haber un nombre largo de una sola pieza.
     Separador entre días: sin esto, varios días seguidos con el mismo turno y color (p. ej. una
     semana entera de oficina) se ven como un bloque continuo en vez de una celda por día. */
  border-right: 1px solid rgba(15, 35, 56, .35);
}
.tabla-cuadrante th:last-child, .tabla-cuadrante td:last-child { border-right: none; }
.tabla-cuadrante tfoot th { background: var(--texto); color: var(--superficie); font-size: 12px; border-bottom: none; }
.tabla-cuadrante tfoot th.col-finde { background: #0d2a45; }
.tabla-cuadrante tfoot th.col-persona { background: var(--texto); }
.tabla-cuadrante thead th { background: var(--texto); color: var(--superficie); position: sticky; top: 0; z-index: 5; font-size: 11px; }
.tabla-cuadrante .col-persona {
  position: sticky;
  left: 0;
  background: var(--superficie);
  text-align: left;
  z-index: 1;
  width: 160px;
  padding-left: .4rem !important;
  border-right: 1px solid var(--borde);
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabla-cuadrante thead th.col-persona { z-index: 6; background: var(--texto); }
.col-finde { background: rgba(15,35,56,.08); }
.tabla-cuadrante thead th.col-finde { background: #0d2a45; }
.dia-letra { display: block; font-size: 10px; opacity: .8; }
.dia-numero { display: block; font-weight: 700; font-size: 12px; }
.cp-placa { font-weight: 700; font-size: 11px; }
.cp-nombre { font-size: 11px; color: var(--texto-suave); }

/* Turno único (oficina, individuales…): el color llena la celda entera, como en el original */
.celda-unica { font-weight: 700; font-size: 11px; color: #fff; height: 26px; }
/* Colores unificados por turno (los de la app anterior): mañana azul, tarde azul claro, noche negro */
.serv-M { background: #1565c0; }
.serv-T { background: #4a9be0; }
.serv-N { background: #1c1c1c; }
.celda-descanso-simple { color: var(--texto-suave); opacity: .45; font-weight: 400; }
.celda-vacia-simple { color: var(--texto-suave); opacity: .3; }

/* Turno múltiple (patrulla): tres mini-barras M/T/N dentro de la misma celda */
.celda-multi { padding: 1px !important; font-size: 0; white-space: nowrap; }
.mini-turno {
  display: inline-block;
  width: 9px;
  height: 24px;
  line-height: 24px;
  font-size: 9px;
  text-align: center;
  font-weight: 700;
  border-radius: 2px;
  color: #fff;
  overflow: hidden;
  vertical-align: middle;
}
.mini-turno.mini-turno-unico { width: 29px; font-size: 11px; }
.mini-turno.mini-descanso { background: none; color: var(--texto-suave); opacity: .45; font-weight: 400; }

/* Edición rápida (etapa 4): celdas y mini-turnos que el aprobador puede pinchar para forzar una situación */
.celda-editable { cursor: pointer; }
.celda-editable:hover, .celda-editable:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.popover-editar {
  position: absolute;
  z-index: 40;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: .6rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  padding: .9rem 1rem;
  width: 22rem;
  max-width: calc(100vw - 1rem);
}
.popover-editar-titulo { margin: 0 0 .5rem; font-weight: 700; font-size: .85rem; }
.popover-editar select { width: 100%; margin: .3rem 0 .7rem; }
.popover-editar-botones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
.popover-editar .aviso { font-size: .78rem; padding: .4rem .5rem; margin: 0 0 .5rem; }

.fila-grupo th {
  background: var(--superficie-honda);
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave);
  letter-spacing: .3px;
  padding: 4px 10px;
  border-bottom: 1px solid var(--borde);
}

.leyenda-cuadrante {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  font-size: .78rem;
}
.leyenda-cuadrante li { display: flex; align-items: center; gap: .3rem; white-space: nowrap; }
.leyenda-cuadrante .mini-turno { width: 20px; height: 20px; line-height: 20px; font-size: 11px; text-align: center; border-radius: 4px; }

/* Límites, inicio de año y conversión días→horas */
.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 55rem) { .rejilla-2 { grid-template-columns: 1fr; } }

.subtarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: .6rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 1px 5px rgba(15, 35, 56, .08);
}
fieldset.subtarjeta legend.leyenda-roja { color: var(--error-borde); }
.subtarjeta h3 { margin: 0 0 .6rem; font-size: 1rem; }
fieldset.subtarjeta { min-width: 0; }
fieldset.subtarjeta legend { padding: 0 .3rem; font-weight: 700; font-size: .85rem; color: var(--texto-suave); }
.subtarjeta form.campos-en-linea { margin-top: .6rem; }

/* Mis estadísticas */
.chips-ausencias { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.chip-ausencia { padding: .3rem .7rem; border-radius: .5rem; font-size: .85rem; color: #fff; }
.est-grafico-meses { display: flex; align-items: flex-end; gap: .5rem; padding: .5rem 0; overflow-x: auto; }
.chip-leyenda { display: inline-block; width: .8rem; height: .8rem; border-radius: .2rem; margin: 0 .3rem 0 .8rem; vertical-align: middle; }
.chip-leyenda:first-child { margin-left: 0; }

.seccion-titulo {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto-suave);
  margin: 1.6rem 0 .7rem;
}

.tabla-envoltorio {
  overflow-x: auto;
  margin-bottom: 1rem;
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: .6rem;
  box-shadow: 0 1px 5px rgba(15, 35, 56, .08);
}
.tabla-datos { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1rem; }
.tabla-envoltorio .tabla-datos { margin-bottom: 0; }
.tabla-datos th, .tabla-datos td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--borde-suave); }
.tabla-datos tbody tr:last-child td { border-bottom: 0; }
.tabla-datos thead th { color: #fff; background: var(--tabla-cabecera); font-weight: 700; font-size: .88rem; border-bottom: 0; }
.tabla-datos td.num, .tabla-datos th.num { text-align: center; font-variant-numeric: tabular-nums; }
.tabla-datos input[type="number"] { width: 4.5rem; padding: .35rem .4rem; text-align: center; }
.tabla-datos tr.fila-sin-configurar { background: rgba(217, 140, 0, .08); }

.etiqueta-codigo {
  display: inline-block;
  padding: .05rem .45rem;
  font-size: .78rem;
  font-weight: 700;
  border-radius: .3rem;
  color: #fff;
}

.campos-en-linea { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
.campos-en-linea .campo { margin-bottom: 0; flex: 1 1 9rem; }

.opcion-casilla { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.opcion-casilla input { margin-top: .2rem; }
.opcion-casilla + .opcion-casilla { margin-top: .6rem; }

.selector-anio-agente { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1.25rem; }
.selector-anio-agente select { padding: .5rem .6rem; font: inherit; border: 1px solid var(--borde); border-radius: .5rem; background: var(--superficie); }

.resumen-trazabilidad { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; margin-bottom: .75rem; }
.dato-resumen { background: var(--superficie); border: 1px solid var(--borde); border-radius: .5rem; padding: .45rem .6rem; }
.dato-resumen .num-grande { display: block; font-size: 1.2rem; font-weight: 700; }
.dato-resumen .num-grande-negativo { color: var(--error-borde); }
.dato-resumen .rotulo { display: block; font-size: .78rem; color: var(--texto-suave); }

/* Pedir un día / pedir por rango */
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.pestana {
  padding: .6rem 1.1rem;
  font-weight: 700;
  color: var(--texto-suave);
  text-decoration: none;
  background: var(--superficie);
  border: 1px solid var(--borde-campo);
  border-radius: .5rem;
}
.pestana:hover { background: #eef2f7; }
.pestana[aria-selected="true"] { color: #fff; background: var(--tabla-cabecera); border-color: var(--tabla-cabecera); }
.pestana:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* Impresión: ocultar navegación/controles, respetar colores de fondo
   (turnos, situaciones, ausencias) que en pantalla llevan clases CSP-safe
   en vez de estilos inline. Cubre la función de cuadrante_pdf.php,
   resumen_mensual_pdf.php y mi_historial.php del original (impresión del
   navegador, sin librería PDF). */
@media print {
  header.marca,
  .no-imprimir {
    display: none !important;
  }
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }
  body { background: #fff; }
  main.pagina {
    max-width: none;
    margin: 0;
    padding: 0;
  }
  .tabla-cuadrante-envoltorio {
    overflow-x: visible;
    border: none;
    box-shadow: none;
  }
  .tabla-cuadrante thead th {
    position: static;
  }
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* Insignia de recuento (notificaciones, anuncios sin leer) */
.insignia {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 999px; background: var(--error-borde); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 1;
}

/* Bandeja de notificaciones */
.lista-notificaciones { list-style: none; margin: 0; padding: 0; }
.notificacion {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .75rem .9rem; border: 1px solid var(--borde); border-radius: .5rem;
  margin-bottom: .6rem; background: var(--superficie);
}
.notificacion .fecha { font-size: .78rem; color: var(--texto-suave); }

/* Tablón de anuncios */
.lista-anuncios { display: flex; flex-direction: column; gap: .9rem; margin: 0 0 1.5rem; }
.anuncio {
  border: 1px solid var(--borde); border-radius: .6rem; background: var(--superficie);
  box-shadow: 0 2px 8px rgba(15, 35, 56, .08); overflow: hidden;
}
.anuncio.anuncio-no-leido { border-left: 4px solid var(--ambar); }
.anuncio-cabecera {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-bottom: 1px solid var(--borde); background: var(--superficie-honda);
}
.anuncio-tipo {
  display: inline-block; padding: .05rem .5rem; border-radius: .3rem;
  font-size: .76rem; font-weight: 700; color: #fff;
}
.anuncio-tipo-info { background: #1a6fc4; }
.anuncio-tipo-aviso { background: #d98c00; }
.anuncio-tipo-urgente { background: var(--error-borde); }
.anuncio-titulo { font-weight: 700; flex: 1; }
.anuncio-fija { font-size: .78rem; color: var(--texto-suave); }
.anuncio-cuerpo { padding: .85rem .9rem; white-space: pre-line; }
.anuncio-pie {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  padding: .5rem .9rem; border-top: 1px solid var(--borde); background: var(--superficie-honda);
  font-size: .82rem; color: var(--texto-suave);
}
.anuncio-acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

.panel-archivados { margin-top: 2rem; }

/* Barra de navegación global (como la cabecera de CuadrantePL en vez de las tarjetas de la
   portada). Dos cajas redondeadas adjuntas, junto a la marca (.cabecera-centinela): .barra-nav
   con las pantallas del día a día, y .barra-nav-admin (solo si el usuario tiene algún permiso de
   gestión) con los menús de administración, en un color distinto para diferenciarla a simple
   vista. El nombre, la campana y "Salir" quedan fuera de ambas, en .cabecera-usuario. No se
   muestra nada de esto sin sesión completa (acceso, cambio de PIN, segundo factor pendiente):
   App::navegacion() devuelve null en esos casos. */
/* Una caja encima de la otra (no lado a lado), cada una ocupando todo el ancho disponible, y lo
   más finas posible: poco relleno vertical, letra pequeña, una sola fila salvo que no quepa. */
.barra-nav-grupo { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 32rem; }

.barra-nav {
  background: var(--nav-fondo, #16293d);
  color: #fff;
  font-size: .8rem;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(15, 35, 56, .2);
  padding: .2rem .6rem;
  display: flex;
  align-items: center;
}
.barra-nav-pestanas { display: flex; flex-wrap: wrap; align-items: center; gap: .05rem; width: 100%; }
.barra-nav-pestana {
  color: rgba(255, 255, 255, .82); text-decoration: none; font-weight: 600;
  padding: .25rem .5rem; border-radius: .3rem; border-bottom: 2px solid transparent;
}
.barra-nav-pestana:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.barra-nav-pestana[aria-current="page"] { color: #fff; border-bottom-color: var(--ambar); background: rgba(255, 255, 255, .06); }

/* La caja de administrador usa un verde claro con texto oscuro (en vez de blanco sobre oscuro,
   como la barra normal) para diferenciarse con un color, no solo con un tono más del mismo azul. */
.barra-nav-admin {
  background: var(--admin-fondo, #6fbf8b);
  color: var(--texto);
  padding: .2rem .6rem;
  border-radius: .5rem;
  box-shadow: 0 4px 12px rgba(15, 35, 56, .2);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .15rem .6rem;
}
.barra-nav-admin-titulo {
  margin: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: rgba(15, 35, 56, .72); white-space: nowrap;
}
.barra-nav-admin-menus { display: flex; flex-wrap: wrap; gap: .1rem .8rem; }
.barra-nav-admin .barra-nav-menu summary { color: rgba(15, 35, 56, .8); }
.barra-nav-admin .barra-nav-menu summary:hover { color: var(--texto); }
.barra-nav-admin .barra-nav-menu[open] summary { color: var(--texto); }
.barra-nav-admin .barra-nav-menu-lista { background: var(--admin-fondo, #6fbf8b); border-color: rgba(15, 35, 56, .18); }
.barra-nav-admin .barra-nav-menu-lista a { color: var(--texto); }
.barra-nav-admin .barra-nav-menu-lista a:hover { background: rgba(15, 35, 56, .1); }

.barra-nav-menu { position: relative; font-size: .8rem; }
.barra-nav-menu summary {
  color: rgba(255, 255, 255, .8); cursor: pointer; list-style: none; padding: .2rem 0;
  font-weight: 600;
}
.barra-nav-menu summary::-webkit-details-marker { display: none; }
.barra-nav-menu summary:hover { color: #fff; }
.barra-nav-menu summary::after { content: " ▾"; font-size: .7em; }
.barra-nav-menu[open] summary::after { content: " ▴"; }
.barra-nav-menu[open] summary { color: #fff; }
.barra-nav-menu-lista {
  display: flex; flex-direction: column; position: absolute; left: 0; top: 100%; z-index: 20;
  min-width: 12rem; background: var(--nav-fondo, #16293d); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: .4rem; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); overflow: hidden;
}
.barra-nav-menu-lista a {
  color: #fff; text-decoration: none; padding: .45rem .7rem; font-weight: 500; white-space: nowrap;
}
.barra-nav-menu-lista a:hover { background: #22425f; }

/* Nombre, campana y "Salir": fuera de las cajas de navegación, sobre el fondo claro de la página. */
.cabecera-usuario { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.cabecera-usuario-datos { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.cabecera-campana {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--texto); text-decoration: none; line-height: 1;
  padding: .2rem .5rem; border-radius: 999px;
}
.cabecera-campana:hover { background: rgba(255, 255, 255, .55); }
.cabecera-campana-icono { font-size: 1.6rem; }
.cabecera-campana-texto { font-size: .9rem; font-weight: 600; }
.cabecera-campana .insignia { position: static; }
/* Inicio: en azul marino con letra blanca, para que se distinga del fondo y de los botones de acción. */
.boton-inicio { color: #fff; background: #1f3a5f; border-color: #1f3a5f; }
.boton-inicio:hover { background: #2b5c8f; border-color: #2b5c8f; }
.cabecera-nombre { color: var(--texto); font-weight: 600; }

@media (max-width: 70rem) {
  .cabecera-centinela { flex-direction: column; align-items: stretch; }
  .cabecera-usuario { margin-left: 0; }
}
@media (max-width: 30rem) {
  .cabecera-usuario { width: 100%; justify-content: space-between; }
  .barra-nav-admin { flex-direction: column; align-items: flex-start; gap: .3rem; }
}

/* Utilidades para evitar estilos en línea puntuales: la CSP no admite el atributo style="" (solo
   bloques <style> con nonce), así que los ajustes sueltos que antes iban con style="" en la
   plantilla pasan a estas clases. Para estilos calculados por fila (anchos, colores dinámicos)
   sigue siendo mejor un <style nonce> por plantilla, como en cuadrante_equidad.php o cuadrante.php. */
.form-en-linea { display: inline; }
.margen-inferior-chico { margin-bottom: .75rem; }
.flex-crece { flex: 1; }
.borde-gris-izq { border-left: 4px solid #9e9e9e; }
.campos-en-linea .campo-fijo { flex: 0 0 auto; }
.boton-gris { background: #9e9e9e; }
.margen-superior { margin-top: .6rem; }
.campos-en-linea.centrado { justify-content: center; }
.num-corto { width: 5rem; }
.texto-corto { width: 8rem; }

/* "Mi mes": tarjetas compactas de días disponibles (restantes, código y total), como en CuadrantePL.
   El detalle (usados, historial, conversiones) vive en "Mis días". */
.tarjetas-disponibles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .8rem; margin-bottom: 1.5rem; }
.tarjeta-disponible {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .8rem .5rem; background: var(--superficie); text-decoration: none; color: inherit;
  border: 1px solid var(--borde-suave); border-radius: .6rem; box-shadow: 0 1px 5px rgba(15, 35, 56, .08);
}
.tarjeta-disponible:hover { border-color: var(--borde); box-shadow: 0 2px 8px rgba(15, 35, 56, .16); }
.disponible-cifra { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--tabla-cabecera); }
.disponible-total { font-size: .78rem; color: var(--texto-suave); }
.tarjeta h3.seccion-titulo-primera { margin-top: 1.1rem; }
.barra-progreso { height: .5rem; border-radius: 1rem; background: rgba(15, 35, 56, .12); overflow: hidden; margin-top: .3rem; }
.barra-progreso-relleno { height: 100%; background: var(--ambar); border-radius: 1rem; }

/* "Mi mes" (etapa 9): calendario visual del mes con M/T/N por día y lista de próximos servicios —
   el equivalente de mi_mes.php en CuadrantePL, para el propio usuario en vez de para todo el grupo
   (ver /cuadrante). Las tarjetas de días disponibles de arriba son las mismas que en "Mis días". */

.mi-mes-calendario { margin-bottom: 1.5rem; }
.mi-mes-cabecera-semana {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; margin-bottom: .3rem;
  text-align: center; font-size: .78rem; font-weight: 700; color: var(--texto-suave);
}
.mi-mes-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: .4rem; }
.mi-mes-dia {
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  min-height: 4.2rem; padding: .4rem .2rem; border-radius: .5rem;
  background: var(--superficie-honda); border: 1px solid transparent;
  color: inherit; text-decoration: none;
}
.mi-mes-dia-hueco { background: none; border: none; }
.mi-mes-dia-finde { background: rgba(15, 35, 56, .06); }
.mi-mes-dia-hoy { border-color: var(--ambar); }
.mi-mes-dia-numero { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.mi-mes-dia-turnos { display: flex; flex-direction: column; align-self: stretch; gap: .2rem; }
.barra-turno { display: block; width: 100%; padding: .15rem 0; text-align: center; font-size: .85rem; font-weight: 700; color: #fff; border-radius: .25rem; line-height: 1.2; }
.barra-turno.barra-descanso { background: none; color: var(--texto-suave); opacity: .5; font-weight: 400; }
.mi-mes-dia-pedible:hover { border-color: var(--borde); background: var(--superficie); cursor: pointer; }
@media (max-width: 40rem) {
  .mi-mes-cabecera-semana, .mi-mes-rejilla { gap: .25rem; }
  .mi-mes-dia { min-height: 3.2rem; padding: .25rem .1rem; }
}

.mi-mes-proximos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.mi-mes-proximos li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; }
.mi-mes-proximos-fecha { font-weight: 700; flex: 0 0 5rem; }

/* Cabecera del cuadrante: el botón de imprimir/PDF va separado de la navegación entre meses. */
.nav-mes .boton-imprimir { margin-left: 1rem; }
.nav-mes { flex-wrap: wrap; align-items: center; }

/* "Mi mes": próximos servicios agrupados por día (una tarjeta por día, todos sus servicios en una
   línea), como en CuadrantePL. Los colores de cada servicio salen del catálogo editable, así que se
   generan como clases con nonce (turno-color-* para el punto, texto-color-* para el nombre). */
.tarjeta h3.seccion-titulo { margin: 1.6rem 0 .7rem; font-size: .75rem; }
.proximos-dias { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.proximo-dia {
  display: flex; align-items: center; gap: 1.1rem;
  padding: .45rem 1rem; background: var(--superficie);
  border: 1px solid var(--borde-suave); border-radius: .6rem;
  box-shadow: 0 1px 5px rgba(15, 35, 56, .08);
}
.proximo-dia-fecha { flex: 0 0 3.5rem; text-align: center; line-height: 1.1; }
.proximo-dia-numero { display: block; font-size: 1.15rem; font-weight: 700; color: var(--tabla-cabecera); }
.proximo-dia-semana { display: block; font-size: .68rem; text-transform: uppercase; color: var(--texto-suave); }
.proximo-dia-servicios { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.2rem; }
.proximo-servicio { display: inline-flex; align-items: center; gap: .4rem; }
.proximo-punto { display: inline-block; flex: none; width: .6rem; height: .6rem; border-radius: 50%; }
.proximo-servicio-nombre { font-size: .85rem; font-weight: 600; }
.proximo-servicio-horario { color: var(--texto-suave); font-size: .8rem; }

/* "Mis días": tarjetas en fila (una por situación) con "Ver detalle" que abre una ventana. */
.selector-anio-mis-dias { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1.25rem; }
.selector-anio-mis-dias .campo { margin-bottom: 0; }
.selector-anio-mis-dias select { width: auto; min-width: 7rem; }
.disp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.disp-tarjeta {
  display: flex; flex-direction: column; gap: .45rem;
  padding: .9rem 1rem; background: #fafbfc;
  border: 1px solid var(--borde-suave); border-radius: .6rem;
}
.disp-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.disp-restantes { color: var(--ok-texto); font-weight: 700; }
.disp-tarjeta .barra-progreso { margin-top: 0; }
.disp-tarjeta .nota { margin: 0; font-size: .85rem; }
.disp-pie { text-align: right; }
.enlace-detalle {
  padding: 0; font: inherit; font-size: .85rem; color: var(--boton-azul);
  background: none; border: 0; cursor: pointer;
}
.enlace-detalle:hover { text-decoration: underline; }
.enlace-detalle:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }

/* Ventana emergente de detalle. El relleno va en .dialogo-cuerpo (no en el <dialog>) para que un
   clic fuera de la ventana llegue al propio <dialog> y se pueda cerrar. */
dialog.dialogo-detalle {
  width: min(42rem, calc(100vw - 2rem)); padding: 0; color: var(--texto);
  background: var(--superficie); border: 0; border-radius: .8rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
dialog.dialogo-detalle::backdrop { background: rgba(15, 35, 56, .55); }
.dialogo-cuerpo { position: relative; padding: 1.5rem 1.75rem 1.75rem; }
.dialogo-titulo { display: flex; align-items: center; gap: .7rem; margin: 0 2rem 1rem 0; font-size: 1.2rem; }
.dialogo-cerrar {
  position: absolute; top: .6rem; right: .9rem; padding: 0 .3rem;
  font-size: 1.7rem; line-height: 1.2; color: var(--texto-suave);
  background: none; border: 0; cursor: pointer;
}
.dialogo-cerrar:hover { color: var(--texto); }
.dialogo-cerrar:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.dialogo-vacio { margin: 1.5rem 0 .5rem; text-align: center; color: var(--texto-suave); }

/* "Solicitar": tarjeta de días disponibles con una barra por situación, bajo el formulario. */
.disp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.disp-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .3rem 1rem; }
.disp-fila .barra-progreso { margin-top: 0; }
.disp-fila-nombre { grid-column: 1 / -1; margin: -.3rem 0 0; font-size: .85rem; }

/* Tarjetas apiladas (p. ej. Solicitar + Días disponibles): separación entre ellas. */
.tarjeta + .tarjeta { margin-top: 1.5rem; }

/* Solicitar · Rango de fechas: casillas de servicio en forma de botón (como en la app anterior) y
   barra de resumen con el nº de días. */
.chips-servicios { display: flex; flex-wrap: wrap; align-items: stretch; gap: .6rem; }
.chips-grupo { display: contents; }
.chip-opcion {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  padding: .55rem .8rem; font-size: .9rem; font-weight: 400;
  background: var(--superficie); border: 1px solid var(--borde-campo); border-radius: .5rem; cursor: pointer;
}
.chip-opcion:hover { background: #f3f6fa; }
.chip-opcion input { margin: 0; }
.chip-opcion:has(input:checked) { border-color: var(--boton-azul); background: #eaf2fb; }
.chip-opcion:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 2px; }
.chip-dia-completo { padding: .8rem 1.1rem; font-size: 1rem; font-weight: 700; }
.chips-inactivos .chip-opcion { opacity: .45; cursor: not-allowed; }
.resumen-rango { margin: 1rem 0 1.1rem; padding: .7rem 1rem; font-size: .95rem; background: #eef2f7; border-radius: .5rem; }

/* Solicitar · Horas acumuladas: saldo de la bolsa y campos en dos columnas. */
.saldo-bolsa {
  display: flex; align-items: baseline; gap: .9rem; margin: 0 0 1.1rem; padding: .9rem 1.1rem;
  background: #eaf2fb; border-radius: .5rem; color: var(--texto-suave);
}
.saldo-cifra { font-size: 1.9rem; font-weight: 700; color: var(--ok-texto); }
.saldo-cifra.saldo-negativo { color: var(--error-borde); }

/* Filas de campos seguidas (fecha+servicio, hora inicio+fin...) y bloques que las siguen: separación
   vertical, que .campos-en-linea no da por sí sola. */
.campos-en-linea + .campos-en-linea,
.campos-en-linea + .campo,
.campos-en-linea + .saldo-bolsa { margin-top: 1.1rem; }
/* Selector de ancho propio (año, mes...), no estirado a todo el ancho. */
.campo-fijo select { width: auto; min-width: 7rem; }

/* Convertir días H en horas: campos con fondo azulado para distinguirlos de la tarjeta blanca */
.form-conversion input, .form-conversion select { background: #fff; border-color: #9db7d3; }

/* Cuadrante: selectores de mes/año/grupo con un fondo azul suave; D de descanso en la leyenda dentro de un recuadro */
.filtro-cuadrante select { background-color: #eaf1f9; border-color: #aec3d9; }
.leyenda-cuadrante .leyenda-descanso { opacity: 1; background: #fff; border: 1px solid #aec3d9; color: var(--texto-suave); font-weight: 700; box-sizing: border-box; }

/* Tipos de servicio / situaciones dados de baja: la fila se ve atenuada en vez de llevar una columna de estado */
.tabla-datos tr.fila-inactiva td { opacity: .5; }
.tabla-datos tr.fila-inactiva td:last-child { opacity: 1; }

/* Subtarjetas (Mis días: convertir, historial, días restantes...): fondo azul suave para distinguirlas de la tarjeta blanca */
.subtarjeta { background: #eaf1f9; border-color: #c2d3e6; }
.subtarjeta .tabla-envoltorio { background: var(--superficie); }

/* Servicios extraordinarios: acciones de la tarjeta, a la derecha de la línea de datos/voluntarios. */
.srv-filtros { margin-bottom: 1.4rem; }
.srv-acciones { display: flex; flex: 1 1 100%; gap: .6rem; align-items: center; }
.srv-acciones-fila { flex: 1 1 auto; }
.srv-acciones .srv-acciones-fila + .boton { margin-left: 0; }
.srv-acciones-fila { display: flex; gap: .6rem; align-items: center; margin: 0; }
.srv-acciones-fila input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; margin: 0; }
.srv-acciones .boton:hover { filter: brightness(1.1); }
.srv-acciones .boton { flex: none; white-space: nowrap; }
.srv-estado-apuntado { margin: 0; }
@media (max-width: 640px) { .srv-acciones { flex-wrap: wrap; } .srv-acciones-fila { flex: 1 1 100%; flex-wrap: wrap; } .srv-acciones-fila input[type="text"] { width: 100%; } }

/* Gestionar servicio: cabecera con el color del tipo, datos tintados y bloque de voluntarios */
.srv-gestion-cabecera { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-radius: .6rem; color: #fff; margin: .5rem 0 1rem; }
.srv-gestion-cabecera h2 { margin: 0; color: #fff; font-size: 1.25rem; }
.srv-gestion-datos .dato-resumen { background: #eaf1f9; border-color: #c2d3e6; }
.srv-gestion-datos .dato-resumen .num-grande { color: #12395f; }
.srv-gestion-voluntarios { background: #eaf1f9; border: 1px solid #c2d3e6; border-radius: .6rem; padding: .8rem 1rem; margin: 1rem 0; }
.srv-gestion-voluntarios .tabla-envoltorio { background: var(--superficie); }
.srv-gestion-voluntarios h3 { margin-top: 0; }

/* Servicios: bloques plegables por mes/año y zona de anular/eliminar */
.srv-mes { margin: .6rem 0 1rem; }
.srv-mes > summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; padding: .5rem .8rem; background: #eaf1f9; border: 1px solid #c2d3e6; border-radius: .5rem; margin-bottom: .8rem; }
.subtarjeta-peligro { background: #fbeeee; border-color: #e3bcbc; }
.subtarjeta-peligro .campo input { background: #fff; }

/* Tablón, fase 1: categoría, evento, confirmación de lectura, color de cabecera */
.anuncio-categoria { display: inline-block; padding: .05rem .5rem; border-radius: .3rem; font-size: .76rem; font-weight: 600; background: rgba(255,255,255,.7); color: #1c3552; border: 1px solid rgba(0,0,0,.12); }
.anuncio-evento { padding: .45rem .9rem; font-size: .92rem; font-weight: 600; background: #eaf1f9; border-bottom: 1px solid var(--borde); }
.anuncio-confirmacion { padding: .45rem .9rem; font-size: .88rem; background: #fff4de; color: #7a5200; border-bottom: 1px solid var(--borde); }
.anuncio-confirmacion.anuncio-confirmado { background: #e7f5ec; color: #1d6b43; }
.anuncio-progreso { display: flex; align-items: center; gap: .7rem; padding: .4rem .9rem; font-size: .82rem; color: var(--texto-suave); border-bottom: 1px solid var(--borde); }
.barra-progreso { flex: 1; height: .5rem; background: #e3e8ee; border-radius: .3rem; overflow: hidden; }
.barra-progreso-relleno { display: block; height: 100%; background: #2e8b57; }
.anuncio-quien { padding: .4rem .9rem; font-size: .85rem; border-top: 1px solid var(--borde); }
.anuncio-quien summary { cursor: pointer; color: var(--texto-suave); }
.anuncio-quien-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: .5rem; }
.anuncio-quien ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.selector-color { display: flex; align-items: center; gap: .7rem; }
.selector-color input[type="color"] { width: 3rem; height: 2.2rem; padding: .1rem; }
.lista-categorias { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lista-categorias li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .7rem; background: #eaf1f9; border: 1px solid #c2d3e6; border-radius: .5rem; }
.lista-categorias li.categoria-inactiva { opacity: .55; }
.lista-categorias form { margin: 0; }
.barra-pct-0 { width: 0%; }
.barra-pct-5 { width: 5%; }
.barra-pct-10 { width: 10%; }
.barra-pct-15 { width: 15%; }
.barra-pct-20 { width: 20%; }
.barra-pct-25 { width: 25%; }
.barra-pct-30 { width: 30%; }
.barra-pct-35 { width: 35%; }
.barra-pct-40 { width: 40%; }
.barra-pct-45 { width: 45%; }
.barra-pct-50 { width: 50%; }
.barra-pct-55 { width: 55%; }
.barra-pct-60 { width: 60%; }
.barra-pct-65 { width: 65%; }
.barra-pct-70 { width: 70%; }
.barra-pct-75 { width: 75%; }
.barra-pct-80 { width: 80%; }
.barra-pct-85 { width: 85%; }
.barra-pct-90 { width: 90%; }
.barra-pct-95 { width: 95%; }
.barra-pct-100 { width: 100%; }

/* Tablón, fases 2 y 3: encuestas, adjuntos, vistas */
.selector-vista { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.anuncio-adjunto { padding: .5rem .9rem; border-top: 1px dashed var(--borde); }
.encuesta { margin: 0 .9rem .9rem; padding: .7rem .9rem; background: #f4f7fb; border: 1px solid #c2d3e6; border-radius: .5rem; }
.encuesta-pregunta { margin: 0 0 .5rem; font-weight: 700; }
.encuesta-opcion { margin: 0 0 .35rem; }
.encuesta-boton { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr 4.2rem; align-items: center; gap: .7rem; width: 100%; padding: .4rem .7rem; background: #fff; border: 1px solid var(--borde); border-radius: .4rem; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.encuesta-boton:hover { border-color: #5b9ae0; }
.encuesta-mia .encuesta-boton { background: #eaf1f9; border-color: #5b9ae0; font-weight: 600; }
.encuesta-pct { text-align: right; font-size: .85rem; }
.encuesta-votantes { display: block; margin: .15rem 0 0 .7rem; font-size: .78rem; }
.lista-anuncios.mural { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); align-items: start; }
.linea-tiempo { list-style: none; margin: 0 0 1.5rem; padding: 0 0 0 1.4rem; border-left: 3px solid #c2d3e6; }
.linea-item { position: relative; margin: 0 0 1.1rem; padding-left: .8rem; }
.linea-punto { position: absolute; left: -2.05rem; top: .25rem; width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px #c2d3e6; }
.linea-fecha { font-weight: 700; font-size: .9rem; color: #12395f; }
.linea-contenido p { margin: .2rem 0; }

/* Tablón: anuncios con el color de su tipo (de servicio, o de aviso/información/urgente) */
.anuncio { --color-anuncio: #1a6fc4; border: 1px solid var(--color-anuncio); border-left: 6px solid var(--color-anuncio); }
.cab-t-info { --color-anuncio: #1a6fc4; }
.cab-t-aviso { --color-anuncio: #d98c00; }
.cab-t-urgente { --color-anuncio: #c62828; }
.anuncio .anuncio-cabecera { background: var(--color-anuncio); color: #fff; border-bottom: 0; }
.anuncio .anuncio-cabecera .anuncio-tipo { background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .5); }
.anuncio .anuncio-cabecera .anuncio-fija { color: #fff; }
.anuncio .anuncio-pie { background: color-mix(in srgb, var(--color-anuncio) 10%, #fff); }
.anuncio.anuncio-no-leido { border-left-color: var(--color-anuncio); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-anuncio) 35%, transparent), 0 2px 8px rgba(15, 35, 56, .12); }
.linea-item .linea-punto { background: var(--color-anuncio, #1a6fc4); }

/* Tablón: zona de publicación, separada y con color */
.panel-publicar { margin-top: 2.5rem; padding: 0; overflow: hidden; border: 2px solid #1a6fc4; box-shadow: 0 6px 20px rgba(15, 35, 56, .18); }
.publicar-banda { padding: 1.1rem 1.6rem; color: #fff; background: linear-gradient(100deg, #16293d 0%, #1a6fc4 100%); }
.publicar-banda h2 { margin: 0; color: #fff; font-size: 1.35rem; }
.publicar-banda p { margin: .2rem 0 0; opacity: .85; font-size: .9rem; }
.publicar-form { display: flex; flex-direction: column; gap: 1.1rem; padding: 1.4rem 1.6rem 1.6rem; }
.panel { --p: #1a6fc4; --t: #eaf2fb; margin: 0; padding: .9rem 1.2rem 1.2rem; border: 1px solid var(--p); border-left: 6px solid var(--p); border-radius: .7rem; background: var(--t); min-width: 0; }
.panel legend { padding: .15rem .8rem; border-radius: .4rem; background: var(--p); color: #fff; font-weight: 700; font-size: .95rem; }
.panel .campo { margin-bottom: .9rem; }
.panel .campo:last-child { margin-bottom: 0; }
.panel :is(input[type="text"], input[type="date"], input[type="time"], select, textarea) { background: #fff; border-color: var(--p); }
.panel-azul { --p: #1a6fc4; --t: #eaf2fb; }
.panel-ambar { --p: #d98c00; --t: #fff6e3; }
.panel-morado { --p: #7b1fa2; --t: #f5eaf9; }
.panel-verde { --p: #2e8b57; --t: #e7f5ec; }
.panel-turquesa { --p: #00838f; --t: #e2f4f6; }
.panel-naranja { --p: #e65100; --t: #fdeee3; }
.casillas { display: flex; flex-wrap: wrap; gap: .7rem; }
.casilla { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem; font-weight: 500; cursor: pointer; background: #fff; border: 1px solid var(--borde-campo); border-radius: .5rem; }
.casilla input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; }
.selector-color { flex-wrap: wrap; }
.selector-color > label:first-child { font-weight: 600; }
.boton-publicar { width: 100%; padding: 1rem 1.2rem; font-size: 1.08rem; font-weight: 700; color: #fff; background: linear-gradient(100deg, #1f8a5e, #2e9d5f); border-color: #187049; box-shadow: 0 3px 10px rgba(31, 138, 94, .35); }
.boton-publicar:hover { background: linear-gradient(100deg, #187049, #26844f); }
.panel-publicar > details, .panel-publicar > .panel-archivados { margin: 0 1.6rem 1.6rem; }

/* Formulario de publicar: todos los campos de una fila a la misma altura y alineados arriba */
.panel .campos-en-linea { align-items: flex-start; }
.panel .campo > label { display: block; margin-bottom: .35rem; }
.panel :is(select, input[type="date"], input[type="time"], input[type="text"]) { height: 3.1rem; box-sizing: border-box; }

/* Tablón: búsqueda, historial y destinatarios */
.filtro-tablon { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.2rem; padding: .7rem .9rem; background: #eaf1f9; border: 1px solid #c2d3e6; border-radius: .6rem; }
.filtro-tablon input[type="search"] { flex: 1 1 14rem; min-width: 0; margin: 0; background: #fff; }
.filtro-tablon select { flex: 0 1 15rem; margin: 0; background: #fff; }
.historial-item { margin: 0 0 .5rem; padding: .4rem .8rem; background: #fff; border: 1px solid var(--borde-suave); border-radius: .5rem; }
.historial-item > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.historial-cuerpo { margin: .6rem 0; white-space: pre-line; }
.panel-rosa { --p: #c2185b; --t: #fdebf3; }

/* Mis horas extra (réplica de CuadrantePL) */
.he-anio { margin-left: auto; align-items: center; }
.he-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.he-tarjeta { border-radius: .6rem; padding: .7rem .9rem; color: var(--texto, #1f2d3d); background: #f3f6f9; border: 1px solid #dde5ec; border-left: 5px solid #90a4ae; }
.he-cifra { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.he-rotulo { display: block; font-size: .82rem; color: var(--texto-suave, #5a6b7b); }
.he-total { background: #e8f0fa; border-color: #c9daf0; border-left-color: #1565c0; }
.he-tipo-servicio_extraordinario { background: #f6f0fa; border-color: #e5d8ef; border-left-color: #8e5bb0; }
.he-tipo-prolongacion { background: #fdf4ea; border-color: #f3e0c9; border-left-color: #d98a3d; }
.he-tipo-juicio { background: #fbefef; border-color: #efd5d5; border-left-color: #c46a6a; }
.he-tipo-formacion { background: #eff7f0; border-color: #d6e8d8; border-left-color: #5f9e66; }
.he-tipo-evento { background: #ecf6f7; border-color: #d1e6e9; border-left-color: #4f9aa3; }
.he-superfestivos { background: #fff8e1; border: 1px solid #ffe082; border-radius: .6rem; padding: .7rem .9rem; margin-bottom: 1rem; }
.he-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.he-chip { background: #fff; border: 1px solid #ffca28; border-radius: 1rem; padding: .15rem .65rem; font-size: .85rem; }
.he-chip b { color: #e65100; }
.he-fila-total td { font-weight: 700; background: var(--superficie); border-top: 2px solid var(--borde); }
.cabecera-lista .he-anio { flex-wrap: nowrap; align-items: center; gap: .5rem; margin-top: 0; }
.he-anio label { margin: 0; white-space: nowrap; }
.he-anio select { width: auto; min-width: 5.5rem; margin: 0; }
.he-anio .boton { margin: 0; white-space: nowrap; }

/* Días superfestivos (réplica de CuadrantePL) */
.sf-aviso { background: #fff1e0; border: 1px solid #f6d3a8; border-left: 5px solid #e65100; border-radius: .6rem; padding: .7rem 1rem; margin-bottom: 1rem; }
.sf-aviso p { margin: .25rem 0; }
.sf-aviso-rojo { color: #b71c1c; font-weight: 700; }
.sf-aviso-compacto { margin: 1rem 0; border-left-width: 1px; color: #bf4a00; }
.sf-aviso-compacto p { margin: .4rem 0; }
.sf-anio { flex-wrap: nowrap; align-items: center; gap: .5rem; }
.sf-anio select, .sf-generar select { width: auto; min-width: 5.5rem; }
.sf-generar { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); align-items: center; flex-wrap: nowrap; }
.sf-horas { display: inline-block; background: #e65100; color: #fff; font-weight: 700; border-radius: 1rem; padding: .1rem .65rem; }
.sf-tipo { display: inline-block; border-radius: 1rem; padding: .05rem .6rem; font-size: .8rem; }
.sf-tipo-fijo { background: #e3f1fd; color: #1c4f82; }
.sf-tipo-variable { background: #f3e5f5; color: #7b1fa2; }
.campo-corto input { width: 7rem; }
.permuta-turnos { margin-bottom: 1rem; }
.permuta-turnos .subtarjeta { margin: 0; height: 100%; }
.permutas-listados { margin-top: 1rem; }

/* Mis estadísticas */
.est-anio { flex-wrap: nowrap; align-items: center; gap: .5rem; margin-top: 0; }
.est-anio label { margin: 0; }
.est-anio select { width: auto; min-width: 5.5rem; margin: 0; }
.est-anio .boton { margin: 0; white-space: nowrap; }
.est-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.est-kpi { position: relative; border-radius: .6rem; padding: .65rem .85rem .65rem 2.6rem; background: #f3f6f9; border: 1px solid #dde5ec; border-left: 5px solid #90a4ae; }
.est-kpi .num-grande { display: block; font-size: 1.45rem; white-space: nowrap; font-weight: 700; line-height: 1.2; }
.est-kpi .rotulo { display: block; font-size: .8rem; color: var(--texto-suave, #5a6b7b); }
.est-kpi-icono { position: absolute; left: .65rem; top: .7rem; font-size: 1.2rem; }
.est-kpi-azul { background: #e8f0fa; border-color: #c9daf0; border-left-color: #1565c0; }
.est-kpi-verde { background: #eff7f0; border-color: #d6e8d8; border-left-color: #5f9e66; }
.est-kpi-lila { background: #f6f0fa; border-color: #e5d8ef; border-left-color: #8e5bb0; }
.est-kpi-naranja { background: #fdf4ea; border-color: #f3e0c9; border-left-color: #d98a3d; }
.est-kpi-turquesa { background: #ecf6f7; border-color: #d1e6e9; border-left-color: #4f9aa3; }
.est-kpi-ambar { background: #fff8e1; border-color: #f3e3a8; border-left-color: #e0a43a; }
.est-barra-mes { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: 1; min-width: 2rem; }
.est-barra-valor { font-size: .8rem; font-weight: 700; min-height: 1.1rem; }
.est-barra-pila { width: 100%; max-width: 3rem; height: 8rem; display: flex; flex-direction: column-reverse; justify-content: flex-start; border-radius: .3rem .3rem 0 0; overflow: hidden; background: rgba(15, 35, 56, .06); }
.est-barra-m, .est-relleno-m { background: #4f86c6; }
.est-barra-t, .est-relleno-t { background: #e0a43a; }
.est-barra-n, .est-relleno-n { background: #546e7a; }
.est-leyenda { margin-top: .4rem; }
.est-resumen-turnos { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .8rem; margin: .6rem 0; }
.est-lista-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.est-fila-cab { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .92rem; }
.est-lista-barras .barra-progreso { margin-top: .25rem; }
.est-lista-barras .barra-progreso-relleno { background: #4f86c6; }
.est-fila-total { border-top: 1px solid var(--borde); padding-top: .5rem; }
.est-solicitudes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.est-sol { border-radius: 1rem; padding: .2rem .8rem; font-size: .88rem; }
.est-sol-ok { background: #e3f3e6; color: #25693a; }
.est-sol-pend { background: #fff3cd; color: #7a5a00; }
.est-sol-no { background: #fbe4e4; color: #9a2b2b; }
.est-sol-cancel { background: #eceff1; color: #455a64; }
@media (min-width: 62rem) { .est-kpis { grid-template-columns: repeat(4, 1fr); } }
.est-comparativa td, .est-comparativa th { vertical-align: top; }
.est-comparativa .barra-progreso { margin-top: .3rem; }
.est-comparativa .barra-progreso-relleno { background: #4f86c6; }
.est-cmp-actual { background: #e8f0fa; }
.est-delta { display: block; font-size: .75rem; }
.est-delta-sube { color: #25693a; }
.est-delta-baja { color: #9a2b2b; }
.est-grafico-corto .est-barra-pila-corta { height: 5.5rem; }
.est-barra-he { background: #5f9e66; width: 100%; }

/* Portada: módulos más grandes y vistosos */
.rejilla-modulos { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.tarjeta-modulo {
  --acento: #90a4ae;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icono titulo" "icono desc" "icono estado";
  column-gap: 1rem;
  row-gap: .15rem;
  align-items: center;
  text-align: left;
  padding: 1.1rem 1.1rem 1.1rem 1.25rem;
  background: linear-gradient(135deg, var(--superficie) 60%, color-mix(in srgb, var(--acento) 12%, var(--superficie)));
  border: 1px solid var(--borde);
  border-left: 6px solid var(--acento);
  border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(15, 35, 56, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.tarjeta-modulo:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(15, 35, 56, .15); border-color: var(--acento); }
.tarjeta-modulo .modulo-icono { grid-area: icono; width: 4.4rem; height: 4.4rem; border-radius: 1rem; background: color-mix(in srgb, var(--acento) 16%, #fff); }
.tarjeta-modulo .modulo-icono svg { width: 2.5rem; height: 2.5rem; }
.tarjeta-modulo.activo .modulo-icono { background: color-mix(in srgb, var(--acento) 16%, #fff); }
.tarjeta-modulo .modulo-titulo { grid-area: titulo; font-size: 1.12rem; align-self: end; }
.tarjeta-modulo .modulo-desc { grid-area: desc; font-size: .84rem; color: var(--texto-suave); line-height: 1.3; }
.tarjeta-modulo .estado-modulo { grid-area: estado; margin-top: .3rem; justify-self: start; padding: .1rem .55rem; border-radius: 1rem; font-size: .7rem; }
.tarjeta-modulo .estado-operativo { background: #e3f3e6; color: #25693a; }
.tarjeta-modulo .estado-proximamente { background: #eceff1; color: #546e7a; }
.mod-cuadrante { --acento: #d98c00; }
.mod-tablon { --acento: #3f7cc0; }
.tarjeta-modulo.proximamente { opacity: .75; border-left-style: dashed; background: var(--superficie); }
.tarjeta-modulo.proximamente .modulo-icono { background: #eef2f5; }
.rejilla-modulos-chica { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tarjeta-modulo-chica { display: block; --acento: #3f5b76; }
.tarjeta-modulo-chica .modulo-cuerpo { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: center; padding: .9rem 1.1rem; }
.tarjeta-modulo-chica .admin-icono { grid-row: 1 / 3; font-size: 1.6rem; width: 2.8rem; height: 2.8rem; display: flex; align-items: center; justify-content: center; border-radius: .7rem; background: color-mix(in srgb, var(--acento) 14%, #fff); }
.tarjeta-modulo-chica .modulo-titulo { grid-area: auto; font-size: 1rem; }
.tarjeta-modulo-chica .nota { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .tarjeta-modulo { transition: none; } a.tarjeta-modulo:hover { transform: none; } }
.rejilla-modulos { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.tarjeta-modulo .estado-modulo { white-space: nowrap; display: inline-block; }
.tarjeta-modulo-chica .modulo-titulo { align-self: end; }
.tarjeta-modulo-chica .nota { align-self: start; }
.tarjeta-modulo .modulo-icono svg { width: 3rem; height: 3rem; }
.tarjeta-modulo.proximamente .modulo-icono svg { filter: grayscale(.7); opacity: .85; }
.tarjeta-modulo-chica .admin-icono svg { width: 1.9rem; height: 1.9rem; }
.tarjeta-modulo-chica .admin-icono { width: 3.2rem; height: 3.2rem; }

/* Zona de administrador: la etiqueta es un sello (no un botón) y la barra se distingue de lejos */
.barra-nav-admin {
  border-left: 0;
  padding-left: 0;
  background: linear-gradient(90deg, #5fb383, var(--admin-fondo, #6fbf8b) 30%);
  box-shadow: 0 4px 12px rgba(15, 35, 56, .2), inset 0 -3px 0 rgba(27, 67, 50, .35);
  overflow: visible;
}
.barra-nav-admin-titulo {
  display: inline-flex; align-items: center; gap: .35rem; align-self: stretch;
  margin: 0 .4rem 0 0; padding: .25rem 1.3rem .25rem .75rem;
  background: #1b4332; color: #fff; font-size: .66rem; letter-spacing: .1em;
  border-radius: .5rem 0 0 .5rem;
  clip-path: polygon(0 0, calc(100% - .7rem) 0, 100% 50%, calc(100% - .7rem) 100%, 0 100%);
  cursor: default; user-select: none; pointer-events: none;
}
.barra-nav-admin-titulo::before { content: "🛡"; font-size: .85rem; letter-spacing: 0; }
.barra-nav-admin-enlace { color: rgba(15, 35, 56, .9); text-decoration: none; font-weight: 700; padding: .2rem .5rem; border-radius: .3rem; font-size: .8rem; }
.barra-nav-admin-enlace:hover { background: rgba(15, 35, 56, .1); }
.barra-nav-admin-enlace[aria-current="page"] { background: rgba(15, 35, 56, .15); box-shadow: inset 0 -2px 0 #1b4332; }

/* Dashboard de administración */
.dash-fecha { margin: .1rem 0 0; }
.dash-alerta { background: #fdecec; border: 1px solid #efc3c3; border-left: 6px solid #c0392b; border-radius: .7rem; padding: .8rem 1.1rem; margin-bottom: 1rem; }
.dash-alerta h3 { margin: 0 0 .5rem; color: #a8281c; font-size: 1.05rem; }
.dash-alerta ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
.dash-ok { background: #e8f5ea; border: 1px solid #c9e4cd; border-left: 6px solid #5f9e66; border-radius: .7rem; padding: .65rem 1.1rem; margin: 0 0 1rem; color: #25693a; font-weight: 600; }
.dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.dash-kpi { display: block; text-decoration: none; color: inherit; border-radius: .6rem; padding: .65rem .85rem; background: #f3f6f9; border: 1px solid #dde5ec; border-left: 5px solid #90a4ae; }
a.dash-kpi:hover { box-shadow: 0 4px 12px rgba(15, 35, 56, .12); transform: translateY(-1px); }
.dash-kpi .num-grande { display: block; font-size: 1.6rem; font-weight: 700; line-height: 1.15; }
.dash-kpi .rotulo { display: block; font-size: .8rem; color: var(--texto-suave, #5a6b7b); }
.dash-kpi-verde { background: #eff7f0; border-color: #d6e8d8; border-left-color: #5f9e66; }
.dash-kpi-turquesa { background: #ecf6f7; border-color: #d1e6e9; border-left-color: #4f9aa3; }
.dash-kpi-azul { background: #e8f0fa; border-color: #c9daf0; border-left-color: #1565c0; }
.dash-kpi-lila { background: #f6f0fa; border-color: #e5d8ef; border-left-color: #8e5bb0; }
.dash-kpi-ambar { background: #fff8e1; border-color: #f3e3a8; border-left-color: #e0a43a; }
.dash-cobertura td, .dash-cobertura th { text-align: center; white-space: nowrap; }
.dash-cobertura td:first-child, .dash-cobertura th:first-child { text-align: left; }
.dash-hoy { background: rgba(224, 164, 58, .12); }
.dash-celda { display: inline-block; border-radius: .4rem; padding: .05rem .5rem; font-size: .82rem; font-weight: 700; margin: .1rem; }
.dash-celda-ok { background: #e3f3e6; color: #25693a; }
.dash-celda-baja { background: #fbe4e4; color: #9a2b2b; box-shadow: inset 0 0 0 1px #e3a5a5; }
.dash-grupo { margin: .6rem 0 .2rem; font-weight: 700; }
.dash-agentes, .dash-lista { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: .3rem; }
.dash-agentes li { display: flex; align-items: center; gap: .4rem; background: var(--superficie, #fff); border-radius: .4rem; padding: .25rem .5rem; }
.dash-lista li { background: var(--superficie, #fff); border-radius: .4rem; padding: .3rem .55rem; }
.dash-turno { display: inline-block; min-width: 1.5rem; text-align: center; border-radius: .3rem; padding: .02rem .3rem; font-size: .75rem; font-weight: 700; color: #fff; background: #78909c; }
.dash-cuenta { display: inline-block; margin-left: .3rem; background: #1b4332; color: #fff; border-radius: 1rem; padding: 0 .55rem; font-size: .78rem; }
.dash-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: .4rem 1.2rem; }

/* Dashboard: acciones, horizonte, franjas, ficha de hueco, impacto, antigüedad, hoja semanal */
.dash-acciones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.dash-titulo-con-acciones { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.dash-titulo-con-acciones h3 { margin: 0; }
.dash-horizonte { display: inline-flex; gap: .25rem; background: #e3eaf1; border-radius: 1rem; padding: .15rem; }
.dash-pastilla { text-decoration: none; color: #38506a; font-size: .82rem; font-weight: 600; padding: .15rem .7rem; border-radius: 1rem; }
.dash-pastilla[aria-current="true"] { background: #1b3a5c; color: #fff; }
.dash-compacta td, .dash-compacta th { padding-left: .25rem; padding-right: .25rem; font-size: .78rem; }
.dash-compacta .dash-celda { padding: .05rem .3rem; font-size: .74rem; }
.dash-franjas-cab td { background: transparent; padding-top: .8rem; }
.dash-franja td { background: #f3f6f9; font-weight: 600; }
.dash-alerta-cab { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.dash-alerta-cab h3 { margin: 0; }
.dash-alerta-cab .nota { margin: .1rem 0 0; }
.dash-alerta-icono { font-size: 1.6rem; line-height: 1; }
.dash-alerta-dia { margin-top: .7rem; }
.dash-alerta-dia h4 { margin: 0 0 .3rem; font-size: .95rem; color: #7a2a21; text-transform: capitalize; }
.dash-alerta-hoy { background: #c0392b; color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .45rem; border-radius: 99px; margin-left: .4rem; vertical-align: middle; }
.dash-alerta-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.dash-alerta-item { background: #fff; border: 1px solid #efc3c3; border-radius: .55rem; padding: .5rem .75rem; }
.dash-alerta-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; }
.dash-alerta-grupo { background: #1f3a5f; color: #fff; font-weight: 700; padding: .1rem .55rem; border-radius: .4rem; }
.dash-alerta-franja { font-weight: 600; min-width: 6.5rem; }
.dash-alerta-cifra { background: #fde8c8; color: #8a4b00; padding: .1rem .55rem; border-radius: .4rem; }
.dash-alerta-cifra.dash-alerta-cero { background: #c0392b; color: #fff; }
.dash-alerta-texto { color: #6b2a22; font-size: .92rem; }
.dash-alerta-ver { margin-left: auto; }
.dash-alerta-item .dash-ficha { margin-top: .35rem; }
@media (max-width: 600px) { .dash-alerta-ver { margin-left: 0; } .dash-alerta-franja { min-width: 0; } }
.dash-cargo { background: #fde8c8; color: #8a4b00; font-size: .75rem; font-weight: 700; padding: .05rem .45rem; border-radius: 99px; margin-left: .4rem; }
.dash-ficha { margin-top: .25rem; font-size: .92rem; }
.dash-ficha summary { cursor: pointer; color: #8a2a20; font-weight: 600; }
.dash-ficha p { margin: .3rem 0; }
.dash-edad { display: inline-block; border-radius: .8rem; padding: 0 .5rem; font-size: .74rem; font-weight: 700; margin-left: .3rem; }
.dash-edad-suave { background: #eceff1; color: #546e7a; }
.dash-edad-ambar { background: #fff3cd; color: #8a6100; }
.dash-edad-roja { background: #fbe4e4; color: #9a2b2b; }
.dash-impacto { display: inline-block; background: #fff3cd; color: #7a4f00; border: 1px solid #f0d58a; border-radius: .4rem; padding: 0 .45rem; font-size: .76rem; font-weight: 600; margin-left: .3rem; }
.dash-impacto-cuenta { display: inline-block; margin-left: .3rem; background: #fff3cd; color: #7a4f00; border-radius: 1rem; padding: 0 .55rem; font-size: .76rem; font-weight: 700; }
.dash-ausencia { align-items: flex-start; }
.dash-dia-hoja { break-inside: avoid; margin-bottom: .6rem; }
.dash-dia-hoja h4 { margin: .6rem 0 .1rem; }
@media print {
  .dash-semana .dash-grupos { grid-template-columns: repeat(3, 1fr); }
  .dash-semana .dash-agentes li { padding: .05rem .3rem; font-size: .8rem; }
  .dash-semana .dash-dia-hoja { page-break-inside: avoid; }
}

/* Gestión de horas acumuladas */
.ha-rejilla { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 55rem) { .ha-rejilla { grid-template-columns: 1fr; } }
.ha-saldo-corto { color: #9a2b2b; }
.dash-celda { white-space: nowrap; }
.ha-filtro { background: #fff; border: 1px solid #dde5ec; border-radius: .7rem; padding: .8rem 1rem; margin: 0 0 1.4rem; align-items: end; }
.ha-bloques { display: grid; grid-template-columns: 1fr; gap: 0; }
.ha-anadir { margin-top: 2rem; border: 2px solid #1565c0; border-left-width: 8px; background: #f3f8fe; }
.ha-anadir h3 { color: #0f4c94; }
.ha-anadir .boton-auto { margin-top: 1rem; }

/* Servicios: eventos (agrupan servicios de varios días), plazas, ayuda */
.srv-ayuda { margin: -.6rem 0 1.2rem; }
.srv-cabecera-dentro { background: #eef3f8; color: #1b3a5c; border-bottom: 1px solid #d5e0ea; }
.srv-plazas { font-weight: 600; }
.srv-plazas-falta { color: #8a5a00; }
.srv-plazas-ok { color: #25693a; }
.evt-tarjeta { border: 1px solid var(--borde, #d5e0ea); border-radius: .7rem; margin-bottom: 1.2rem; overflow: hidden; background: #fff; }
.evt-resumen { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.evt-resumen::-webkit-details-marker { display: none; }
.evt-resumen::before { content: "▸"; font-size: 1.1rem; }
.evt-tarjeta[open] > .evt-resumen::before { content: "▾"; }
.evt-datos { font-size: .88rem; opacity: .95; }
.evt-cuerpo { padding: .8rem 1rem 1rem; }
.evt-dia { margin-top: 1rem; }
.evt-dia-cabecera { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .45rem .8rem; background: #1b3a5c; color: #fff; border-radius: .5rem .5rem 0 0; }
.evt-dia-form { margin: 0; }
.evt-dia .srv-tarjeta { border-radius: 0; margin-bottom: 0; border-top: 0; }
.evt-dia .srv-tarjeta:last-child { border-radius: 0 0 .5rem .5rem; }
.evt-dia .srv-cabecera { border-radius: 0; }
.evt-guia { background: #f3f8fe; border-color: #cfe0f3; }
.evt-pasos { margin: .6rem 0 0; padding-left: 1.3rem; display: grid; gap: .2rem; }
.evt-publicar { margin-top: .8rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.evt-gestion-fechas { margin: .2rem 0 0; color: #fff; opacity: .95; }
.evt-dia-cuenta { color: #dbe6f1; }
.evt-dia-vacio { margin: 0; padding: .6rem .8rem; border: 1px solid var(--borde, #d5e0ea); border-top: 0; background: #fff; }
.evt-servicio { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .6rem .8rem; border: 1px solid var(--borde, #d5e0ea); border-top: 0; background: #fff; }
.evt-servicio-datos { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.evt-servicio-cifras { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .9rem; }
.evt-anadir { border: 1px dashed #9db6d0; border-radius: 0 0 .5rem .5rem; background: #f7fafd; padding: .5rem .8rem; }
.evt-anadir > summary { cursor: pointer; font-weight: 600; color: #1b3a5c; }
.evt-anadir form { margin-top: .7rem; }
.evt-aviso-evento { background: #f3f8fe; border: 1px solid #cfe0f3; border-radius: .5rem; padding: .6rem .9rem; }
.evt-fechas { align-items: flex-start; }
.evt-nota-fechas { margin: -.4rem 0 1rem; }

/* Editar cuadrante: cada formulario en una sola fila (como en CuadrantePL) cuando hay sitio. */
.fila-edicion .campo { flex: 1 1 8rem; min-width: 0; }
.fila-edicion .campo-fijo { flex: 0 0 auto; }
.fila-edicion select, .fila-edicion input { width: 100%; }

/* Descansos editables en el cuadrante (asignar un servicio ese día): el contorno blanco no se vería. */
.celda-descanso-editable:hover, .celda-descanso-editable:focus-visible { outline: 2px solid #1565c0; outline-offset: -2px; background: #dbe8f7; }

/* Selector de año de una cabecera: desplegable y botón en la misma fila. */
.campos-en-linea.sin-salto { flex-wrap: nowrap; }

/* Avisos al crear servicios y eventos: opción principal y «¿A quién se avisa?» con pastillas de grupo. */
.opcion-destacada { display: flex; gap: .85rem; align-items: flex-start; cursor: pointer; font-weight: 400; }
.opcion-destacada > input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--primario, #1c6fc4); }
.opcion-destacada-texto { display: flex; flex-direction: column; gap: .2rem; }
.opcion-destacada-titulo { font-size: 1.02rem; }
.opcion-destacada-ayuda { display: block; font-size: .88rem; color: var(--texto-suave, #5b6b7d); line-height: 1.4; }
.panel-aviso .aviso-grupos { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--borde); }
.aviso-grupos { border: 0; padding: 0; margin: .8rem 0 0; min-width: 0; }
.aviso-grupos legend { font-weight: 600; padding: 0; margin-bottom: .6rem; }
.aviso-grupos-pastillas { display: flex; flex-wrap: wrap; gap: .5rem; }
.pastilla-grupo { position: relative; cursor: pointer; margin: 0; font-weight: 400; }
.pastilla-grupo input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pastilla-grupo span {
  display: inline-block; padding: .4rem .95rem; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--superficie); font-size: .92rem; transition: background .12s, border-color .12s, color .12s;
}
.pastilla-grupo:hover span { border-color: #1c6fc4; }
.pastilla-grupo input:checked + span { background: #1c6fc4; border-color: #1c6fc4; color: #fff; font-weight: 600; }
.pastilla-grupo input:focus-visible + span { outline: 3px solid rgba(28, 111, 196, .35); outline-offset: 2px; }
.aviso-grupos-resumen { margin: .7rem 0 .2rem; font-size: .92rem; }

/* Página activa de la navegación: bien marcada, no un tono casi igual al resto. */
.barra-nav-pestana[aria-current="page"] {
  background: #fff; color: #16293d; font-weight: 800; border-bottom-color: var(--ambar);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.barra-nav-pestana[aria-current="page"]:hover { background: #fff; color: #16293d; }

.barra-nav-admin-enlace[aria-current="page"] {
  background: #1b4332; color: #fff; box-shadow: 0 2px 6px rgba(15, 35, 56, .35);
}
.barra-nav-admin-enlace[aria-current="page"]:hover { background: #1b4332; }
/* Menú desplegable que contiene la página actual (Gestión, Operaciones, Informes) */
.barra-nav-admin .barra-nav-menu-activo summary {
  background: #1b4332; color: #fff; font-weight: 800; border-radius: .3rem;
  padding: .2rem .55rem; box-shadow: 0 2px 6px rgba(15, 35, 56, .35);
}
.barra-nav-admin .barra-nav-menu-activo summary:hover,
.barra-nav-admin .barra-nav-menu-activo[open] summary { color: #fff; }
/* Enlace de la página actual dentro de la lista desplegada */
.barra-nav-menu-lista a[aria-current="page"] { background: #1b4332; color: #fff; font-weight: 700; }
.barra-nav-menu-lista a[aria-current="page"]::before { content: "● "; font-size: .65em; vertical-align: .15em; }
.barra-nav-admin .barra-nav-menu-lista a[aria-current="page"]:hover { background: #1b4332; }

/* «¿A quién se avisa?»: la pregunta a la izquierda y los grupos a su derecha (en una columna si no cabe). */
.aviso-grupos-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; }
.aviso-grupos-pregunta { font-weight: 700; white-space: nowrap; }
.aviso-grupos-fila .aviso-grupos-pastillas { flex: 1 1 auto; }

/* Límites y arrastres: tabla principal a la izquierda, bolsa de horas en columna lateral. */
.limites-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 62rem) { .limites-layout { grid-template-columns: 1fr; } }
.limites-lateral .subtarjeta { display: block; margin-bottom: 1rem; }
.limites-lateral .subtarjeta h4 { margin: 0 0 .5rem; }
.limites-principal .tabla-datos input[type=number] { width: 5rem; }
.limites-principal input[data-base][readonly] { background: #eef1f4; color: var(--texto-suave); border-style: dashed; }
.fila-seleccionada td { background: #fff4c2; }

/* Equidad: filtros separados del resumen, tarjetas de resumen con color propio. */
.eq-filtros { margin-bottom: 1.5rem; }
.eq-resumen { gap: 1rem; margin-bottom: 1.75rem; }
.eq-resumen .dato-resumen { background: #fff; border: 1px solid #c2d3e6; border-top-width: 4px; border-radius: .6rem; padding: 1rem 1.25rem; text-align: center; box-shadow: 0 1px 3px rgba(18, 57, 95, .1); }
.eq-resumen .dato-resumen:nth-child(1) { border-top-color: #12395f; }
.eq-resumen .dato-resumen:nth-child(2) { border-top-color: #1a6fc4; }
.eq-resumen .dato-resumen:nth-child(3) { border-top-color: #2e7d32; }
.eq-resumen .dato-resumen:nth-child(4) { border-top-color: #e53935; }
.eq-resumen .num-grande { font-size: 2rem; }
.eq-c-total { color: #12395f; } .eq-c-media { color: #1a6fc4; } .eq-c-agentes { color: #2e7d32; } .eq-c-desq { color: #e53935; }

/* Cómputo de horas: cabecera oscura y filas de grupo, como en CuadrantePL. */
.tabla-computo thead th { background: #1b3a5c; color: #fff; padding: .75rem .6rem; }
.tabla-computo tbody tr:not(:has(td[colspan])):hover td { background: #f4f8fc; }
.tabla-computo tbody tr td[colspan] { background: #e8eef6; color: #12395f; padding: .45rem .6rem; }
.tabla-computo tfoot td { background: #e8eef6; border-top: 2px solid #1b3a5c; }

/* Filtros de informes (cómputo, equidad): panel con color y selectores compactos. */
.panel-filtros { background: #eaf1f9; border: 1px solid #c2d3e6; border-left: 5px solid #1a6fc4; border-radius: .6rem; padding: .8rem 1rem; margin-bottom: 1.25rem; align-items: flex-end; }
.panel-filtros .campo { flex: 0 0 11rem; }
.panel-filtros select { width: 100%; background: #fff; }
.boton-pdf { background: #d32f2f; border-color: #d32f2f; color: #fff; }
.boton-pdf:hover { background: #b71c1c; border-color: #b71c1c; }
.tabla-computo + p, .nota-computo { margin-top: .75rem; }
.nota-leyenda { background: #fff8e1; border-left: 4px solid #f2b705; border-radius: .4rem; padding: .6rem .9rem; margin: 0 0 1.25rem; }

/* Informes de administración: pestañas, valores atípicos y botón CSV. */
.informe-pestanas { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; border-bottom: 2px solid #c2d3e6; }
.informe-pestanas a { padding: .5rem 1rem; border-radius: .5rem .5rem 0 0; text-decoration: none; color: #12395f; font-weight: 600; background: #eaf1f9; border: 1px solid #c2d3e6; border-bottom: 0; }
.informe-pestanas a[aria-current="page"] { background: #1b3a5c; color: #fff; border-color: #1b3a5c; }
.informe-pestanas a:hover { background: #d6e4f4; }
.informe-pestanas a[aria-current="page"]:hover { background: #1b3a5c; }
.valor-alto { background: #fde3e1; color: #b71c1c; font-weight: 700; }
.valor-bajo { background: #e0eefc; color: #12569b; font-weight: 700; }
.boton-csv { background: #2e7d32; border-color: #2e7d32; color: #fff; text-decoration: none; display: inline-block; }
.boton-csv:hover { background: #1b5e20; border-color: #1b5e20; }
.etiqueta-accion { display: inline-block; padding: .1rem .5rem; border-radius: .3rem; background: #e3ecf6; color: #12395f; font-size: .85rem; }
td.sin-salto { white-space: nowrap; }
.res-ok { color: #2e7d32; font-weight: 600; }
.res-mal { color: #c62828; font-weight: 600; }

/* Cuadrante: día con algún grupo por debajo de su mínimo (solo lo ve quien gestiona). */

/* ------------------------------------------------------------------
   Módulo Grúa
   ------------------------------------------------------------------ */
.mod-grua { --acento: #c2571b; }
.grua-pestanas, .partes-pestanas { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.1rem; padding: .35rem; background: #fff; border: 1px solid var(--borde-suave); border-radius: .7rem; box-shadow: 0 1px 5px rgba(15, 35, 56, .08); }
.grua-pestanas a, .partes-pestanas a { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .95rem; border-radius: .5rem; text-decoration: none; font-weight: 700; font-size: .92rem; color: var(--tabla-cabecera); background: #eaf1f9; border: 2px solid transparent; }
.grua-pestanas a:hover, .partes-pestanas a:hover { background: #d6e4f4; }
.grua-pestanas a[aria-current="page"], .partes-pestanas a[aria-current="page"] { color: #fff; background: var(--tabla-cabecera); border-color: #0f2338; box-shadow: 0 2px 0 var(--acento); }
.grua-pestanas a.pestana-nuevo, .partes-pestanas a.pestana-nuevo { color: #fff; background: var(--boton-azul); }
.grua-pestanas a.pestana-nuevo[aria-current="page"], .partes-pestanas a.pestana-nuevo[aria-current="page"] { background: var(--boton-azul-oscuro); border-color: #0f2338; }
.grua-pestanas .insignia, .partes-pestanas .insignia { margin-left: .15rem; }
.grua-pestanas a.pestana-herramienta, .partes-pestanas a.pestana-herramienta { margin-left: auto; }
.grua-miga, .partes-miga { margin: 0 0 .5rem; font-size: .85rem; color: var(--texto-suave); }
.grua-miga a, .partes-miga a { color: var(--boton-azul); font-weight: 700; text-decoration: none; }
.grua-miga a:hover, .partes-miga a:hover { text-decoration: underline; }

.etiqueta-deposito { color: #12395f; background: #dbe9f7; border: 1px solid #3f7cc0; }
.etiqueta-entregado { color: var(--ok-borde); background: var(--ok-fondo); border: 1px solid var(--ok-borde); }
.etiqueta-interrumpida { color: #4a5a6a; background: #eceff1; border: 1px solid #90a4ae; }
.etiqueta-vencido { color: #fff; background: var(--error-borde); }
.etiqueta-aviso-plazo { color: var(--ambar-oscuro); background: var(--ambar); }
.etiqueta-alegaciones { color: #4a148c; background: #f3e5f5; border: 1px solid #7b1fa2; }
.etiqueta-reincidente { color: #fff; background: #7b1fa2; }
.etiqueta-asimilada { color: #5d4300; background: #fff3cd; border: 1px solid #d98c00; }
.etiquetas-fila { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.tabla-datos tr.fila-plazo-aviso td:first-child { box-shadow: inset 5px 0 0 var(--ambar); }
.tabla-datos tr.fila-plazo-vencido td:first-child { box-shadow: inset 5px 0 0 var(--error-borde); }
.tabla-datos tr.fila-con-aviso td { background: #fff4f4; }
.tabla-datos a.enlace-fila { font-weight: 700; color: var(--boton-azul); }

.grua-filtros { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.grua-filtros .fila-filtros { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid var(--p); border-left: 6px solid var(--p); background: var(--t); }
.grua-filtros .fila-filtros .campo { margin: 0; flex: 1 1 11rem; }
.grua-filtros .fila-filtros label { display: block; font-size: .8rem; font-weight: 700; margin-bottom: .2rem; color: var(--texto-suave); }
.grua-filtros .fila-filtros :is(input[type="text"], input[type="search"], input[type="date"], select) { background: #fff; border-color: var(--p); }
.grua-filtros .f-azul { --p: #1a6fc4; --t: #eaf2fb; }
.grua-filtros .f-ambar { --p: #d98c00; --t: #fff6e3; }
.grua-filtros .f-verde { --p: #2e8b57; --t: #e7f5ec; }
.grua-filtros .acciones-filtros { display: flex; gap: .6rem; flex-wrap: wrap; }
.grua-filtros-lista { --p: var(--borde-campo); --t: #f6f9fc; }
.grua-filtros-lista .fila-filtros { border-left-width: 1px; }
.grua-filtros-lista .titulo-grupo { flex: 1 0 100%; margin: 0 0 -.15rem; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave); }
.grua-filtros-lista .mas-filtros { display: grid; gap: .6rem; }
.grua-filtros-lista .mas-filtros > summary { cursor: pointer; font-weight: 700; color: var(--boton-azul); padding: .2rem 0; width: fit-content; }
.grua-filtros-lista .mas-filtros > summary:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.grua-filtros-lista .mas-filtros[open] > summary { margin-bottom: .6rem; }
.grua-filtros-lista .mas-filtros .fila-filtros + .fila-filtros { margin-top: .6rem; }
.grua-filtros-lista .atajos-fecha { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 1 0 100%; }
.grua-filtros-lista .atajos-fecha[hidden] { display: none; }
.grua-filtros .acciones-filtros .boton { width: auto; }
.grua-exportar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .8rem; }
.grua-exportar .boton { width: auto; }
.grua-exportar .boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.grua-atajos { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .9rem; }
.grua-atajo { display: inline-flex; align-items: baseline; gap: .5rem; padding: .5rem .9rem; border-radius: .6rem; text-decoration: none; color: var(--texto); background: #eef2f7; border: 2px solid var(--borde-campo); }
.grua-atajo:hover { background: #e1e8f0; }
.grua-atajo[aria-current="true"] { border-color: var(--tabla-cabecera); background: #fff; box-shadow: 0 2px 0 var(--acento); }
.grua-atajo-num { font-size: 1.35rem; font-weight: 800; line-height: 1; }
.grua-atajo-texto { font-size: .88rem; font-weight: 700; color: var(--texto-suave); }
.grua-atajo-alerta { border-color: var(--error-borde); background: var(--error-fondo); }
.grua-atajo-alerta .grua-atajo-num { color: var(--error-borde); }
.grua-vacio { display: grid; gap: .6rem; justify-items: start; padding: .8rem 0; }
.grua-vacio p { margin: 0; }
.grua-paginacion { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; margin: .6rem 0 1rem; }
.grua-paginacion .boton { width: auto; }

.banner-entrega { display: block; padding: .9rem 1.1rem; margin: 0 0 1rem; border-radius: .6rem; border: 3px solid var(--error-borde); background: var(--error-fondo); color: #6b1010; font-size: 1.05rem; font-weight: 700; }
.banner-entrega small { display: block; font-weight: 400; margin-top: .25rem; }
.banner-plazo { padding: .7rem 1rem; margin: 0 0 1rem; border-radius: .6rem; border-left: 6px solid var(--ambar); background: #fff6e3; }
.banner-plazo.vencido { border-color: var(--error-borde); background: #fdeaea; }
.banner-reincidente { padding: .7rem 1rem; margin: 0 0 1rem; border-radius: .6rem; border-left: 6px solid #7b1fa2; background: #f5eaf9; }

.grua-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); gap: 1rem; align-items: start; }
.grua-ficha .subtarjeta { margin-bottom: 0; }
.grua-ficha .subtarjeta.ancha { grid-column: 1 / -1; }
.grua-datos { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; }
.grua-datos dt { color: var(--texto-suave); font-size: .85rem; font-weight: 700; }
.grua-datos dd { margin: 0; overflow-wrap: anywhere; }
.grua-cabecera-ficha { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; justify-content: space-between; margin-bottom: .8rem; }
.grua-cabecera-ficha h2 { margin: 0; }
.matricula-grande { display: inline-block; padding: .1rem .6rem; border: 2px solid #0f2338; border-radius: .35rem; background: #fff; font: 700 1.25rem/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .08em; }

.desglose { width: 100%; border-collapse: collapse; margin: .4rem 0; }
.desglose td { padding: .3rem .4rem; border-bottom: 1px solid var(--borde-suave); }
.desglose td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.desglose tr.total td { font-weight: 700; font-size: 1.1rem; border-top: 2px solid var(--tabla-cabecera); border-bottom: 0; }
.resultado-tasa { padding: .9rem 1rem; border-radius: .6rem; border: 2px dashed var(--borde); background: #f7fafd; min-height: 5rem; }
.resultado-tasa.ok { border-style: solid; border-color: var(--ok-borde); background: #f1fbf5; }
.resultado-tasa.error { border-style: solid; border-color: var(--error-borde); background: var(--error-fondo); }
.nota-asimilada { padding: .55rem .8rem; margin: .4rem 0; border-radius: .5rem; border-left: 5px solid var(--ambar); background: #fff3cd; font-size: .92rem; }
.sin-dato { color: var(--texto-suave); }

.tipo-cierre { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tipo-cierre label { display: block; padding: .9rem 1rem; border: 3px solid var(--borde-campo); border-radius: .7rem; background: #fff; cursor: pointer; font-weight: 700; }
.tipo-cierre label small { display: block; font-weight: 400; color: var(--texto-suave); margin-top: .2rem; }
.tipo-cierre input { position: absolute; opacity: 0; pointer-events: none; }
.tipo-cierre label:has(input:checked) { border-color: var(--boton-azul); background: #e3f0fd; box-shadow: 0 0 0 3px rgba(26, 111, 196, .25); }
.tipo-cierre label.cierre-interrumpida:has(input:checked) { border-color: #d98c00; background: #fff3d9; box-shadow: 0 0 0 3px rgba(217, 140, 0, .28); }
.tipo-cierre label:has(input:focus-visible) { outline: 3px solid var(--ambar); outline-offset: 2px; }
.grua-form { display: grid; gap: 1.1rem; }
.grua-form .campos-en-linea .campo { flex: 1 1 12rem; }
.grua-form .campo-ancho { flex: 2 1 22rem; }
.campo-con-boton { display: flex; gap: .5rem; align-items: stretch; }
.campo-con-boton .boton { width: auto; padding: .5rem .9rem; }
[hidden] { display: none !important; }
.ayuda-campo { display: block; margin-top: .25rem; font-size: .82rem; color: var(--texto-suave); }

.danos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .7rem 1rem; }
.danos-rejilla .campo { margin: 0; }
.lista-danos { margin: 0; padding-left: 1.1rem; }
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; }
.fotos-grid figure { margin: 0; }
.fotos-grid img { display: block; width: 100%; height: 7rem; object-fit: cover; border-radius: .4rem; border: 1px solid var(--borde); background: #eef2f7; }
.fotos-grid figcaption { font-size: .75rem; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-anotaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.lista-anotaciones li { padding: .5rem .7rem; border-radius: .5rem; background: #f4f8fc; border: 1px solid var(--borde-suave); }
.lista-anotaciones .meta { display: block; font-size: .78rem; color: var(--texto-suave); }
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--borde); display: grid; gap: .6rem; }

.grua-grupo-deposito { margin-bottom: 1.4rem; }
.grafico-barras { width: 100%; height: auto; display: block; }
.grafico-barras text { font: 12px system-ui, sans-serif; fill: #0f2338; }
.grafico-barras .barra { fill: #1a6fc4; }
.grafico-barras .barra-2 { fill: #d98c00; }
.grafico-barras .eje { stroke: #9fb3c8; }
.tabla-tarifas td.num, .tabla-tarifas th.num { text-align: right; font-variant-numeric: tabular-nums; }
.etiqueta-motivo { display: inline-block; padding: .05rem .45rem; border-radius: .35rem; background: #e3ecf6; color: #12395f; font-size: .82rem; }
form.en-linea { display: inline; }
.fotos-grid img.icono-doc { object-fit: contain; }

/* ---- Calculadora de la tasa ---- */
.tasa-busqueda { padding: 1rem 1.1rem; margin-bottom: 1.2rem; border-radius: .6rem; border: 1px solid var(--borde-suave); border-left: 6px solid var(--boton-azul); background: #f3f7fc; }
.tasa-busqueda h3 { margin: 0 0 .3rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.tasa-busqueda .campos-en-linea .campo { flex: 1 1 11rem; }
.tasa-candidatos { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tasa-formulario .opcion-discreta, .tasa-formulario .opcion-linea { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; font-weight: 600; }
.tasa-formulario .opcion-discreta { font-weight: 400; color: var(--texto-suave); }
.tasa-formulario .tasa-pesado { margin: .6rem 0; }
.tasa-formulario .tasa-pesado summary { cursor: pointer; color: var(--texto-suave); font-size: .9rem; }
.fecha-hora { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.fecha-hora input { flex: 1 1 8rem; min-width: 0; }
.fecha-hora .boton { width: auto; }
.tasa-fechas { margin: 1rem 0; }
.tasa-fechas .campo { flex: 1 1 20rem; }
.calculo-linea { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 1rem; }
.boton-calcular { width: auto; padding: .9rem 1.6rem; color: #3b2600; background: var(--ambar); border: 2px solid #b97a00; font-size: 1.05rem; font-weight: 700; }
.boton-calcular:hover { background: #f0b53a; }
.calculo-igual { font-size: 1.8rem; font-weight: 700; color: #b97a00; }
.caja-resultado { flex: 1 1 20rem; min-height: 6rem; display: flex; flex-direction: column; justify-content: center; padding: .8rem 1.1rem; border-radius: .6rem; border: 2px solid #c98500; background: #fff8e8; }
.caja-resultado .resultado-tasa { border: 0; background: none; padding: 0; min-height: 0; }
.caja-resultado .sin-dato { text-align: center; }

/* ---- Estadísticas ---- */
.est-cabecera { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.est-cabecera h2 { margin: 0; }
.est-filtro { display: flex; gap: .6rem; align-items: center; margin: 0; }
.est-filtro label { margin: 0; font-weight: 700; color: var(--texto-suave); }
.est-filtro select { width: auto; min-width: 8rem; margin: 0; }
.est-filtro .boton { margin: 0; }
.est-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); grid-auto-rows: 1fr; gap: .8rem; margin-bottom: 1.2rem; }
.est-kpi { --c: #2a78d6; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: .85rem 1rem; border-radius: .7rem; border: 1px solid color-mix(in srgb, var(--c) 35%, #fff); border-left: 6px solid var(--c); background: color-mix(in srgb, var(--c) 9%, #fff); min-height: 5.6rem; }
.est-kpi .est-valor { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: #0f2338; font-variant-numeric: tabular-nums; }
.est-kpi .est-rotulo { font-size: .8rem; line-height: 1.25; color: var(--texto-suave); }
.est-azul { --c: #2a78d6; } .est-aqua { --c: #1baf7a; } .est-naranja { --c: #eb6834; } .est-violeta { --c: #4a3aa7; }
.est-verde { --c: #008300; } .est-dorado { --c: #c98500; } .est-rosa { --c: #d55181; } .est-rojo { --c: #e34948; } .est-gris { --c: #6b7a8a; }
.est-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.est-card { --c: #2a78d6; margin: 0; padding: .9rem 1.1rem 1rem; border-radius: .7rem; background: #fff; border: 1px solid var(--borde-suave); border-top: 5px solid var(--c); box-shadow: 0 1px 5px rgba(15, 35, 56, .08); min-width: 0; }
.est-card.est-ancha { grid-column: 1 / -1; }
.est-card h3 { margin: 0 0 .6rem; font-size: 1rem; }
.est-card .barra { fill: var(--c); }
.est-card .barra-2 { fill: #eb6834; }
.est-card .valor { font-weight: 700; }
.est-vacio { margin: 1.5rem 0; text-align: center; color: var(--texto-suave); }
.est-leyenda { margin: .4rem 0 0; font-size: .82rem; color: var(--texto-suave); }
.est-leyenda .sw { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin: 0 .25rem 0 .7rem; vertical-align: -1px; }
.est-leyenda .sw-1 { background: var(--c); margin-left: 0; }
.est-leyenda .sw-2 { background: #eb6834; }
.est-tabla { margin-top: .5rem; font-size: .85rem; }
.est-tabla summary { cursor: pointer; color: var(--texto-suave); }
@media (max-width: 52rem) { .est-rejilla { grid-template-columns: minmax(0, 1fr); } }
@media print {
  .grua-pestanas, .grua-filtros, .grua-exportar, .grua-paginacion { display: none !important; }
}

/* ---- Alta de expediente de grúa: secciones numeradas, rejilla alineada, barra de guardado ---- */
.grua-alta { gap: 1.2rem; }
.grua-alta .seccion { margin: 0; padding: .9rem 1rem 1.1rem; border: 1px solid var(--borde-suave); border-radius: .7rem; min-width: 0; background: var(--sec, #f7fafd); }
.grua-alta .seccion legend { display: flex; align-items: center; gap: .55rem; padding: 0 .4rem; font-weight: 700; font-size: 1.02rem; color: var(--texto); }
.grua-alta .seccion legend .nota { font-weight: 400; font-size: .85rem; }
.grua-alta .num { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--sec-num, var(--boton-azul)); color: #fff; font-size: .85rem; }
.grua-alta .s-cierre { --sec: #f4f7fb; --sec-num: #55708c; }
.grua-alta .s-vehiculo { --sec: #eef5fc; --sec-num: #1a6fc4; }
.grua-alta .s-motivo { --sec: #f3f0fa; --sec-num: #6a4fb0; }
.grua-alta .s-servicio { --sec: #eef8f4; --sec-num: #1f8a5e; }
.grua-alta .s-deposito { --sec: #fdf5e8; --sec-num: #b87400; }
.grua-alta .s-documentacion { --sec: #f1f5f8; --sec-num: #3f5b76; }
.grua-alta .s-danos { --sec: #fcf0f0; --sec-num: #c23b3b; }
.grua-alta .s-obs { --sec: #f6f6f6; --sec-num: #666; }
.grua-alta .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .9rem 1rem; align-items: start; }
.grua-alta .rejilla + .rejilla { margin-top: .9rem; }
.grua-alta .rejilla .campo { margin: 0; min-width: 0; }
.grua-alta .rejilla .campo-ancho { grid-column: 1 / -1; }
.grua-alta .campo > label { display: block; margin-bottom: .25rem; font-weight: 600; }
.grua-alta .campo > label.casilla { font-weight: 600; display: flex; gap: .45rem; align-items: center; min-height: 2.4rem; }
.grua-alta input[type="text"], .grua-alta input[type="number"], .grua-alta input[type="date"], .grua-alta input[type="time"], .grua-alta select, .grua-alta textarea {
  width: 100%; box-sizing: border-box; min-height: 2.5rem; padding: .45rem .6rem; border: 2px solid var(--borde-campo); border-radius: .5rem; background: #fff; font: inherit; color: var(--texto);
}
.grua-alta input:focus, .grua-alta select:focus, .grua-alta textarea:focus { outline: 3px solid var(--ambar); outline-offset: 1px; border-color: var(--boton-azul); }
.grua-alta input[type="date"], .grua-alta input[type="time"] { font-variant-numeric: tabular-nums; cursor: text; }
.grua-alta input:disabled { background: #e8edf2; color: var(--texto-suave); }
.grua-alta .campo-con-boton input { flex: 1 1 auto; min-width: 0; }
.aviso-compacto { margin: 0; padding: .5rem .8rem; font-size: .92rem; }
.avisos-matricula:empty { display: none; }
.avisos-matricula .aviso { margin: 0 0 .5rem; padding: .5rem .8rem; font-size: .92rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; }
.avisos-matricula .aviso .boton { width: auto; padding: .3rem .8rem; }
.aviso-info { background: #e3f0fd; border-color: var(--boton-azul); }
.aviso-peligro { background: var(--error-fondo); border-color: var(--error-borde); }

.fotos { margin-top: 1rem; }
.fotos > label { display: block; font-weight: 600; margin-bottom: .3rem; }
.fotos-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .6rem; }
.fotos-miniaturas { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .6rem; }
.fotos-miniaturas li { position: relative; }
.fotos-miniaturas img { display: block; width: 100%; height: 5.5rem; object-fit: cover; border-radius: .4rem; border: 1px solid var(--borde); background: #eef2f7; }
.fotos-miniaturas .quitar { position: absolute; top: .2rem; right: .2rem; width: 1.6rem; height: 1.6rem; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 35, 56, .85); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
.fotos-miniaturas .peso { display: block; font-size: .72rem; color: var(--texto-suave); text-align: center; }

.barra-guardar { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 1rem; justify-content: flex-start; padding: .8rem 1rem; margin: 0 -1rem -1rem; background: rgba(255, 255, 255, .96); border-top: 2px solid var(--borde-suave); box-shadow: 0 -4px 10px rgba(15, 35, 56, .08); }
.barra-guardar .boton { min-width: 10rem; }

/* Alineación: casillas con la altura de un campo; archivos y parte de daños con el mismo aspecto que el resto */
.grua-alta .rejilla .campo-fijo::before { content: "\00a0"; display: block; margin-bottom: .25rem; font-weight: 600; }
.grua-alta .campo > label.casilla { box-sizing: border-box; min-height: 2.5rem; padding: .3rem .6rem; border: 2px solid var(--borde-campo); border-radius: .5rem; background: #fff; }
.grua-alta input[type="file"] { width: 100%; box-sizing: border-box; padding: .4rem .5rem; border: 2px dashed var(--borde-campo); border-radius: .5rem; background: #fff; font: inherit; }
.grua-alta .danos-grupo { margin: .5rem 0 1rem; padding: .6rem .8rem; border: 1px solid var(--borde-suave); border-radius: .5rem; background: #fff; }
.grua-alta .danos-grupo legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
.grua-alta .danos-rejilla { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); align-items: end; }
.grua-alta .danos-rejilla .campo > label { font-weight: 500; font-size: .9rem; }

/* Depósitos: bloque de «por confirmar» y cabecera con acciones */
.cabecera-lista .acciones-cabecera { display: inline-flex; gap: .5rem; align-items: center; }
.grupo-por-confirmar { padding: .8rem 1rem 1rem; border: 2px solid var(--ambar); border-radius: .7rem; background: #fff8ea; }
.grupo-por-confirmar form { margin-top: .8rem; }

/* Separación entre el alta de pendientes y el listado que sigue */
.grua-alta[data-modo-pendiente] { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--borde-suave); }
.grua-alta[data-modo-pendiente] .acciones-filtros { margin-top: .4rem; }
.grua-alta[data-modo-pendiente] + .grua-atajos, .grua-atajos + .grua-filtros { margin-top: 1rem; }

/* Ajustes de Grúa: rejilla alineada por arriba, con la misma altura de etiqueta y campo */
.ajustes-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; align-items: start; margin-bottom: .8rem; }
.ajustes-rejilla .campo { margin: 0; min-width: 0; }
.ajustes-rejilla .campo > label { display: block; margin-bottom: .25rem; }
.ajustes-rejilla input[type="number"] { width: 100%; box-sizing: border-box; }

.notas-entrega { margin-bottom: .8rem; padding: .6rem .8rem; border: 1px solid #e6c36a; background: #fff8e5; border-radius: .5rem; }
.notas-entrega strong { display: block; margin-bottom: .4rem; }

/* ------------------------------------------------------------------ Partes
   Aspecto de la aplicación GestorPartes: azul marino, dorado, menú lateral, pastillas y tarjetas de color. */
.mod-partes {
  --p-bg: #e7ebf1; --p-navy: #1c3d5e; --p-navy-d: #12283f; --p-gold: #b8862e; --p-gold-bg: #fbf1de; --p-txt: #1a2733; --p-txt2: #647485;
  --p-borde: #d7dde6; --p-red: #b23b3b; --p-red-bg: #fbe9e8; --p-green: #1f7a4d; --p-green-bg: #e6f5ec; --p-slate: #4a5d75; --p-slate-txt: #eaeef3;
  --p-amber: #9a6a10; --p-amber-bg: #fdf3e2; --acento: #b8862e;
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: start; color: var(--p-txt);
}
.mod-partes .partes-main { min-width: 0; max-width: 60rem; width: 100%; margin: 0 auto; }
.mod-partes .partes-lateral { position: sticky; top: .5rem; display: grid; gap: .5rem; }
.mod-partes .partes-lateral a { display: grid; justify-items: center; align-content: center; gap: .25rem; min-height: 5.2rem; padding: .6rem .35rem; border-radius: .6rem; text-align: center; text-decoration: none;
  font-size: .78rem; font-weight: 700; line-height: 1.2; background: var(--p-slate); color: var(--p-slate-txt); box-shadow: 0 2px 6px rgba(20, 40, 70, .15); }
.mod-partes .partes-lateral a .ico { font-size: 1.35rem; }
.mod-partes .partes-lateral a:hover { filter: brightness(1.12); }
.mod-partes .partes-lateral a[aria-current="page"] { background: var(--p-gold); color: #3a2a0e; }
.mod-partes .partes-barra { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .8rem 1.1rem; margin-bottom: .6rem; background: var(--p-navy); color: #fff; border-radius: .6rem; }
.mod-partes .partes-barra h2 { margin: 0; font-size: 1.1rem; }
.mod-partes .partes-barra-enlaces { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.mod-partes .partes-barra a { color: #dbe6f1; font-weight: 600; font-size: .9rem; text-decoration: none; }
.mod-partes .partes-barra a:hover { color: #fff; text-decoration: underline; }
.mod-partes .partes-alerta { margin: 0 0 .6rem; padding: .6rem 1rem; background: var(--p-gold-bg); color: var(--p-amber); font-weight: 600; font-size: .9rem; border-radius: .5rem; }
@media (max-width: 899px) {
  .mod-partes { display: block; padding-bottom: 5rem; }
  .mod-partes .partes-lateral { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; top: auto; display: flex; gap: .35rem; padding: .4rem; overflow-x: auto; background: #fff; border-top: 2px solid var(--p-borde); box-shadow: 0 -2px 10px rgba(20, 40, 70, .1); }
  .mod-partes .partes-lateral a { flex: 1 0 5.2rem; min-height: 3.4rem; padding: .35rem .25rem; font-size: .68rem; }
  .mod-partes .partes-lateral a .ico { font-size: 1.05rem; }
}

/* Tarjetas y formularios */
.mod-partes .tarjeta { background: #fff; border: 1px solid var(--p-borde); border-radius: .9rem; padding: 1rem 1.1rem; margin-bottom: .7rem; box-shadow: 0 4px 14px rgba(20, 40, 70, .12); }
.mod-partes .cabecera-lista { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; padding-bottom: .65rem; border-bottom: 1px solid var(--p-borde); }
.mod-partes .cabecera-lista h2 { margin: 0; font-size: 1rem; color: var(--p-navy); }
.mod-partes label { display: block; margin: 0 0 .25rem; font-size: .76rem; font-weight: 700; color: var(--p-navy); }
.mod-partes label.casilla { display: flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; }
.mod-partes :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; padding: .6rem .65rem; margin: 0 0 .65rem; font-size: .95rem; border: 1px solid var(--p-borde); border-radius: .5rem; background: #fff; color: var(--p-txt); min-height: 0; box-shadow: none; }
.mod-partes input[type="checkbox"], .mod-partes input[type="radio"] { width: auto; margin: 0; }
.mod-partes .section-label { margin: .9rem 0 .35rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--p-txt2); }
.mod-partes .ayuda-campo { margin: -.3rem 0 .6rem; font-size: .78rem; color: var(--p-txt2); }
.mod-partes .select-corto { width: auto; min-width: 12rem; max-width: 100%; }
.mod-partes .fecha-row { display: flex; gap: .4rem; align-items: center; }
.mod-partes .fecha-row input { flex: 1; min-width: 0; margin: 0; }
.mod-partes .btn-hoy { padding: .5rem .7rem; border: 0; border-radius: .5rem; background: var(--p-gold); color: #3a2a0e; font-weight: 800; font-size: .8rem; cursor: pointer; }
.mod-partes .fila-turno { display: grid; grid-template-columns: minmax(13rem, 1.4fr) minmax(0, 1.6fr) minmax(7rem, .8fr) minmax(7rem, .8fr); gap: .6rem; margin-bottom: .65rem; align-items: end; }
.mod-partes .fila-turno input, .mod-partes .fila-turno select, .mod-partes .fila-turno .btn-hoy { height: 2.7rem; box-sizing: border-box; margin: 0; }
.mod-partes .fila-turno .fecha-row { align-items: stretch; }
@media (max-width: 56rem) { .mod-partes .fila-turno { grid-template-columns: 1fr 1fr; } .mod-partes .fila-turno > :nth-child(-n+2) { grid-column: 1 / -1; } }
/* Hora, ubicación y resultado: una fila, cajas de la misma altura */
.mod-partes .fila-hora { margin-bottom: .65rem; display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.mod-partes .fila-hora input[type="time"]:not([type="x"]):not([type="y"]) { flex: 0 0 9rem; width: 9rem; height: 2.7rem; box-sizing: border-box; margin: 0; }
.mod-partes .fila-hora .boton-ahora { height: 2.7rem; box-sizing: border-box; margin: 0; padding: 0 1rem; width: auto; }
.mod-partes .fila-hora label.casilla { height: 2.7rem; margin: 0; padding: 0 .2rem; }
.mod-partes .fila-ubicacion { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: .6rem; align-items: end; margin-bottom: .65rem; }
.mod-partes .fila-ubicacion.con-gps { grid-template-columns: minmax(0, 1fr) 7rem auto; }
.mod-partes .fila-ubicacion .campo input:not([type="x"]):not([type="y"]), .mod-partes .fila-ubicacion .boton-gps { height: 2.7rem; box-sizing: border-box; margin: 0; }
.mod-partes .fila-ubicacion .boton-gps { padding: 0 1rem; width: auto; white-space: nowrap; }
@media (max-width: 36rem) { .mod-partes .fila-ubicacion, .mod-partes .fila-ubicacion.con-gps { grid-template-columns: minmax(0, 1fr) 6rem; } .mod-partes .fila-ubicacion .campo:nth-child(3) { grid-column: 1 / -1; } }
.mod-partes .fila-resultado { display: grid; grid-template-columns: minmax(12rem, 22rem) minmax(0, 1fr); gap: .6rem; align-items: start; }
.mod-partes .fila-resultado select:not([type="x"]), .mod-partes .fila-resultado input:not([type="x"]):not([type="y"]) { height: 2.7rem; box-sizing: border-box; margin: 0 0 .65rem; }
.mod-partes .fila-resultado [hidden] { display: none; }
@media (max-width: 36rem) { .mod-partes .fila-resultado { grid-template-columns: 1fr; } }
.mod-partes .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mod-partes fieldset.sin-borde { border: 0; padding: 0; margin: 0; min-width: 0; }
.mod-partes fieldset.seccion { border: 0; padding: 0; margin: 0 0 .8rem; }
.mod-partes fieldset.seccion > legend { padding: 0; margin: 0 0 .4rem; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--p-txt2); }
.mod-partes fieldset.seccion > legend .num { display: none; }

/* Botones */
.mod-partes .boton { border-radius: .5rem; font-weight: 700; font-size: .85rem; }
.mod-partes .boton-principal { background: var(--p-navy); color: #fff; border: 1px solid var(--p-navy); }
.mod-partes .boton-principal:hover { background: var(--p-navy-d); }
.mod-partes .boton-neutro, .mod-partes .boton-secundario { background: #fff; color: var(--p-txt); border: 1px solid var(--p-borde); }
.mod-partes .boton-rojo { background: #fff; color: var(--p-red); border: 1px solid var(--p-red); }
.mod-partes .boton-ancho { display: block; width: 100%; margin-top: .9rem; padding: .85rem 1rem; font-size: .95rem; }

/* Patrulla: pastillas */
.mod-partes .grupo-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.mod-partes .grupo-chip { padding: .3rem .8rem; border-radius: 999px; font-size: .78rem; font-weight: 700; cursor: pointer; border: 1px solid var(--p-borde); background: #fff; color: var(--p-txt2); }
.mod-partes .grupo-chip.sel { background: var(--p-navy); color: #fff; border-color: var(--p-navy); }
.mod-partes .agentes-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.mod-partes .agente-pill { display: inline-flex; align-items: center; margin: 0; padding: .4rem .8rem; border: 1px solid var(--p-borde); border-radius: 999px; background: #fff; font-size: .85rem; font-weight: 500; color: var(--p-txt); cursor: pointer; }
.mod-partes .agente-pill input { position: absolute; opacity: 0; pointer-events: none; }
.mod-partes .agente-pill:has(input:checked) { background: var(--p-navy); color: #fff; border-color: var(--p-navy); }
.mod-partes .agente-pill:has(input:focus-visible) { outline: 3px solid var(--p-gold); outline-offset: 2px; }
.mod-partes .agente-pill[hidden] { display: none; }

/* Vehículo y combustible */
.mod-partes .veh-unidad-box { display: flex; gap: .7rem; align-items: center; margin-bottom: .6rem; }
.mod-partes .veh-icon { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid var(--p-borde); border-radius: .5rem; font-size: 1.1rem; flex: none; }
.mod-partes .veh-resumen { display: grid; padding: .35rem .7rem; background: #fbfcfd; border: 1px solid var(--p-borde); border-radius: .5rem; }
.mod-partes .veh-resumen small { color: var(--p-txt2); }
.mod-partes .veh-resumen.completo { background: var(--p-gold-bg); border-color: var(--p-gold); }
.mod-partes .fuel-bar-bg { height: 1rem; margin: -.2rem 0 .7rem; background: var(--p-bg); border: 1px solid var(--p-borde); border-radius: .5rem; overflow: hidden; }
.mod-partes .fuel-bar-fill { height: 100%; width: 0; border-radius: .5rem 0 0 .5rem; transition: width .2s; }

/* Checklist en acordeón */
.mod-partes .chk-cab { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .8rem; }
.mod-partes .btn-todo-ok { display: block; width: 100%; margin: .3rem 0 .6rem; padding: .7rem; border: 0; border-radius: .5rem; background: var(--p-green); color: #fff; font-weight: 800; font-size: .95rem; cursor: pointer; }
.mod-partes .chk-cab:has(.btn-todo-ok) { display: block; }
.mod-partes .chk-acc { margin-bottom: .55rem; border: 1px solid var(--p-borde); border-radius: .5rem; overflow: hidden; }
.mod-partes .chk-acc > summary { display: flex; justify-content: space-between; align-items: center; padding: .65rem .8rem; background: #fbfcfd; cursor: pointer; list-style: none; font-size: .78rem; font-weight: 800; color: var(--p-txt2); }
.mod-partes .chk-acc > summary::-webkit-details-marker { display: none; }
.mod-partes .chk-acc > summary::after { content: none; }
.mod-partes .chk-badge { margin-left: .3rem; padding: .1rem .5rem; border-radius: 999px; background: var(--p-gold-bg); color: var(--p-gold); font-size: .68rem; }
.mod-partes .chk-badge-rojo { background: var(--p-red-bg); color: var(--p-red); }
.mod-partes .chk-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: .5rem; }
@media (max-width: 40rem) { .mod-partes .chk-cuerpo { grid-template-columns: 1fr; } }
.mod-partes .chk-fila { border: 1px solid var(--p-borde); border-radius: .5rem; overflow: hidden; background: #fbfcfd; align-self: start; }
.mod-partes .chk-cabfila { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem .65rem; font-size: .88rem; }
.mod-partes .chk-fila.inc, .mod-partes .chk-fila:has(input[value="incidencia"]:checked) { border-color: #e8c4c1; }
.mod-partes .chk-fila:has(input[value="incidencia"]:checked) .chk-cabfila { background: var(--p-red-bg); }
.mod-partes .chk-toggle { display: inline-flex; flex: none; border: 1px solid var(--p-borde); border-radius: .4rem; overflow: hidden; background: #fff; }
.mod-partes .chk-toggle label { margin: 0; cursor: pointer; }
.mod-partes .chk-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.mod-partes .chk-toggle span { display: block; padding: .3rem .65rem; font-size: .8rem; font-weight: 700; color: var(--p-txt2); }
.mod-partes .chk-toggle .on-correcto:has(input:checked) span { background: var(--p-green-bg); color: var(--p-green); }
.mod-partes .chk-toggle .on-incidencia:has(input:checked) span { background: var(--p-red-bg); color: var(--p-red); }
.mod-partes .chk-toggle label:has(input:focus-visible) { outline: 3px solid var(--p-gold); outline-offset: -2px; }
.mod-partes .chk-detalle { display: none; padding: .5rem .65rem; border-top: 1px solid var(--p-borde); }
.mod-partes .chk-fila:has(input[value="incidencia"]:checked) .chk-detalle { display: block; }
.mod-partes .chk-detalle textarea { margin: 0; }

/* Intervenciones */
.mod-partes .int-card { margin: 0 0 .5rem; padding: .65rem .8rem; border: 1px solid var(--p-borde); border-left: 3px solid var(--p-navy); border-radius: 0 .6rem .6rem 0; background: #fff; }
.mod-partes .int-card.sev-atencion { border-left-color: var(--p-amber); background: var(--p-amber-bg); }
.mod-partes .int-card.sev-critica { border-left-color: var(--p-red); background: var(--p-red-bg); }
.mod-partes .int-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.mod-partes .int-hora { font-variant-numeric: tabular-nums; }
.mod-partes .int-tipo { font-weight: 800; color: var(--p-navy); }
.mod-partes .int-lugar { color: var(--p-txt2); font-size: .85rem; }
.mod-partes .int-aviso { margin: .1rem 0 0; font-size: .75rem; color: var(--p-txt2); }
.mod-partes .int-card-badge { margin-left: auto; padding: .1rem .55rem; border-radius: 999px; font-size: .62rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; background: var(--p-slate); color: #fff; align-self: center; }
.mod-partes .sev-critica .int-card-badge { background: var(--p-red); }
.mod-partes .sev-atencion .int-card-badge { background: var(--p-amber); }
.mod-partes .int-card-desc { margin: .3rem 0 0; font-size: .85rem; line-height: 1.45; }
.mod-partes .int-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.mod-partes .int-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem .15rem .5rem; border: 1px solid; border-radius: 999px; font-size: .72rem; line-height: 1.3; }
.mod-partes .int-chip-dot { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; flex: none; }
.mod-partes .int-chip-persona { background: #eaf1fb; border-color: #c9dcf3; color: #1c3d5e; }
.mod-partes .int-chip-vehiculo { background: #f1f2f4; border-color: #dde0e4; color: #323944; }
.mod-partes .int-chip-doc { background: var(--p-gold-bg); border-color: #ecd9a8; color: #6b4a12; }
.mod-partes .int-chip-juzgado { background: #efeaf7; border-color: #d9cdf0; color: #4a3b7a; }
.mod-partes .int-chip-especifico { background: #e3f2ee; border-color: #c3e2da; color: #1f6b52; }
.mod-partes .int-actions { margin-top: .4rem; }

/* Resto */
.mod-partes .etiqueta-turno-abierto { color: #fff; background: var(--p-green); }
.mod-partes .etiqueta-turno-cerrado { color: var(--p-txt); background: var(--p-bg); border: 1px solid var(--p-borde); }
.mod-partes .datos-turno { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0 0 .5rem; }
.mod-partes .datos-turno dt { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--p-txt2); }
.mod-partes .datos-turno dd { margin: 0; font-weight: 600; }
.mod-partes .lista-consignas { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.mod-partes .lista-consignas li { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: .6rem .8rem; border-left: 4px solid var(--p-gold); background: var(--p-gold-bg); border-radius: .4rem; }
.mod-partes .observacion { padding: .5rem .8rem; border-left: 4px solid var(--p-gold); background: var(--p-amber-bg); border-radius: .3rem; }
.mod-partes .observacion.atendida { border-left-color: var(--p-green); background: var(--p-green-bg); }
.mod-partes .elemento { margin: 0 0 .7rem; padding: .6rem .8rem .2rem; border: 1px dashed var(--p-borde); border-radius: .5rem; background: #fbfcfd; }
.mod-partes .elemento legend { font-weight: 800; padding: 0 .4rem; font-size: .8rem; color: var(--p-navy); }
.mod-partes .elemento[hidden] { display: none; }
.mod-partes .rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0 .7rem; }
.mod-partes .rejilla .campo-ancho { grid-column: 1 / -1; }
.mod-partes .campo { margin: 0; }
.mod-partes .frases { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: -.3rem; margin-bottom: .6rem; }
.mod-partes .elemento-linea { margin: .25rem 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.mod-partes .en-linea { display: inline; }
.mod-partes details.anadir { margin: .4rem 0 1rem; }
.mod-partes details.anadir > summary { cursor: pointer; font-weight: 700; color: var(--p-navy); }
@media print { .mod-partes { display: block; } .mod-partes .tarjeta { box-shadow: none; } }
.mod-partes .fila-patrulla { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: .8rem 1rem; align-items: start; margin-bottom: .4rem; }
.mod-partes .fila-patrulla .section-label { margin-top: 0; }
@media (max-width: 56rem) { .mod-partes .fila-patrulla { grid-template-columns: 1fr; } }
.mod-partes .observacion.urgente { border-left: 4px solid var(--p-red, #b23b3b); background: #fbe9e8; padding: .5rem .7rem; border-radius: .4rem; }
.mod-partes .etiqueta-urgente { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: #b23b3b; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .04em; }
.mod-partes .partes-lateral .insignia { margin-left: .2rem; }

/* Partes: nada de recuadros blancos sobre la tarjeta blanca; los campos y botones secundarios llevan un tinte azulado (como la app anterior) */
.mod-partes { --p-campo: #edf1f7; --p-campo-borde: #c7d1de; --p-boton: #dde5ef; }
.mod-partes :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { background: var(--p-campo); border-color: var(--p-campo-borde); }
.mod-partes :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus { background: #fff; border-color: var(--p-gold); outline: 2px solid var(--p-gold-bg); }
.mod-partes .boton-neutro, .mod-partes .boton-secundario { background: var(--p-boton); color: var(--p-navy); border: 1px solid var(--p-campo-borde); font-weight: 700; }
.mod-partes .boton-neutro:hover, .mod-partes .boton-secundario:hover { background: #cdd8e6; }
.mod-partes .boton-rojo { background: var(--p-red-bg); color: var(--p-red); border-color: #e3b5b2; font-weight: 700; }
.mod-partes .boton-rojo:hover { background: #f6d6d3; }
.mod-partes label.casilla { padding: .55rem .8rem; background: var(--p-gold-bg); border: 1px solid #ecd9ac; border-radius: .5rem; color: var(--p-amber); }
.mod-partes .grupo-chip, .mod-partes .agente-pill { background: var(--p-campo); border-color: var(--p-campo-borde); }
.mod-partes .grupo-chip.sel, .mod-partes .agente-pill:has(input:checked) { background: var(--p-navy); border-color: var(--p-navy); }
.mod-partes .veh-resumen { background: var(--p-campo); }
.mod-partes .chk-toggle { background: var(--p-campo); }

/* Partes: consignas recibidas y destinatarios al cerrar */
.mod-partes .lista-consignas { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.mod-partes .consigna { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; flex-wrap: wrap; padding: .6rem .8rem; background: var(--p-gold-bg); border-left: 4px solid var(--p-gold); border-radius: .4rem; }
.mod-partes .consigna.leida { background: #eef1f5; border-left-color: #b9c3d0; color: var(--p-txt2); }
.mod-partes .consigna-para { margin-left: .4rem; padding: .05rem .5rem; border-radius: 999px; background: #fff; font-size: .7rem; font-weight: 700; color: var(--p-amber); }
.mod-partes .consigna-acciones { display: flex; gap: .4rem; }
.mod-partes .consigna-acciones form { margin: 0; }
.mod-partes .opciones-destino { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.mod-partes .consigna-destino .agentes-pills { display: flex; flex-wrap: wrap; gap: .4rem; max-height: 14rem; overflow: auto; }

/* Partes: calendario y resumen */
.mod-partes .cal-cabecera { justify-content: space-between; }
.mod-partes .cal-cabecera h2 { text-transform: capitalize; }
.mod-partes .cal-leyenda { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
.mod-partes .cal-chip { display: inline-block; padding: .15rem .55rem; border-radius: .4rem; background: var(--p-campo); color: var(--p-txt); font-size: .72rem; font-weight: 700; text-decoration: none; border: 1px solid var(--p-campo-borde); }
.mod-partes .cal-chip.cal-cerrado { background: var(--p-green-bg); color: var(--p-green); border-color: #b9e2cb; }
.mod-partes .cal-chip.cal-abierto { background: var(--p-amber-bg); color: var(--p-amber); border-color: #ecd9ac; }
.mod-partes .cal-chip.cal-pendiente { background: var(--p-red-bg); color: var(--p-red); border-color: #e3b5b2; }
.mod-partes .cal-rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.mod-partes .cal-dia-nombre { text-align: center; font-size: .72rem; font-weight: 800; color: var(--p-txt2); padding: .3rem 0; }
.mod-partes .cal-dia { min-height: 5.2rem; padding: .3rem; border: 1px solid var(--p-borde); border-radius: .5rem; display: flex; flex-direction: column; gap: .2rem; background: #fafbfd; overflow: hidden; }
.mod-partes .cal-dia.hoy { border: 2px solid var(--p-navy); }
.mod-partes .cal-num { font-size: .72rem; font-weight: 800; color: var(--p-txt2); text-decoration: none; }
.mod-partes .cal-dia .cal-chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 40rem) { .mod-partes .cal-dia { min-height: 3.6rem; } .mod-partes .cal-dia .cal-chip { font-size: .6rem; padding: .1rem .25rem; } }
.mod-partes .res-contadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; margin: .6rem 0 1rem; }
.mod-partes .res-caja { padding: .7rem .8rem; background: var(--p-campo); border: 1px solid var(--p-campo-borde); border-radius: .6rem; display: grid; gap: .1rem; }
.mod-partes .res-caja strong { font-size: 1.6rem; color: var(--p-navy); line-height: 1; }
.mod-partes .res-caja span { font-size: .72rem; font-weight: 700; color: var(--p-txt2); text-transform: uppercase; letter-spacing: .03em; }
.mod-partes .res-caja.res-critico strong { color: var(--p-red); }
.mod-partes .cal-mas { font-size: .7rem; font-weight: 700; color: var(--p-navy); text-decoration: underline; }
.mod-partes .res-turno { margin: 0 0 1rem; padding: .7rem .9rem; background: var(--p-campo); border: 1px solid var(--p-campo-borde); border-radius: .6rem; }
.mod-partes .res-turno-cab { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: baseline; margin-bottom: .4rem; color: var(--p-navy); }
.mod-partes .res-turno-cab span { font-size: .82rem; color: var(--p-txt2); font-weight: 600; }
.mod-partes .res-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.mod-partes .res-lista li { padding: .35rem .6rem; background: #fff; border-left: 3px solid var(--p-campo-borde); border-radius: 0 .4rem .4rem 0; font-size: .9rem; }
.mod-partes .res-lista li.res-sev-critico { border-left-color: var(--p-red); }
.mod-partes .res-lista li.res-sev-importante { border-left-color: var(--p-amber); }
.mod-partes .res-hora { display: inline-block; min-width: 3.2rem; font-weight: 800; color: var(--p-navy); }
.mod-partes .res-resultado { display: block; margin-left: 3.2rem; font-size: .8rem; color: var(--p-txt2); }


/* Estadísticas */
.mod-partes .est-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.mod-partes .est-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--p-borde); border-radius: .6rem; background: #fbfcfe; }
.mod-partes .est-kpi strong { font-size: 1.6rem; line-height: 1.1; color: var(--p-navy); }
.mod-partes .est-kpi span { font-size: .8rem; font-weight: 700; color: var(--p-txt); }
.mod-partes .est-kpi small { font-size: .72rem; color: var(--p-txt2); }
.mod-partes .est-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mod-partes .est-barras li { display: grid; grid-template-columns: minmax(8rem, 16rem) minmax(0, 1fr) 6.5rem; gap: .6rem; align-items: center; font-size: .88rem; }
.mod-partes .est-nombre { overflow-wrap: anywhere; }
.mod-partes .est-pista { width: 100%; height: .8rem; display: block; }
.mod-partes .est-valor { text-align: right; font-weight: 800; color: var(--p-navy); font-variant-numeric: tabular-nums; }
.mod-partes .est-valor small { font-weight: 600; color: var(--p-txt2); }
.mod-partes .est-fondo { fill: #e7edf4; }
.mod-partes .est-rect { fill: #1f3f63; }
.mod-partes .est-col { width: 100%; height: auto; max-height: 15rem; display: block; }
.mod-partes .est-eje, .mod-partes .est-cifra { font-size: 9px; fill: #5a6b7d; }
.mod-partes .est-cifra { font-weight: 700; fill: #1f3f63; }
.mod-partes .est-base { stroke: #9fb3c8; stroke-width: 1; }
.mod-partes .est-mapa { width: 100%; max-width: 42rem; height: auto; display: block; }
.mod-partes .est-punto { fill: #d98c00; fill-opacity: .55; stroke: #8a5a00; stroke-width: 1; }
.mod-partes .est-sub { margin: 1rem 0 .4rem; font-size: .82rem; color: var(--p-navy); }
.mod-partes .est-rapidos { display: flex; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .4rem; }
.mod-partes .est-rapidos a { padding: .25rem .6rem; border: 1px solid var(--p-borde); border-radius: 1rem; font-size: .8rem; text-decoration: none; color: var(--p-navy); background: #fff; }
.mod-partes .est-clasificar { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.mod-partes .est-clasificar form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 18rem) auto; gap: .5rem; align-items: center; }
.mod-partes .est-clasificar select { margin: 0; }
.mod-partes .est-orig { overflow-wrap: anywhere; font-size: .88rem; }
@media (max-width: 40rem) {
  .mod-partes .est-barras li { grid-template-columns: 1fr 4.5rem; }
  .mod-partes .est-barras .est-pista { grid-column: 1 / -1; grid-row: 2; }
  .mod-partes .est-clasificar form { grid-template-columns: 1fr; }
}
@media print { .mod-partes .est-kpi { break-inside: avoid; } .mod-partes .est-barras li { break-inside: avoid; } }
.mod-partes .est-barras ~ .ayuda-campo, .mod-partes .est-col ~ .ayuda-campo, .mod-partes .est-mapa ~ .ayuda-campo { margin-top: .7rem; }
.mod-partes .est-campo { margin: .6rem 0 .25rem; font-size: .78rem; font-weight: 700; color: var(--p-txt2); text-transform: uppercase; letter-spacing: .03em; }
.mod-partes .est-sub small { font-weight: 600; color: var(--p-txt2); }

/* Campañas, controles y seguimientos */
.tabla-datos tr.anulada { opacity: .6; }
.ctl-alerta { color: var(--error-borde); font-weight: 700; }
.ctl-cobertura { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.ctl-cobertura li { border: 1px solid var(--borde); border-radius: .4rem; padding: .35rem .5rem; font-size: .85rem; background: var(--superficie); }
.ctl-cobertura li strong { display: block; font-size: 1.05rem; }
.ctl-cobertura li.ctl-sin { border-color: var(--error-borde); background: var(--error-fondo); }
.ctl-cobertura li.ctl-futuro { opacity: .55; border-style: dashed; }
.ctl-dias { display: flex; flex-wrap: wrap; gap: .45rem; margin: .3rem 0 .9rem; }
.ctl-dias label { position: relative; display: inline-flex; cursor: pointer; }
.ctl-dias input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ctl-dias label > span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; padding: .45rem .8rem; border: 1px solid var(--borde-campo); border-radius: 999px; background: var(--superficie); font-weight: 600; color: var(--texto-suave); transition: background .12s, color .12s, border-color .12s; user-select: none; }
.ctl-dias label:hover > span { border-color: var(--boton-azul); }
.ctl-dias input:checked + span { background: var(--boton-azul); border-color: var(--boton-azul); color: #fff; }
.ctl-dias input:focus-visible + span { outline: 3px solid var(--ambar); outline-offset: 2px; }
.ctl-ayuda-sup { margin: .6rem 0 .1rem; font-weight: 600; color: var(--texto); }
.ctl-ayuda-sup span { font-weight: 400; color: var(--texto-suave); }
.ctl-franja { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: .3rem 0 .4rem; }
.ctl-franja.ctl-franja label { display: inline; margin: 0; font-weight: 600; }
.ctl-franja.ctl-franja input[type="time"] { flex: none; width: 9.5rem; }
.ctl-fila { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.ctl-fila .campo { flex: 0 1 12rem; margin: 0; }
.ctl-fila .casilla { margin: 0; }
.ctl-historial { margin: 0; padding: 0; list-style: none; }
.ctl-historial li { padding: .45rem 0; border-bottom: 1px solid var(--borde); }
.ctl-historial small { color: var(--texto-suave); }
.ctl-metrica { display: grid; grid-template-columns: 2fr 1fr; gap: .75rem; }
.ord-tareas { margin: 0; padding: 0; list-style: none; }
.ord-tarea { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; align-items: flex-start; padding: .6rem 0; border-bottom: 1px solid var(--borde); }
.ord-tarea > div { flex: 1 1 18rem; }
.ord-acciones { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; flex: 1 1 18rem; }
.ord-acciones input { flex: 1 1 10rem; min-width: 8rem; }
.ord-hecho > div { opacity: .85; }

/* Portada: tarjetas de módulo más compactas (menos sensación de saturación) */
.rejilla-modulos:not(.rejilla-modulos-chica) { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo { grid-template-columns: 3rem minmax(0, 1fr); text-align: left; justify-items: start; align-items: center; padding: .7rem .85rem .7rem 1rem; column-gap: .75rem; border-left-width: 5px; border-radius: .75rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-icono { width: 3rem; height: 3rem; border-radius: .75rem; display: flex; align-items: center; justify-content: center; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-icono svg { width: 1.9rem; height: 1.9rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-titulo { font-size: 1rem; text-align: left; align-self: end; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-icono { align-self: center; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-desc { font-size: .76rem; line-height: 1.25; }
.tarjeta-modulo .estado-pendiente { background: #fdecc8; color: #7a4a00; }
/* Las tarjetas de la portada que usan la clase mod-partes solo toman su color de acento, no el diseño del módulo */
.rejilla-modulos .tarjeta-modulo.mod-partes { display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding: .7rem .85rem .7rem 1rem; gap: 0 .75rem; align-items: center; }
/* Administración de la portada: compacta, como los módulos */
.rejilla-modulos-chica { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.rejilla-modulos-chica .tarjeta-modulo-chica { padding: 0; border-left-width: 5px; border-radius: .75rem; }
.rejilla-modulos-chica .modulo-cuerpo { padding: .6rem .85rem; column-gap: .7rem; }
.rejilla-modulos-chica .admin-icono { width: 2.4rem; height: 2.4rem; border-radius: .6rem; }
.rejilla-modulos-chica .admin-icono svg { width: 1.45rem; height: 1.45rem; }
.rejilla-modulos-chica .modulo-titulo { font-size: 1rem; }
.rejilla-modulos-chica .nota { font-size: .76rem; line-height: 1.25; color: var(--texto-suave); }
.acciones-portal .boton { padding-block: .5rem; font-size: .95rem; }
/* Portada: contenido de cada tarjeta alineado por arriba (los títulos quedan a la misma altura en cada fila) */
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo,
.rejilla-modulos .tarjeta-modulo.mod-partes { align-items: start; align-content: start; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-icono { align-self: start; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-titulo { align-self: start; }
.rejilla-modulos-chica .modulo-cuerpo { align-items: start; }
.rejilla-modulos-chica .admin-icono { align-self: start; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-titulo { font-size: .95rem; }
.rejilla-modulos .tarjeta-modulo .modulo-titulo .insignia { margin-left: .15rem; padding: 0 .35rem; font-size: .68rem; vertical-align: 1px; }
.mod-partes .descarga-botones { display: flex; flex-wrap: wrap; gap: .6rem; }
.mod-partes .descarga-botones .boton { flex: 1 1 14rem; text-align: center; }

/* Flecha de los acordeones del parte: grande y con aspecto de botón, para que se vea que hay algo dentro */
.mod-partes .chk-flecha { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--p-gold-bg); color: var(--p-gold); font-size: 1.15rem; line-height: 1; transition: transform .15s; }
.mod-partes .chk-acc[open] > summary .chk-flecha { transform: rotate(180deg); }
.mod-partes .chk-badge-verde { background: var(--p-green-bg); color: var(--p-green); }
.mod-partes .plegable > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.mod-partes .plegable > summary::-webkit-details-marker { display: none; }
.mod-partes .plegable-titulo h2 { margin: 0; }
.mod-partes .plegable-resumen { display: block; margin-top: .2rem; font-size: .85rem; color: var(--p-txt2); }
.mod-partes .plegable-aviso { color: var(--p-red); }
.mod-partes .plegable-boton { flex: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--p-gold); background: var(--p-gold-bg); color: var(--p-gold); font-weight: 800; font-size: .85rem; }
.mod-partes .plegable-boton::after { content: "▾"; font-size: 1.1rem; line-height: 1; transition: transform .15s; }
.mod-partes .plegable[open] > summary .plegable-boton::after { transform: rotate(180deg); }
.mod-partes .plegable .solo-abierto { display: none; }
.mod-partes .plegable[open] .solo-abierto { display: inline; }
.mod-partes .plegable[open] .solo-cerrado { display: none; }
.mod-partes .plegable > summary:focus-visible { outline: 3px solid var(--p-gold); outline-offset: 3px; border-radius: .4rem; }
.mod-partes .plegable[open] > summary { margin-bottom: .8rem; }

/* Iconos del formulario de intervención */
.mod-partes fieldset.seccion > legend { display: flex; align-items: center; gap: .5rem; font-size: .8rem; margin-bottom: .6rem; }
.mod-partes .ico-sec { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: .5rem; background: var(--p-gold-bg); font-size: 1.05rem; line-height: 1; letter-spacing: 0; }
.mod-partes .elemento legend { display: inline-flex; align-items: center; gap: .4rem; }
.mod-partes .elemento legend .ico-sec { width: 1.6rem; height: 1.6rem; font-size: .9rem; }
.mod-partes .ico-lbl { display: inline-block; width: 1.25em; text-align: center; margin-right: .1rem; opacity: .9; }

/* Quien avisa (requirente) */
.mod-partes .requirente { margin-bottom: .4rem; }
.mod-partes .requirente[hidden], .mod-partes .requirente [hidden] { display: none; }
.mod-partes .fila-tel { display: flex; gap: .5rem; align-items: stretch; }
.mod-partes .fila-tel input { flex: 1 1 auto; min-width: 0; margin: 0; }
.mod-partes .fila-tel .boton { flex: none; margin: 0; }

/* Quien avisa: una sola fila en pantallas anchas (documento y nº más estrechos, apellidos más ancho) */
.mod-partes .rejilla-req { display: grid; gap: .6rem .8rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); align-items: start; }
.mod-partes .rejilla-req .campo { margin: 0; min-width: 0; }
.mod-partes .rejilla-req[hidden] { display: none; }
@media (min-width: 62rem) {
  .mod-partes .rejilla-req { grid-template-columns: minmax(7rem, 1fr) minmax(10rem, 1.6fr) 9.5rem 8.5rem 8.5rem; }
}

/* ---- Ficha de persona al buscar: «galleta» de identificación, cambios de datos e historial ---- */
.personas-fichas { margin: .6rem 0 1.4rem; }
.fichas-titulo { margin: 0 0 .6rem; font-size: 1.05rem; color: var(--texto); }
.fichas-titulo small { font-weight: 600; color: var(--texto-suave); margin-left: .4rem; }
.ficha-persona { border: 1px solid var(--borde); border-radius: .8rem; background: var(--superficie); margin-bottom: 1.2rem; overflow: hidden; box-shadow: 0 2px 6px rgba(15,35,56,.12); }
.galleta { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.1rem; align-items: center; padding: 1rem 1.2rem; background: linear-gradient(135deg, var(--superficie-honda), #f3f8fd); border-bottom: 4px solid var(--boton-azul); }
.galleta-foto { width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--tabla-cabecera); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800; letter-spacing: .05em; }
.galleta-nombre { font-size: 1.35rem; font-weight: 800; color: var(--texto); line-height: 1.15; }
.galleta-doc { margin: .25rem 0 .55rem; font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.galleta-tipo { display: inline-block; background: var(--boton-azul); color: #fff; font-size: .75rem; padding: .1rem .5rem; border-radius: .3rem; margin-right: .3rem; vertical-align: .08rem; }
.galleta-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem 1.2rem; margin: 0; }
.galleta-rejilla div { min-width: 0; }
.galleta-rejilla .ancho { grid-column: 1 / -1; }
.galleta-rejilla dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.galleta-rejilla dd { margin: 0; font-weight: 600; color: var(--texto); overflow-wrap: anywhere; }
.galleta-resumen { text-align: center; min-width: 11rem; max-width: 14rem; }
.galleta-total strong { display: block; font-size: 2.4rem; line-height: 1; color: var(--boton-azul-oscuro); }
.galleta-total span { font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
.galleta-fechas { margin: .45rem 0; font-size: .8rem; color: var(--texto-suave); }
.galleta-roles { display: flex; flex-wrap: wrap; gap: .25rem; justify-content: center; }
.rol-chip { display: inline-block; padding: .08rem .55rem; border-radius: 1rem; font-size: .75rem; font-weight: 700; color: #fff; background: #5b6b7b; white-space: nowrap; }
.rol-chip.rol-denunciado { background: #c23b3b; }
.rol-chip.rol-detenido { background: #7a1620; }
.rol-chip.rol-victima { background: #1a6fc4; }
.rol-chip.rol-requirente { background: #7a4bb5; }
.rol-chip.rol-testigo { background: #17837f; }
.rol-chip.rol-auxiliado { background: #1f8a5e; }
.rol-chip.rol-identificado { background: #5b6b7b; }
.rol-chip.rol-otro { background: #8a7a5b; }
.ficha-cambios { margin: 0; padding: .8rem 1.2rem; background: #fff6e0; border-bottom: 1px solid #ecd08a; border-left: 6px solid var(--ambar); }
.ficha-cambios h4 { margin: 0 0 .4rem; font-size: .95rem; color: #7a4d00; }
.cambio-campo { margin-bottom: .45rem; }
.cambio-campo ul { list-style: none; margin: .15rem 0 0; padding: 0; }
.cambio-campo li { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; padding: .15rem 0 .15rem .8rem; border-left: 3px solid #d9c18a; margin-bottom: .15rem; }
.cambio-campo li.cambio-actual { border-left-color: var(--ok-borde); font-weight: 700; }
.cambio-antiguo .cambio-valor { color: var(--texto-suave); text-decoration: line-through; text-decoration-color: rgba(63,91,118,.45); }
.cambio-fechas { font-size: .78rem; color: var(--texto-suave); font-weight: 600; }
.ficha-historial { list-style: none; margin: 0; padding: .9rem 1.2rem 1rem 1.2rem; position: relative; }
.ficha-historial .hecho { display: grid; grid-template-columns: 8.6rem minmax(0, 1fr) auto; gap: .8rem; align-items: center; position: relative; padding: .55rem .8rem; margin: 0 0 .5rem 1.1rem; border: 1px solid var(--borde-suave); border-left: 6px solid #5b6b7b; border-radius: .5rem; background: #fbfdff; }
.ficha-historial .hecho::before { content: ""; position: absolute; left: -1.55rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.4rem; border-radius: 50%; background: var(--superficie); border: 3px solid var(--tabla-cabecera); }
.ficha-historial::before { content: ""; position: absolute; left: 1.55rem; top: 1.4rem; bottom: 1.6rem; width: 3px; background: var(--borde-suave); }
.hecho.rol-denunciado { border-left-color: #c23b3b; } .hecho.rol-detenido { border-left-color: #7a1620; } .hecho.rol-victima { border-left-color: #1a6fc4; }
.hecho.rol-requirente { border-left-color: #7a4bb5; } .hecho.rol-testigo { border-left-color: #17837f; } .hecho.rol-auxiliado { border-left-color: #1f8a5e; }
.hecho-fecha { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto); font-size: .92rem; }
.hecho-linea { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.hecho-lugar { color: var(--texto-suave); font-size: .88rem; }
.hecho-detalle { font-size: .83rem; color: var(--texto-suave); margin-top: .2rem; }
.hecho-dato-distinto { color: #7a4d00; font-weight: 600; }
@media (max-width: 55rem) {
  .galleta { grid-template-columns: auto minmax(0, 1fr); }
  .galleta-resumen { grid-column: 1 / -1; max-width: none; display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; justify-content: space-between; text-align: left; }
  .ficha-historial .hecho { grid-template-columns: minmax(0, 1fr) auto; }
  .ficha-historial .hecho .hecho-fecha { grid-column: 1 / -1; }
}
.mod-partes .int-redaccion { margin: .35rem 0 0; font-size: .85rem; }
.mod-partes .int-redaccion summary { cursor: pointer; font-weight: 700; color: var(--boton-azul-oscuro); }

/* Vehículos abandonados */
.aba-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .35rem .9rem; }
.aba-check { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.3; }
.aba-fotos { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }
.aba-fotos img { width: 11rem; height: 8rem; object-fit: cover; border-radius: .4rem; border: 1px solid #c9d3de; display: block; }
.aba-alerta ul { margin: .4rem 0 0 1.2rem; padding: 0; }
.aba-detalle { margin-top: .8rem; }
.aba-detalle summary, .aba-agentes summary { cursor: pointer; font-weight: 600; }
.resumen-estados { display: flex; flex-wrap: wrap; gap: .35rem; }
[hidden] { display: none !important; }
.lista-simple { margin: .2rem 0 .6rem 1.1rem; padding: 0; }
.campo-check { align-self: end; }
.campo-check label { display: flex; gap: .4rem; align-items: center; font-weight: 600; }
.aba-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem .9rem; align-items: end; margin-bottom: .6rem; }
.aba-fila .campo-ancho { grid-column: 1 / -1; }
.aba-fila .campo input:not([type=checkbox]):not([type=radio]), .aba-fila .campo select { width: 100%; }

/* Alta de vehículos abandonados (maquetación de la app Incidencias) */
.aba-alta .req { color: #b3261e; }
.aba-nota { background: #dbe9f7; border: 1px solid #3f7cc0; border-radius: .5rem; padding: .7rem .9rem; margin: .2rem 0 1rem; color: #12395f; font-weight: 600; }
.aba-grid { display: grid; gap: .6rem 1rem; margin-bottom: .6rem; }
.aba-g2 { grid-template-columns: 1fr 1fr; }
.aba-g3 { grid-template-columns: 1fr 1fr 1fr; align-items: end; }
.aba-g4 { grid-template-columns: 1fr 1fr 1fr 1fr; align-items: end; }
.aba-grid .campo, .aba-alta .campo { margin-bottom: .4rem; }
.aba-alta input:not([type=checkbox]):not([type=radio]):not([type=file]), .aba-alta select, .aba-alta textarea { width: 100%; box-sizing: border-box; }
.aba-sep { border: 0; border-top: 1px solid #dde4ec; margin: 1rem 0; }
.aba-sep-top { margin-top: 1rem; }
.aba-sinmat { display: flex; gap: .45rem; align-items: center; margin: 0 0 .6rem; font-weight: 600; }
.aba-gps { display: grid; grid-template-columns: 1fr 1fr auto; gap: .6rem; margin: .2rem 0 1rem; align-items: center; }
.aba-etq { font-weight: 700; margin: 1rem 0 .4rem; color: #3a4a5c; }
.aba-pills { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; }
.aba-pill { position: relative; display: block; cursor: pointer; }
.aba-pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.aba-pill span { display: block; padding: .5rem .8rem; border: 1px solid #c9d3de; border-radius: .5rem; background: #fff; font-weight: 500; }
.aba-pill input:checked + span { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.aba-pill input:focus-visible + span { outline: 3px solid #d98c00; outline-offset: 2px; }
.aba-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.aba-chip { position: relative; cursor: pointer; }
.aba-chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.aba-chip span { display: block; padding: .25rem .8rem; border: 1px solid #1f4e79; border-radius: 999px; color: #1f4e79; background: #fff; font-size: .9rem; }
.aba-chip input:checked + span { background: #1f4e79; color: #fff; }
.aba-chip input:focus-visible + span { outline: 3px solid #d98c00; outline-offset: 2px; }
.aba-fototit { margin: 1.2rem 0 .1rem; color: #1f4e79; }
.aba-fotos-sel { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0 1rem; }
.aba-foto-add { position: relative; width: 11rem; height: 11rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; border: 2px dashed #c4c9cf; border-radius: .6rem; background: #fafafa; color: #8a939c; cursor: pointer; font-size: .85rem; }
.aba-foto-add input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.aba-foto-add .ico { font-size: 1.8rem; }
.aba-foto-mini { width: 11rem; height: 11rem; object-fit: cover; border-radius: .6rem; border: 1px solid #c9d3de; }
.aba-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .8rem; }
.aba-botones .boton { padding: .85rem 1rem; font-size: 1rem; }
.aba-botones .boton[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 900px) { .aba-g4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .aba-g2, .aba-g3, .aba-g4, .aba-pills, .aba-botones { grid-template-columns: 1fr; } .aba-gps { grid-template-columns: 1fr 1fr; } .aba-gps button { grid-column: 1 / -1; } }
.aba-alta .aba-foto-add { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-weight: 500; }
.aba-alta .aba-foto-add .ico { font-size: 2rem; line-height: 1; }
.aba-sugerencia { background: #fff3cd; border: 1px solid #d98c00; border-radius: .5rem; padding: .6rem .8rem; margin: 0 0 .6rem; color: #5d4300; }
.aba-sugerencia .boton { margin-left: .4rem; }

/* Alta de vehículos abandonados: formulario compacto */
.aba-alta .grua-form .campo, .aba-alta .campo { margin: 0; }
.aba-alta .aba-grid { gap: .45rem .8rem; margin-bottom: .45rem; }
.aba-alta .aba-sep { margin: .7rem 0; }
.aba-alta .aba-sinmat { margin: .35rem 0 0; font-weight: 600; }
.aba-alta .aba-etq { margin: .8rem 0 .3rem; }
.aba-alta .aba-sit { align-self: end; margin: 0 0 .55rem; white-space: nowrap; }
.aba-titular2 { grid-template-columns: 2fr 1fr 1fr auto; align-items: end; }
.aba-lugar { grid-template-columns: 2fr 1fr auto; align-items: end; }
.aba-lugar .boton { height: 2.7rem; white-space: nowrap; }
.aba-peq { font-weight: 400; font-size: .8rem; color: #5a6b7c; }
@media (max-width: 760px) { .aba-titular2, .aba-lugar { grid-template-columns: 1fr; } }
.aba-alta .grua-form { gap: .5rem; }
.aba-alta .aba-grid { margin-bottom: 0; }

/* Chips de agentes más pequeños */
.aba-chips { gap: .3rem; }
.aba-chip span { padding: .12rem .6rem; font-size: .78rem; font-weight: 500; }
/* Consulta negativa (calcada de la app anterior) */
/* Accidentes: selector de tipo con esquema de referencia */
.tipo-acc .pestanas { margin-bottom: .6rem; }
.tipo-img { display: block; max-width: min(100%, 520px); height: auto; margin: 0 auto .8rem; border: 1px solid var(--borde, #cbd5e1); border-radius: .4rem; background: #fff; }
.tipo-extra { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--borde, #cbd5e1); }
/* Variante compacta del aviso (Accidentes: alta) */
.aba-nota-chica { padding: .4rem .7rem; margin: .1rem 0 .7rem; font-size: .82rem; font-weight: 500; line-height: 1.35; }
.aba-nota-cn { background: #e9eef2; border-color: #5d7a8c; color: #c2560c; font-weight: 500; }
.aba-nota-cn strong { color: #c2560c; }
.aba-botones-1 { grid-template-columns: 1fr; }
.aba-boton-cn { background: #546e7a; color: #fff; border: 0; }
.aba-boton-cn:hover { background: #455a64; }

/* Sin seguro (calcado de la app anterior) */
.aba-nota-ss { background: #fdecea; border-color: #b71c1c; color: #c2560c; font-weight: 500; }
.aba-nota-ss strong { color: #c2560c; }
.aba-etq-peq { font-size: .85rem; margin: .5rem 0 0; }
.aba-infrs { display: grid; gap: .5rem; }
.aba-infr { border: 1px solid #dde4ec; border-radius: .6rem; padding: .5rem .8rem; background: #fff; }
.aba-infr-t { display: flex; gap: .55rem; align-items: center; font-weight: 700; margin: 0; cursor: pointer; }
.aba-infr-d { background: #f6f6f6; border-radius: .4rem; padding: .5rem .8rem; margin-top: .45rem; font-size: .85rem; line-height: 1.45; }
.aba-infr-d p { margin: .3rem 0 0; color: #555; }
.aba-acta-ok{color:var(--ok,#1b6e3c);font-weight:600}
.aba-alta .aba-ges { max-width: 28rem; }
.aba-alta .aba-ges input { width: 100%; }
.aba-lugar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; }
.aba-lugar .boton { height: 38px; padding-top: 0; padding-bottom: 0; align-self: end; margin: 0; }
@media (max-width: 760px) { .aba-lugar { grid-template-columns: 1fr; } }
.aba-lugar { align-items: start; }
.aba-lugar .campo input { height: 2.6rem; box-sizing: border-box; }
.aba-lugar .aba-gps-c .boton { height: 2.6rem; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; white-space: nowrap; }

/* Ocupaciones de vía pública y mapa */
.ocu-buscar { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin: .4rem 0; }
.ocu-buscar input { font-size: 1.15rem; padding: .7rem .9rem; }
.ocu-tarjetas { display: grid; gap: .6rem; margin-top: .6rem; }
.ocu-tarjeta { display: block; border: 1px solid #c9d4df; border-left-width: 6px; border-radius: .5rem; padding: .6rem .8rem; background: #fff; color: inherit; text-decoration: none; }
.ocu-tarjeta:hover { background: #f4f8fb; }
.ocu-tarjeta.ocu-vigente { border-left-color: #1b7f3b; }
.ocu-tarjeta.ocu-mal { border-left-color: #c0392b; background: #fdf3f1; }
.ocu-tarjeta.ocu-otro { border-left-color: #d98c00; }
.ocu-t-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: 1.05rem; }
.ocu-t-datos { margin-top: .2rem; font-size: .95rem; }
.ocu-tramo { border: 1px solid #c9d4df; border-radius: .5rem; padding: .5rem .7rem .7rem; margin: 0 0 .6rem; }
.ocu-tramo legend { font-weight: 600; padding: 0 .3rem; }
.ocu-checks { display: grid; gap: .3rem; padding: .5rem 0; }
.ocu-checks label { display: flex; gap: .5rem; align-items: flex-start; font-weight: 400; }
.ocu-mapa { width: 100%; height: 320px; border: 1px solid #c9d4df; border-radius: .5rem; margin: .4rem 0 .8rem; z-index: 0; }
.ocu-mapa-ficha { height: 240px; }
.ocu-mapa-grande { height: min(70vh, 640px); }
.ocu-leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; font-size: .9rem; margin: .4rem 0; }
.ocu-pt { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #8896a5; }
.ocu-pt-vigente { background: #1b7f3b; } .ocu-pt-otro { background: #d98c00; } .ocu-pt-mal { background: #c0392b; } .ocu-pt-fin { background: #6b7a8a; }
.ocu-inactivo { opacity: .55; }
.solo-imprimir { display: none; }
@media print { .solo-imprimir { display: block; } .ocu-terrazas { font-size: 9pt; } }
@media (max-width: 640px) { .ocu-buscar { grid-template-columns: 1fr; } .ocu-mapa { height: 280px; } }

/* Incidencias urbanas */
.inc-urg { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; background: #6b7a8a; }
.inc-urg-Urgente { background: #c00000; } .inc-urg-Alta { background: #c55a11; } .inc-urg-Media { background: #ffc000; color: #3d2f00; } .inc-urg-Baja { background: #1a5c38; }
.inc-vencida { color: #b00020; }
.inc-fila-vencida { background: #fdf3f1; }
.inc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; margin: .4rem 0 .8rem; }
.inc-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .6rem .8rem; border: 1px solid #c9d4df; border-left-width: 6px; border-radius: .5rem; background: #fff; color: inherit; text-decoration: none; }
.inc-kpi:hover { background: #f4f8fb; }
.inc-kpi strong { font-size: 1.7rem; line-height: 1; }
.inc-kpi span { font-size: .9rem; }
.inc-kpi-mal { border-left-color: #c0392b; background: #fdf3f1; }
.inc-kpi-aviso { border-left-color: #d98c00; }
.inc-aro { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; border: 4px solid #7a0000; background: #fff; box-sizing: border-box; }
.inc-comprobacion { border: 1px solid #c9d4df; border-radius: .5rem; padding: .6rem .8rem; margin: .6rem 0; background: #fff; }
.inc-comprobacion h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.inc-cat-tit { margin: 1rem 0 .3rem; font-size: 1rem; }
.aba-en-linea { display: inline-block; margin: 0; }

/* Incidencias: antes / después */
.inc-antes-despues { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: .4rem 0 1rem; }
.inc-antes-despues figure { margin: 0; }
.inc-antes-despues img { width: 100%; height: 14rem; object-fit: cover; border-radius: .5rem; border: 1px solid #c9d3de; display: block; }
.inc-antes-despues figcaption { font-size: .85rem; color: #475569; margin-top: .25rem; }
@media (max-width: 36rem) { .inc-antes-despues { grid-template-columns: 1fr; } }

/* Hora con botón «Ahora» */
.aba-hora { display: flex; gap: .4rem; align-items: center; }
.aba-hora input { flex: 1; min-width: 0; }

/* Alta de accidentes: filas alineadas y selectores compactos */
.aba-grid { align-items: end; }
.aba-alta .campo input:not([type=checkbox]):not([type=radio]):not([type=file]), .aba-alta .campo select { height: 2.6rem; }
.aba-alta .campo textarea { min-height: 4rem; }
.aba-g-dom { grid-template-columns: 2fr 1fr 1fr 8rem; }
.aba-g-dt { grid-template-columns: 11rem 2fr 1fr; }
.aba-tipos { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: 0 0 .8rem; }
.aba-tipo-u { flex: 0 0 13rem; margin: 0; }
.aba-tipo-u select { width: 100%; }
@media (max-width: 900px) { .aba-g-dom { grid-template-columns: 1fr 1fr; } .aba-g-dt { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .aba-g-dom { grid-template-columns: 1fr; } .aba-tipo-u { flex: 1 1 100%; } }
.aba-fh .campo input { height: 2.6rem; box-sizing: border-box; }
.aba-fh .aba-gps-c .boton { height: 2.6rem; width: 100%; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.aba-lugar .aba-gps-c .boton { width: 100%; }
.aba-lugar { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 9.5rem; }
@media (max-width: 760px) { .aba-lugar { grid-template-columns: 1fr; } }
.aba-lugar { align-items: end; }
.aba-lugar .aba-gps-c label { display: none; }
.aba-lugar .aba-gps-c .boton { margin-bottom: 10.4px; }
.aba-etq-top { margin-top: .2rem; }
.aba-agentes .ayuda-inline { font-weight: 400; color: #5a6b7d; font-size: .8rem; }
.aba-agentes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .aba-agentes { grid-template-columns: 1fr 1fr; } }
.aba-g-dom3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.fi-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: .4rem 0 1.1rem; padding: .6rem; background: #12304f; border-radius: .8rem; box-shadow: 0 4px 14px rgba(18, 48, 79, .4); }
.fi-tabs .pestana { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; font-size: 1.05rem; font-weight: 700; padding: .75rem .9rem; border-radius: .55rem; border: 2px solid #3f78b5; background: #2c6aa8; color: #fff; white-space: nowrap; transition: transform .08s, background .12s; }
.fi-tabs .pestana:hover { background: #3b7fc4; border-color: #8fc0f0; transform: translateY(-1px); }
.fi-tabs .pestana[aria-selected="true"] { background: #ffc61a; color: #12304f; border-color: #fff; box-shadow: 0 0 0 3px #ffc61a66, 0 3px 8px rgba(0, 0, 0, .35); transform: translateY(-1px); }
.fi-tabs .pestana:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fi-tab-ico { font-size: 1.2rem; line-height: 1; }
@media (max-width: 700px) { .fi-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { .fi-tabs { display: none; } }
.fi-panel[hidden] { display: none; }
@media print { .fi-panel[hidden] { display: block; } }
.aba-destino { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.etiqueta-leves { color: #5c3b00; background: #ffe08a; border: 1px solid #d9a520; }
.etiqueta-danos { color: #2f3b48; background: #e3e8ee; border: 1px solid #aab6c3; }

.fi-paso { margin: .7rem 0 .25rem; font-weight: 700; color: #1f4e79; }
.fi-botones { display: flex; flex-wrap: wrap; gap: .35rem; }
.fi-opc { font: inherit; font-size: .85rem; padding: .35rem .65rem; border: 1px solid #9fb0c3; border-radius: .4rem; background: #eef2f7; color: #1f2d3a; cursor: pointer; }
.fi-opc:hover { background: #dbe6f2; }
.fi-opc[aria-pressed="true"] { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.fi-opc:focus-visible { outline: 3px solid #d98c00; outline-offset: 2px; }
.fi-oc-form[hidden] { display: none; }

/* Pestaña de unidad, a la manera del gestor: secciones con barra dorada, filas compactas y barra de acciones oscura */
.fi-unidad { padding: 0; overflow: hidden; }
.fi-titulo { margin: 0; padding: 1rem 1.2rem .6rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.5rem; text-transform: uppercase; color: #14283d; border-bottom: 3px solid #c8962e; }
.fi-form { padding: 0 1.2rem 0; }
.fi-h { margin: 1.2rem 0 .5rem; padding: .15rem 0 .3rem .6rem; border-left: 5px solid #c8962e; border-bottom: 1px solid #d5dbe3; font-size: .85rem; letter-spacing: .02em; text-transform: uppercase; color: #14283d; }
.fi-fila { display: flex; flex-wrap: wrap; gap: .5rem .7rem; align-items: flex-end; margin: 0 0 .5rem; }
.fi-fila .campo { margin: 0; flex: 0 0 auto; }
.fi-fila .campo label { font-size: .78rem; font-weight: 400; color: #5b6978; }
.fi-fila .campo input, .fi-fila .campo select { width: 100%; padding: .35rem .45rem; font-size: .92rem; border-radius: .2rem; }
.fi-w1 { width: 5.5rem; } .fi-w2 { width: 9.6rem; } .fi-w3 { width: 11.5rem; } .fi-w4 { width: 16rem; }
.fi-grow { flex: 1 1 12rem !important; }
.fi-fila-chk { gap: .5rem 1.4rem; }
.fi-chk { display: inline-flex; align-items: center; gap: .35rem; font-size: .92rem; cursor: pointer; padding-bottom: .35rem; }
.fi-chk input { width: auto; }
.fi-chk-grande { gap: .6rem; font-size: 1.15rem; padding: .55rem .9rem; border: 2px solid currentColor; border-radius: .4rem; background: #fff; }
.fi-chk-grande input { width: 1.6rem; height: 1.6rem; accent-color: currentColor; cursor: pointer; }
.fi-chk-rojo { color: #b3261e; } .fi-chk-verde { color: #1b7a3a; }
.fi-nota { margin: 0 0 .5rem; font-size: .8rem; font-style: italic; color: #c25b00; }
.fi-verde { font: inherit; font-weight: 700; color: #fff; background: #27ae60; border: 0; border-radius: .25rem; padding: .45rem .9rem; cursor: pointer; }
.fi-banda { margin-top: .4rem; padding: .45rem .8rem; background: #1a3a5c; color: #fff; font-weight: 700; }
.fi-banda small { font-weight: 400; font-style: italic; color: #a9c4e0; margin-left: .6rem; }
.fi-banda-osc { background: #2c3e50; margin-top: .6rem; }
.fi-casc { padding: .3rem .8rem .6rem; border: 1px solid #c9d3de; border-top: 0; }
.fi-danos textarea { width: 100%; box-sizing: border-box; border: 1px solid #2c3e50; padding: .5rem; font: inherit; }
.fi-mini { display: flex; gap: .4rem; margin: .3rem 0; }
.fi-ejemplos { border: 1px solid #c9d3de; padding: .4rem .8rem; max-height: 18rem; overflow: auto; }
.fi-ejemplos[hidden] { display: none; }
.fi-mal { color: #b3261e; font-weight: 700; } .fi-bien { color: #1b7a3a; font-weight: 700; }
.fi-barra { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 1.2rem -1.2rem 0; padding: .6rem 1.2rem; background: #14283d; }
.fi-bb-esp { flex: 1 1 auto; }
.fi-bb { font: inherit; font-weight: 700; font-size: .92rem; color: #fff; border: 0; border-radius: .25rem; padding: .55rem 1rem; cursor: pointer; text-decoration: none; display: inline-block; }
.fi-bb-gris { background: transparent; color: #dbe5ef; } .fi-bb-gris:hover { background: #24405c; }
.fi-bb-morado { background: #7d3c98; } .fi-bb-dorado { background: #c8962e; } .fi-bb-azul { background: #1f6fb2; }
.fi-bb-osc { background: #2c3e50; } .fi-bb-claro { background: #e5e9ee; color: #1f2d3a; }
.fi-oc-form { padding: 0 1.2rem 1rem; border-top: 3px solid #27ae60; }
.fi-form .fi-fila .campo input:not([type="checkbox"]), .fi-form .fi-fila .campo select { height: 2.2rem; padding: .2rem .5rem; box-sizing: border-box; }
.fi-form .fi-chk { font-weight: 600; }

/* Cabecera de la ficha: datos en recuadros separados */
.fi-resumen { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .7rem; margin: .8rem 0; }
.fi-resumen > div { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .8rem; border: 1px solid #d5dbe3; border-left: 4px solid #c8962e; border-radius: .3rem; background: #f7f9fb; }
.fi-resumen dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.fi-resumen dd { font-size: 1rem; }
.fi-general .fi-h:first-of-type { margin-top: .4rem; }
.fi-general { padding-top: .2rem; }
/* Datos del vehículo en una sola fila */
.fi-una { flex-wrap: nowrap; }
.fi-una .campo { flex: 1 1 0 !important; min-width: 0; width: auto; }
.fi-una .fi-w1 { flex-grow: .6 !important; }
@media (max-width: 62rem) { .fi-una { flex-wrap: wrap; } .fi-una .campo { flex: 1 1 9rem !important; } }
/* Ocupante nuevo: justo donde se añade, dentro del bloque de ocupantes */
.fi-oc-nuevo { margin: .6rem 0 1rem; padding: .2rem 1rem 1rem; border: 2px solid #27ae60; border-radius: .3rem; background: #f4fbf6; }
.fi-oc-nuevo[hidden] { display: none; }
.fi-oc-nuevo .fi-barra { position: static; margin: 1rem -1rem -1rem; }
.fi-oc-nuevo .campo input:not([type="checkbox"]), .fi-oc-nuevo .campo select { height: 2.2rem; padding: .2rem .5rem; box-sizing: border-box; width: 100%; }
.fi-oc-nuevo .fi-fila .campo label { font-size: .78rem; font-weight: 400; color: #5b6978; }
.fi-oc-form { padding: 0; border: 0; }
.fi-tom-elegir { margin-top: .6rem; }
/* Asistente de daños con foto de referencia */
.fi-casc-foto { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.fi-foto { margin: .7rem 0 0; flex: 0 0 22rem; max-width: 100%; }
.fi-foto img { display: block; width: 100%; height: auto; border: 1px solid #c9d3de; border-radius: .3rem; background: #eef4fb; }
.fi-foto img[hidden] { display: none; }
.fi-foto figcaption { margin-top: .3rem; font-size: .8rem; color: #5b6978; }
.fi-casc-pasos { flex: 1 1 22rem; min-width: 0; }
/* Anular: recuadro y botón alineados */
.fi-anular { align-items: flex-end; }
.fi-anular .campo input { height: 2.5rem; box-sizing: border-box; }
.fi-anular .boton { height: 2.5rem; box-sizing: border-box; margin: 0; width: auto; padding-top: 0; padding-bottom: 0; }

/* Interruptores (en lugar de casillas con recuadro) */
.fi-form .fi-switch { display: inline-flex; gap: .6rem; margin: 0; padding: 0; border: 0; background: none; height: 2.2rem; line-height: 1; align-items: center; font-size: .95rem; font-weight: 600; color: #2c3e50; }
.fi-form .fi-switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 2.7rem !important; height: 1.5rem !important; min-width: 2.7rem; margin: 0; padding: 0; border: 0; border-radius: 1rem; background: #b9c3cf; cursor: pointer; transition: background .15s; }
.fi-form .fi-switch input[type="checkbox"]::before { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .15s; }
.fi-form .fi-switch input[type="checkbox"]:checked { background: #1b7a3a; }
.fi-form .fi-switch input[type="checkbox"]:checked::before { transform: translateX(1.2rem); }
.fi-form .fi-switch input[type="checkbox"]:focus-visible { outline: 3px solid #d98c00; outline-offset: 2px; }
.fi-ctr { display: contents; }
.fi-ctr[hidden] { display: none; }
/* Tomador: botones para copiar */
.fi-tom-elegir { align-items: center; gap: .5rem .6rem; }
.fi-tom-etq { font-size: .8rem; font-weight: 700; color: #14283d; text-transform: uppercase; letter-spacing: .02em; margin-right: .3rem; }
.fi-pill { font: inherit; font-size: .88rem; font-weight: 600; padding: .35rem .9rem; border: 1px solid #1f4e79; border-radius: 1rem; background: #fff; color: #1f4e79; cursor: pointer; }
.fi-pill:hover { background: #1f4e79; color: #fff; }
/* Fotos de referencia más grandes */
.fi-foto { flex: 0 0 32rem; max-width: 100%; }
.fi-casc-pasos { flex: 1 1 16rem; }

/* Ronda de ajustes: permiso en una fila, selector ancho, botones visibles, daños con foto grande */
.fi-permiso .campo { min-width: 0; }
.fi-permiso { gap: .5rem; }
.fi-permiso .fi-w1 { flex: 0 0 4.6rem !important; }
.fi-permiso .fi-w2 { flex: 0 0 8.6rem !important; }
.fi-permiso .fi-w3 { flex: 0 0 10rem !important; }
.fi-permiso .fi-grow { flex: 1 1 8rem !important; }
.fi-permiso .fi-switch { flex: 0 0 auto; white-space: nowrap; }
.fi-medio { flex: 1 1 22rem !important; }
.fi-medio select { width: 100%; }
.fi-pill { background: #1f4e79; color: #fff; border: 0; border-radius: .3rem; padding: .5rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.fi-pill:hover { background: #2a6cab; }
.fi-pill:active { transform: translateY(1px); box-shadow: none; }
.fi-oc-alta { align-items: center; gap: .8rem; margin: .4rem 0; }
.fi-oc-alta .fi-nota { margin: 0; }
.fi-casc-izq { flex: 1 1 36rem; min-width: 0; }
.fi-casc-foto .fi-foto { flex: none; width: 100%; max-width: 100%; }
.fi-casc-foto .fi-casc-pasos { flex: 1 1 18rem; }

/* Historial plegable */
.ctl-hist-det > summary { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; cursor: pointer; list-style: none; }
.ctl-hist-det > summary::-webkit-details-marker { display: none; }
.ctl-hist-det h2 { margin: 0; }
.ctl-hist-det h2 small { font-weight: 400; color: var(--texto-suave); }
.ctl-hist-ult { flex: 1 1 14rem; font-size: .9rem; color: var(--texto-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctl-hist-btn { font-size: .85rem; font-weight: 700; color: #fff; background: #1f4e79; border-radius: .3rem; padding: .35rem .8rem; }
.ctl-hist-det[open] .ctl-hist-btn { background: #6b7a89; }
.ctl-hist-det[open] .ctl-hist-ult { display: none; }
.ctl-hist-det .ctl-historial { margin-top: .6rem; font-size: .88rem; }
.ctl-hist-det .ctl-historial li { padding: .3rem 0; }
.fi-form .fi-permiso .fi-switch { height: 3.1rem; }
/* Daños: foto media a la izquierda con la descripción debajo; zona/pieza/daño a la derecha */
.fi-casc-foto .fi-casc-izq { flex: 0 0 27rem; max-width: 100%; }
.fi-casc-foto .fi-casc-pasos { flex: 1 1 20rem; min-width: 0; }
.fi-casc-foto .fi-casc-pasos .fi-paso:first-child { margin-top: .7rem; }
.fi-casc-foto .fi-casc-izq { flex: 0 0 56%; }
.fi-casc-foto .fi-casc-pasos { flex: 1 1 14rem; }
@media (max-width: 62rem) { .fi-casc-foto .fi-casc-izq { flex: 1 1 100%; } }
.fi-casc-foto .fi-casc-izq { flex: 0 0 68%; }
.fi-casc-foto .fi-casc-pasos { flex: 1 1 12rem; }
/* Sin foto aún: recuadro guía en lugar de un hueco vacío */
.fi-foto:has(img[hidden]) { display: flex; align-items: center; justify-content: center; min-height: 16rem; border: 2px dashed #1f4e79; border-radius: .4rem; background: #eef4fb; padding: 1rem; text-align: center; }
.fi-foto:has(img[hidden]) figcaption { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1f4e79; }
.fi-danos textarea::placeholder { color: #8a97a5; font-style: italic; }
/* Daños en vertical: zona → foto → pieza → tipo → descripción */
.fi-vert .fi-foto, .fi-vert .fi-foto:has(img[hidden]) { display: block; flex: none; width: 100%; max-width: 50rem; min-height: 0; border: 0; background: none; padding: 0; text-align: left; margin: .6rem 0; }
.fi-vert .fi-foto:has(img[hidden]) figcaption { font-size: .9rem; font-weight: 400; color: #5b6978; }
.fi-vert .fi-botones { margin-bottom: .3rem; }
.fi-vert .fi-paso { margin-top: 1rem; }
.fi-vert > .fi-paso:first-child { margin-top: .7rem; }
.fi-form .fi-una:not(.fi-permiso) .fi-switch { height: 2.25rem; margin-bottom: .62rem; }
.fi-vert .fi-foto img { width: auto; max-width: 100%; max-height: 28rem; }
.fi-vert .fi-foto { max-width: none; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fi-vert .fi-foto:has(img[hidden]) { align-items: flex-start; text-align: left; }
/* Inspección ocular (vía): de dos en dos y compacta */
.fi-insp-det > summary { margin-bottom: 1.2rem; font-size: 1.05rem; }
.fi-insp-grid.aba-g3 { grid-template-columns: 1fr 1fr; gap: .35rem 1.2rem; margin-bottom: .8rem; }
.fi-insp-grid .campo { margin: 0; }
.fi-insp-grid .campo label { margin: 0 0 .1rem; font-size: .8rem; font-weight: 600; }
.fi-insp-grid select, .fi-insp-grid input { height: 2.3rem; padding-top: .2rem; padding-bottom: .2rem; font-size: .9rem; box-sizing: border-box; }
@media (max-width: 640px) { .fi-insp-grid.aba-g3 { grid-template-columns: 1fr; } }
form .fi-insp-grid :is(select, input[type="text"]) { height: auto !important; min-height: 0; padding: .32rem .6rem !important; font-size: .9rem !important; line-height: 1.35 !important; border-radius: .35rem; }
form .fi-insp-grid .campo label { line-height: 1.2; margin-bottom: .15rem; }

/* Señalización vertical y horizontal con catálogo de señales */
.fi-sen { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.fi-sen-izq { flex: 1 1 28rem; min-width: 0; }
.fi-sen-banda { background: #dce8f5; color: #14283d; font-weight: 700; font-size: .85rem; text-transform: uppercase; padding: .3rem .6rem; margin: .6rem 0 .4rem; }
.fi-sen-fila { display: flex; gap: .4rem; }
.fi-sen-fila input { flex: 1 1 auto; min-width: 0; }
.fi-sen-fila .fi-bb { flex: 0 0 auto; padding: 0 .8rem; }
.fi-sen-chk { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .4rem .5rem; margin-bottom: .6rem; }
.fi-sen-chip { display: block; margin: 0; cursor: pointer; }
.fi-sen-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fi-sen-chip span { display: block; padding: .4rem .6rem; border: 1px solid #9db2c8; border-radius: .3rem; background: #fff; color: #1f4e79; font-size: .78rem; font-weight: 600; line-height: 1.2; text-align: center; }
.fi-sen-chip:hover span { background: #eef4fb; }
.fi-sen-chip input:checked + span { background: #1f4e79; border-color: #1f4e79; color: #fff; }
.fi-sen-chip input:focus-visible + span { outline: 2px solid #c9972b; outline-offset: 1px; }
.fi-sen-marcas { background: #fdf6e8; border: 1px solid #e0c58a; border-radius: .3rem; padding: .4rem .6rem; margin-bottom: .6rem; }
.fi-sen-cat { flex: 0 0 24rem; max-width: 100%; border: 2px solid #1c3d5a; border-radius: .3rem; background: #f0f5fb; padding-bottom: .6rem; }
.fi-sen-cat[data-modo="horizontal"] { border-color: #b8741a; background: #fdf6e8; }
.fi-sen-cab { background: #1c3d5a; color: #fff; font-weight: 700; padding: .45rem .7rem; }
.fi-sen-cat[data-modo="horizontal"] .fi-sen-cab { background: #b8741a; }
.fi-sen-modo { display: grid; grid-template-columns: 1fr 1.4fr; gap: .3rem; padding: .5rem .6rem 0; }
.fi-sen-tab { margin: 0; cursor: pointer; }
.fi-sen-tab input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fi-sen-tab span { display: block; text-align: center; padding: .45rem .3rem; border: 1px solid #1c3d5a; border-radius: .3rem; background: #fff; color: #1c3d5a; font-size: .8rem; font-weight: 700; }
.fi-sen-tab input:checked + span { background: #1c3d5a; color: #fff; }
.fi-sen-tab:last-child span { border-color: #b8741a; color: #8a5410; }
.fi-sen-tab:last-child input:checked + span { background: #b8741a; color: #fff; }
.fi-sen-que { margin: .4rem .7rem; font-size: .78rem; color: #4a5a6a; }
.fi-sen-cat select[data-sen-cat], .fi-sen-cat input[type="search"] { display: block; width: calc(100% - 1.2rem); margin: .3rem .6rem; box-sizing: border-box; height: 2.2rem; font-size: .85rem; padding: .2rem .5rem; }
.fi-sen-cat select[hidden] { display: none; }
.fi-sen-lista { margin: .3rem .6rem; max-height: 19rem; overflow: auto; border: 1px solid #c9d3de; background: #fff; border-radius: .3rem; }
.fi-sen-item { display: flex; border-bottom: 1px solid #e3e9ef; }
.fi-sen-add { flex: 1 1 auto; display: flex; gap: .5rem; align-items: baseline; text-align: left; padding: .35rem .5rem; border: 0; background: none; cursor: pointer; font: inherit; font-size: .8rem; color: #14283d; }
.fi-sen-add strong { flex: 0 0 3.6rem; color: #1f4e79; }
.fi-sen-cat[data-modo="horizontal"] .fi-sen-add strong { color: #8a5410; flex-basis: .8rem; }
.fi-sen-add:hover { background: #eaf2fb; }
.fi-sen-add.fi-hecho { background: #d6f0dc; }
.fi-sen-ver { flex: 0 0 2.2rem; border: 0; border-left: 1px solid #e3e9ef; background: #f6f8fa; cursor: pointer; font-size: 1rem; }
.fi-sen-ver:hover { background: #dce8f5; }
.fi-sen-lista .ayuda-campo { margin: .6rem; }
.fi-sen-pdf { display: block; width: calc(100% - 1.2rem); margin: .4rem .6rem 0; }
.fi-visor { width: min(70rem, 98vw); height: 94vh; padding: 0; border: 2px solid #1c3d5a; border-radius: .4rem; }
.fi-visor::backdrop { background: rgba(10,20,30,.65); }
.fi-visor[open] { display: flex; flex-direction: column; }
.fi-visor-barra { display: flex; gap: .4rem; align-items: center; padding: .5rem; background: #14283d; }
.fi-visor-barra select { width: auto; height: 2.3rem; }
.fi-visor-hoja { flex: 1 1 auto; overflow: auto; background: #5b6978; text-align: center; }
.fi-visor-hoja img { max-width: 100%; height: auto; display: inline-block; }
.fi-visor-zoom .fi-visor-hoja img { max-width: none; width: 190%; }
.fi-visor-barra .fi-bb { white-space: nowrap; }
.fi-visor-barra select { flex: 1 1 auto; max-width: 14rem; padding: 0 .5rem; line-height: 1.2; }
.fi-sen-cat select[data-sen-cat] { height: 2.4rem; line-height: 1.3; }
.fi-visor-barra select { height: auto !important; padding: .5rem .6rem !important; line-height: 1.3 !important; font-size: .95rem; }
.fi-visor-barra .fi-bb { padding: .5rem .9rem; }

/* Tipo de accidente: opciones como botones seleccionables */
.fi-tipo-ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .5rem; margin: .4rem 0; }
.fi-tipo-chip span { padding: .65rem .8rem; font-size: .9rem; min-height: 2.9rem; display: flex; align-items: center; justify-content: center; }
.fi-tipo-extra { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed #9db2c8; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.fi-tipo-neutro span { background: #f3f5f7; border-color: #c4ced8; color: #4a5a6a; font-weight: 500; }
.fi-tipo-neutro input:checked + span { background: #5b6978; border-color: #5b6978; color: #fff; }
.tipo-acc .tipo-img { max-width: min(100%, 640px); margin-bottom: 1rem; }
.fi-fact { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.fi-fact-chip span { min-height: 2.6rem; font-size: .85rem; padding: .45rem .7rem; }
.fi-fact-chip input:checked + span::before { content: "✓ "; font-weight: 700; }
.fi-fact-ayuda { margin: 0 0 .4rem; }
.fi-tipo-chip span { gap: .4rem; text-align: center; }

/* Secciones de la inspección con título destacado y factores agrupados en píldoras compactas */
fieldset.fi-set { border: 0; padding: 0; margin: 1.4rem 0 .6rem; min-width: 0; }
fieldset.fi-set > legend { float: left; width: 100%; box-sizing: border-box; margin: 0 0 .7rem; padding: .35rem .8rem; background: #1c3d5a; color: #fff; border-left: 6px solid #c8962e; font-size: 1rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
fieldset.fi-set > legend + * { clear: both; }
.fi-fact-grupo { display: flex; gap: .5rem .8rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid #e3e9ef; }
.fi-fact-grupo:last-child { border-bottom: 0; }
.fi-fact-gt { flex: 0 0 8.5rem; padding-top: .3rem; font-size: .8rem; font-weight: 700; color: #1c3d5a; text-transform: uppercase; letter-spacing: .02em; }
.fi-fact-pills { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: .35rem .4rem; }
.fi-pillchk { margin: 0; cursor: pointer; }
.fi-pillchk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fi-pillchk span { display: inline-block; padding: .3rem .75rem; border: 1px solid #b3c3d4; border-radius: 1rem; background: #fff; color: #2c3e50; font-size: .82rem; font-weight: 500; line-height: 1.25; }
.fi-pillchk:hover span { background: #eef4fb; border-color: #1f4e79; }
.fi-pillchk input:checked + span { background: #1f4e79; border-color: #1f4e79; color: #fff; font-weight: 600; }
.fi-pillchk input:checked + span::before { content: "✓ "; }
.fi-pillchk input:focus-visible + span { outline: 2px solid #c9972b; outline-offset: 1px; }
.fi-pillchk-neutro span { background: #f3f5f7; color: #5b6978; }
@media (max-width: 40rem) { .fi-fact-grupo { flex-direction: column; } .fi-fact-gt { flex-basis: auto; padding-top: 0; } }
/* Factores: columnas alineadas entre grupos */
.fi-fact-grupo { align-items: stretch; padding: .55rem 0; }
.fi-fact-gt { flex: 0 0 10rem; display: flex; align-items: center; gap: .5rem; padding-top: 0; }
.fi-fact-ico { flex: 0 0 1.6rem; text-align: center; font-size: 1.05rem; }
.fi-fact-pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .5rem; align-items: stretch; }
.fi-pillchk { display: block; }
.fi-pillchk span { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 2.3rem; box-sizing: border-box; text-align: center; border-radius: .5rem; padding: .3rem .6rem; }
@media (max-width: 62rem) { .fi-fact-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .fi-fact-pills { grid-template-columns: 1fr; } .fi-fact-gt { flex-basis: auto; } }
.fi-pillchk span { position: relative; }
.fi-pillchk input:checked + span::before { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); }
.fi-pillchk input:checked + span { padding-left: 1.7rem; padding-right: 1.7rem; }

/* Croquis */
.fi-bb-rojo { background: #b83227; }
.fi-croq-barra { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-bottom: .7rem; }
.fi-croq-grupo { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; padding-right: 1.2rem; border-right: 1px solid #d5dbe3; }
.fi-croq-grupo:last-child { border-right: 0; }
.fi-croq-subir { margin: 0; color: #fff !important; }
.fi-croq-cuerpo { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.fi-croq-lienzo { flex: 1 1 36rem; min-width: 0; }
.fi-croq-lienzo canvas { display: block; width: 100%; height: auto; border: 2px solid #1c3d5a; border-radius: .3rem; background: #e9edf1; touch-action: none; outline-offset: 2px; }
.fi-croq-pie { margin: .4rem 0 0; }
.fi-croq-paleta { flex: 0 0 20rem; max-width: 100%; border: 1px solid #c9d3de; border-radius: .3rem; background: #f6f8fa; padding: .5rem; }
.fi-croq-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.fi-croq-tabs .pestana { font-size: .78rem; padding: .35rem .6rem; }
.fi-croq-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); gap: .35rem; max-height: 34rem; overflow: auto; }
.fi-croq-item { display: flex; align-items: center; justify-content: center; height: 4.2rem; padding: .2rem; border: 1px solid #c9d3de; border-radius: .3rem; background: #fff; cursor: pointer; }
.fi-croq-item:hover { border-color: #1f6fb2; background: #eaf2fb; }
.fi-croq-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Croquis: copia del flujo del gestor (instrucciones + plantillas Word) */
.fi-croq-ref { background: #f0f6ff; border: 1px solid #cdd9ea; border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.fi-croq-ref p { margin: 2px 0; }
.fi-croq-h { margin: 18px 0 6px; padding-bottom: 4px; font-size: 1rem; color: #1a3a5c; border-bottom: 2px solid #c9a227; }
.fi-croq-pasos { background: #fff8e8; border: 1px solid #ead9a8; border-radius: 6px; margin: 8px 0; padding: 10px 14px 10px 34px; }
.fi-croq-pasos li { margin: 3px 0; }
.fi-croq-maps { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 8px 0; }
.fi-croq-gmaps { background: #4285f4 !important; color: #fff !important; padding: 10px 20px; font-weight: 700; text-decoration: none; border-radius: 6px; }
.fi-croq-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.fi-croq-doc { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fi-croq-doc small { color: #666; font-size: .75rem; line-height: 1.25; }
.fi-croq-docbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 78px; padding: 10px; border-radius: 6px; color: #fff !important; font-weight: 700; text-decoration: none; text-align: center; }
.fi-croq-docbtn:hover { filter: brightness(1.12); }
.fi-croq-docic { font-size: 1.5rem; line-height: 1; }
.fi-croq-det { margin-top: 14px; }
.fi-croq-det > summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.fi-croq-d-plantilla { background: #1a3a5c; }
.fi-croq-d-vehiculos { background: #2980b9; }
.fi-croq-d-especiales { background: #8e44ad; }
.fi-croq-d-vehsenales { background: #27ae60; }
.fi-croq-d-todos { background: #e67e22; }

/* Anexo fotográfico */
.fi-anx-aviso { color: #d9822b; font-style: italic; margin: 0 0 4px; }
.fi-anx-sec { border: 1px solid #c8d0dc; border-radius: 6px; margin: 10px 0; padding: 8px 12px 12px; }
.fi-anx-sec > legend { font-weight: 700; color: #1a3a5c; padding: 0 6px; }
.fi-anx-fila { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fi-anx-fila input { flex: 1; max-width: 460px; }
.fi-anx-fila .fi-bb { margin-left: auto; }
.fi-anx-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 8px; }
.fi-anx-foto { border: 1px solid #c8d0dc; border-radius: 6px; padding: 6px; background: #fff; }
.fi-anx-foto img { display: block; width: 100%; height: 160px; object-fit: contain; background: #eef1f6; border-radius: 4px; }
.fi-anx-pie { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.fi-anx-pie label { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.fi-anx-pie input[type=text], .fi-anx-pie input:not([type]) { flex: 1; }
.fi-anx-chk { color: #b3261e; }
.fi-anx-nueva { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; border: 1px dashed #9fb0c8; border-radius: 6px; padding: 6px 8px; }
.fi-anx-nueva label { display: flex; align-items: center; gap: 6px; }
.fi-anx-nueva label:last-of-type { flex: 1; min-width: 200px; }
.fi-anx-nueva label:last-of-type input { flex: 1; }
.fi-anx-sec[hidden] { display: none; }

/* Pestaña Manifest. */
.fi-man-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 14px; }
.fi-man-addf { margin: 0; }
.fi-man-b-azul { background: #2563a8; } .fi-man-b-verde { background: #2e7d4f; } .fi-man-b-morado { background: #6b3fa0; } .fi-man-b-naranja { background: #c76a12; }
.fi-man-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid #c8d0dc; margin-bottom: 12px; }
.fi-man-panel[hidden] { display: none; }
.fi-man-tit { margin: 4px 0 10px; color: #1a3a5c; }
.fi-man-auto select { max-width: 520px; }
.fi-man-preg { border: 1px solid #d5dbe4; border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
.fi-man-preg small { display: block; color: #5a6878; margin: 2px 0 6px 24px; }
.fi-man-preg textarea { width: 100%; }
.fi-man-q { display: flex; gap: 8px; font-weight: 600; align-items: flex-start; }
.fi-man-extra { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin: 6px 0; align-items: start; }
.fi-man-acc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; padding-top: 10px; border-top: 1px solid #d5dbe4; }
.fi-man-acc form { margin: 0; }
@media (max-width: 700px) { .fi-man-extra { grid-template-columns: 1fr; } }

/* Pestaña Legislación */
.fi-leg-grid { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 14px; align-items: stretch; }
.fi-leg-der { display: flex; flex-direction: column; contain: size; min-height: 0; }
.fi-leg-izq { background: #e8eef5; border-radius: 6px; padding: 10px; }
.fi-leg-lista { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow-y: auto; background: #fff; border: 1px solid #c8d0dc; border-radius: 4px; }
.fi-leg-lista li { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid #eef1f5; font-size: .9rem; }
.fi-leg-lista li:hover { background: #f1f5fa; }
.fi-leg-lista li[aria-selected="true"] { background: #1a3a5c; color: #fff; }
.fi-leg-cab { background: #1a3a5c; color: #fff; padding: 10px 14px; border-radius: 6px 6px 0 0; }
.fi-leg-norma { font-size: .85rem; color: #aaccee; }
.fi-leg-tit { font-weight: 700; font-size: 1.05rem; }
.fi-leg-texto { flex: 1 1 0; min-height: 0; border: 1px solid #c8d0dc; border-top: 0; border-radius: 0 0 6px 6px; overflow-y: auto; padding: 12px 16px; background: #fff; }
.fi-leg-texto p { margin: 0 0 6px; line-height: 1.5; }
.fi-leg-texto p.fi-leg-vin { margin-left: 18px; }
.fi-leg-texto mark { background: #fff3cd; }
@media (max-width: 800px) { .fi-leg-grid { grid-template-columns: 1fr; } .fi-leg-der { contain: none; } .fi-leg-texto { flex: none; max-height: 520px; } }
.fi-leg > .ayuda-campo { margin-top: 10px; }

/* Consulta de accidentes */
.acc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin: .5rem 0 .75rem; }
.acc-kpi { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border-radius: .7rem; color: #fff; text-decoration: none; box-shadow: 0 2px 6px rgba(18, 48, 79, .25); }
a.acc-kpi:hover { transform: translateY(-2px); box-shadow: 0 5px 12px rgba(18, 48, 79, .3); }
.acc-kpi-n { font-size: 2rem; font-weight: 800; line-height: 1; }
.acc-kpi-t { font-size: .9rem; font-weight: 600; opacity: .95; }
.acc-kpi-ambar { background: #d98a0b; } .acc-kpi-rojo { background: #c0392b; } .acc-kpi-morado { background: #6b3fa0; } .acc-kpi-azul { background: #1a3a5c; }
.acc-kpi-apagado { background: #8a96a3; box-shadow: none; }
.acc-filtros { margin-top: .5rem; }
.acc-busca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .8fr) auto; gap: .75rem; align-items: end; background: #1a3a5c; padding: .9rem 1rem; border-radius: .7rem; }
.acc-busca label { color: #dbe7f4; }
.acc-busca-bt { display: flex; gap: .5rem; }
.acc-busca-bt .boton { white-space: nowrap; }
.acc-busca .boton-principal { background: #ffc61a; color: #12304f; border-color: #ffc61a; font-weight: 800; }
.acc-grupos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: .75rem; }
.acc-grupo { border: 1px solid #c8d0dc; border-radius: .6rem; padding: .4rem .8rem .7rem; background: #f6f9fc; min-width: 0; }
.acc-grupo > legend { font-weight: 800; color: #1a3a5c; padding: 0 .4rem; }
.acc-grupo:last-child { grid-column: 1 / -1; }
.acc-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.acc-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.acc-grupo .ayuda-campo { margin: .3rem 0 0; font-size: .78rem; }
.acc-cuenta { margin: 1.2rem 0 .5rem; color: #1a3a5c; }
.acc-tabla td { vertical-align: top; }
.acc-fila { border-left: 6px solid transparent; }
.acc-f-rojo { border-left-color: #c0392b; } .acc-f-ambar { border-left-color: #d98a0b; } .acc-f-verde { border-left-color: #2e7d4f; }
.acc-fila:hover { background: #f1f6fb; }
.acc-cod { color: #1a3a5c; text-decoration: none; border-bottom: 2px solid #c8a951; font-weight: 800; font-size: 1.05rem; white-space: nowrap; }
.acc-fecha { white-space: nowrap; }
.acc-venc { color: #c0392b; font-weight: 700; }
.acc-veh { margin: .15rem 0; }
.acc-mat { display: inline-block; padding: .05rem .5rem; border: 2px solid #1a3a5c; border-radius: .3rem; background: #fff; font-weight: 800; letter-spacing: .05em; font-size: .9rem; }
@media (max-width: 900px) { .acc-grupos { grid-template-columns: 1fr; } .acc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-busca { grid-template-columns: 1fr; } }
.acc-kpi-s { font-size: .8rem; opacity: .85; }

/* Listado de accidentes: etiquetas que no se parten, con contraste legible, y columnas ordenadas.
   Todo va acotado a .acc-tabla para no tocar las etiquetas de otros módulos. */
.acc-tabla .etiqueta { display: inline-block; white-space: nowrap; line-height: 1.45; padding: .12rem .6rem; font-size: .8rem; }
.acc-tabla .etiqueta-pendiente { color: #5a3300; background: #fff1cc; border: 1px solid #d98c00; }
.acc-tabla .etiqueta-vencido { color: #8f1d1d; background: #fbdfe0; border: 1px solid #c23b3b; }
.acc-tabla .etiqueta-entregado { color: #0f5c3c; background: #dcf3e8; border: 1px solid #1f8a5e; }
.acc-tabla .etiqueta-leves { color: #5c3b00; background: #ffe08a; border: 1px solid #d9a520; }
.acc-tabla td:first-child { min-width: 8.5rem; }
.acc-tabla td:first-child .etiqueta { margin-top: .35rem; }
.acc-tabla .acc-cod { border-bottom-width: 2px; }
.acc-col-tramite { min-width: 11rem; }
.acc-sub { display: block; margin-top: .3rem; color: #3f5b76; font-size: .8rem; line-height: 1.3; }
.acc-veh { margin: 0 0 .55rem; }
.acc-veh:last-child { margin-bottom: 0; }
.acc-veh-linea { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.acc-veh-modelo { font-weight: 600; color: #0f2338; }
.acc-cond { margin-top: .2rem; font-size: .85rem; color: #25405a; line-height: 1.3; }
.acc-doc { color: #5a6b7b; font-size: .78rem; white-space: nowrap; }
.acc-sin { color: #5a6b7b; font-size: .85rem; font-style: italic; }

/* Estadísticas de siniestralidad */
.acc-per { display: grid; grid-template-columns: repeat(2, minmax(7rem, 10rem)) auto repeat(2, minmax(9rem, 12rem)) auto; gap: .75rem; align-items: end; }
.acc-per-o { align-self: center; color: #5a6b7b; font-weight: 600; padding-bottom: .6rem; }
.acc-per-bt .boton { white-space: nowrap; }
.acc-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.8rem; }
@media (max-width: 900px) { .acc-per { grid-template-columns: 1fr 1fr; } .acc-per-o { grid-column: 1 / -1; padding: 0; } .acc-dos { grid-template-columns: 1fr; } }
@media (min-width: 62rem) { .mod-partes .est-kpis.acc-kpis4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Alineación de controles en la consulta: misma altura y base común */
.acc-filtros .campo { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.acc-filtros .campo label { margin: 0 0 .3rem; white-space: nowrap; line-height: 1.2; }
.acc-filtros .campo input, .acc-filtros .campo select { height: 3rem; margin: 0; box-sizing: border-box; }
.acc-busca-bt .boton { height: 3rem; margin: 0; display: inline-flex; align-items: center; box-sizing: border-box; }
.acc-grupos { align-items: stretch; }
@media (max-width: 900px) { .acc-busca { grid-template-columns: 1fr 1fr; } .acc-busca-bt { grid-column: 1 / -1; } }
.mod-partes .acc-filtros .campo input, .mod-partes .acc-filtros .campo select { margin: 0; height: 3rem; }

/* Periodo de estadísticas: controles alineados por la base */
.acc-per { align-items: end; }
.acc-per .campo { margin: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.acc-per .campo label { margin: 0 0 .3rem; white-space: nowrap; line-height: 1.2; }
.mod-partes .acc-per .campo input, .mod-partes .acc-per .campo select { height: 3rem; margin: 0; box-sizing: border-box; }
.acc-per-o { align-self: end; height: 3rem; display: flex; align-items: center; padding: 0; }
.acc-per-bt .boton { height: 3rem; margin: 0; display: inline-flex; align-items: center; box-sizing: border-box; }
.acc-dos > div { min-width: 0; }
.mod-partes .acc-dudosas { margin: .25rem 0 0; padding-left: 1.2rem; }
.mod-partes .acc-dudosas li { margin: .15rem 0; }

/* Ficha del accidente: pestaña Diligencias */
.fi-dil-bloque { border: 1px solid var(--borde, #cfd8e2); border-radius: .4rem; padding: .7rem .9rem; margin: 0 0 1rem; }
.fi-dil-bloque legend { font-weight: 700; padding: 0 .4rem; }
.fi-dil-chk { display: flex; gap: .5rem; align-items: center; margin: .3rem 0 .6rem; }
.fi-dil-extra { border: 1px dashed var(--borde, #cfd8e2); border-radius: .4rem; padding: .6rem; margin: 0 0 .7rem; display: grid; gap: .4rem; }
.fi-dil-extra textarea, .fi-dil-bloque textarea { width: 100%; }
.fi-dil-extra .fi-bb { justify-self: start; }
.fi-dil-add { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.fi-dil-botones { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; position: sticky; bottom: 0; padding: .6rem 0; background: var(--fondo-tarjeta, #fff); }
.fi-dil [data-dil-copiar] { margin-top: .3rem; }

/* Ficha del accidente: pestaña Documentos */
.fi-docs-cat { margin: 1rem 0 .3rem; font-size: 1.02rem; }
.fi-docs-n { font-weight: 400; color: var(--texto-suave, #5b6b7b); }
.fi-docs-tabla td, .fi-docs-tabla th { vertical-align: top; }
.fi-docs-ultima td { background: #f3f8fd; }
.fi-docs-subir { margin-top: 1.2rem; }

/* Reclamaciones patrimoniales */
.rec-criterio { display: grid; grid-template-columns: minmax(12rem, 1fr) 9rem; gap: .4rem .8rem; align-items: start; margin: .5rem 0; padding: .5rem .7rem; border: 1px solid #d5dde6; border-radius: .4rem; }
.rec-criterio > strong { grid-column: 1 / -1; font-weight: 600; }
.rec-criterio textarea { min-height: 3rem; }
.rec-nota-pide { border-color: #c8962e; background: #fffbf0; }
.rec-bloque { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; }
.rec-flujo { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 .8rem; }
.rec-flujo .paso { padding: .25rem .7rem; border-radius: 1rem; background: #e5e9ee; color: #44546a; font-size: .85rem; white-space: nowrap; }
.rec-flujo .paso.hecho { background: #d6efdd; color: #1d5c32; }
.rec-flujo .paso.actual { background: #14283d; color: #fff; font-weight: 700; }
.rec-fotos { display: flex; flex-wrap: wrap; gap: .8rem; margin: .5rem 0; }
.rec-foto { width: 12rem; font-size: .8rem; }
.rec-foto img { width: 12rem; height: 8.5rem; object-fit: cover; border-radius: .4rem; border: 1px solid #c9d3de; display: block; }
.rec-huella { font-family: ui-monospace, monospace; font-size: .72rem; color: #5a6b7d; word-break: break-all; }
.rec-riesgo-n { font-size: 1.4rem; font-weight: 800; }
@media print { .rec-flujo, .partes-lateral { display: none; } }
.fi-estadillo-bt { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.fi-otro { margin-top: .35rem; width: 100%; }
.fi-colision, .fi-factor-otro { margin: .6rem 0; }
.fi-dom-fila { display: grid; grid-template-columns: minmax(0, 3fr) minmax(4rem, 5rem) minmax(0, 2fr); gap: .4rem; }
@media (max-width: 640px) { .fi-dom-fila { grid-template-columns: 1fr 5rem; } .fi-dom-fila input:last-child { grid-column: 1 / -1; } }
.fi-inc-fila { display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin: .6rem 0; }
.fi-inc-fila .campo { margin: 0; }
.fi-inc-fila .fi-bb { height: 2.75rem; }
.fi-inc-crear { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin: 1rem 0 .4rem; align-items: stretch; }
.fi-inc-crear .fi-inc-op { display: block; padding: .8rem; border: 1px solid #d0d7e2; border-radius: .6rem; background: #f7f9fc; }
.fi-inc-crear .fi-inc-op .boton { display: block; width: 100%; flex: none; height: auto; min-height: 0; margin: 0 0 .5rem; padding: .7rem .9rem; text-align: center; box-sizing: border-box; }
.fi-inc-crear .fi-inc-op small { display: block; color: #5b6572; line-height: 1.4; }
@media (max-width: 640px) { .fi-inc-fila { grid-template-columns: 1fr; } .fi-inc-fila .fi-bb { height: auto; } .fi-inc-crear { grid-template-columns: 1fr; } }
.fi-oficio { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid #d0d7e2; }
.fi-inc-form { margin: 0; padding: 0; }
.fi-inc-fila .campo label { display: block; margin: 0 0 .3rem; line-height: 1.2; }
.fi-inc-fila .campo input, .fi-inc-fila .campo select { display: block; width: 100%; height: 2.75rem; margin: 0 !important; box-sizing: border-box; }
.fi-inc-fila .fi-bb { margin: 0; align-self: end; box-sizing: border-box; }
.fi-inc-crear { align-items: stretch; }

/* Fotografías de la intervención */
.fi-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.fi-foto { margin: 0; padding: .5rem; border: 1px solid #d0d7e2; border-radius: .6rem; background: #f7f9fc; }
.fi-foto img { display: block; width: 100%; height: 8.5rem; object-fit: cover; border-radius: .4rem; }
.fi-foto figcaption { margin: .35rem 0 0; font-size: .82rem; color: #5b6572; }
.fi-foto-quitar { display: flex; gap: .4rem; margin: .4rem 0 0; padding: 0; }
.fi-foto-quitar input { flex: 1; min-width: 0; height: 2.2rem; margin: 0 !important; }
.fi-fotos-campo { margin: 1rem 0; }
.fi-fotos-botones { display: flex; flex-wrap: wrap; gap: .6rem; margin: .4rem 0; }
.fi-fotos-lista { display: flex; flex-wrap: wrap; gap: .6rem; margin: .5rem 0; }
.fi-foto-mini { position: relative; }
.fi-foto-mini img { display: block; border-radius: .4rem; border: 1px solid #c9d3de; max-height: 8rem; }
.fi-foto-mini-x { position: absolute; top: -.4rem; right: -.4rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0; background: #b3261e; color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; }

/* Cola de envíos sin conexión */
.cola-offline { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #e0b252; border-left-width: .35rem; border-radius: .5rem; background: #fff7e0; }
.cola-offline .cola-titulo { margin: 0 0 .4rem; font-weight: 600; }
.cola-offline .cola-lista { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.cola-offline .cola-lista li { margin: .3rem 0; }
.cola-offline .cola-error { color: #b3261e; }

/* Señalización viaria */
.sn-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .8rem; margin: .6rem 0 1rem; }
.sn-caja { display: block; padding: .8rem 1rem; border: 1px solid #d0d7e2; border-radius: .6rem; background: #f7f9fc; color: inherit; text-decoration: none; }
.sn-caja:hover, .sn-caja:focus-visible { border-color: #3f5b76; background: #eef4fb; }
.sn-caja-n { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: #c55a11; }
.sn-caja-t { display: block; font-weight: 600; }
.sn-caja-s { display: block; font-size: .85rem; color: #5b6572; }
.sn-capas { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; align-items: center; border: 1px solid #d0d7e2; border-radius: .5rem; padding: .4rem .8rem; margin: 0 0 .6rem; }
.sn-capas legend { font-size: .85rem; padding: 0 .3rem; }
.sn-pt { display: inline-block; width: 1.05rem; height: 1.05rem; border: 2px solid #fff; box-shadow: 0 0 0 1px #5b6572; vertical-align: middle; box-sizing: border-box; }
.sn-v { border-radius: 50%; } .sn-h { border-radius: .15rem; } .sn-i { transform: rotate(45deg); border-radius: .1rem; }
.sn-e-bueno { background: #1A5C38; } .sn-e-deteriorado { background: #FFC000; } .sn-e-deficiente { background: #C55A11; } .sn-e-fuera { background: #C00000; }
.leaflet-marker-icon.sn-pt { width: 18px; height: 18px; }
.historial { list-style: none; padding: 0; margin: .4rem 0; }
.historial li { padding: .3rem 0; border-bottom: 1px solid #e6ebf2; font-size: .92rem; }

/* Objetos: etiqueta imprimible */
.obj-etiqueta { display: flex; gap: 16px; align-items: center; border: 2px dashed #3f5b76; border-radius: 8px; padding: 14px; max-width: 460px; }
.obj-etiqueta p { margin: 2px 0; }
.obj-qr svg { width: 120px; height: 120px; display: block; }
.obj-cod { font-size: 1.6rem; font-weight: 700; letter-spacing: 1px; }

/* Agenda: calendario mensual */
.age-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-top: 12px; }
.age-cab { text-align: center; font-weight: 700; padding: 4px 0; font-size: .85rem; }
.age-dia { min-height: 92px; background: #fff; border: 1px solid #c8d4e0; border-radius: 4px; padding: 3px; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.age-dia.age-fuera { background: #eef2f6; opacity: .75; }
.age-dia.age-hoy { border: 2px solid #d98c00; }
.age-n { font-size: .8rem; font-weight: 700; }
.age-ev { display: block; font-size: .72rem; line-height: 1.2; padding: 1px 3px; border-radius: 3px; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.age-pend { background: #fde9c4; color: #5a3b00; }
.age-otro { background: #dfe6ee; color: #3f5b76; text-decoration: line-through; }
@media (max-width: 640px) { .age-dia { min-height: 60px; } .age-ev { font-size: .62rem; } }

/* VMP / VPL: resultado de la consulta */
.vmp-res { border: 1px solid var(--borde, #c8ced6); border-radius: .5rem; padding: .75rem 1rem; margin: .75rem 0; }
.vmp-res h3 { margin-top: 0; }
.vmp-motivos { margin: .4rem 0 .4rem 1.1rem; padding: 0; font-size: .9rem; }
.vmp-noprocede { border-left: 4px solid #b45309; padding: .5rem .75rem; background: rgba(180, 83, 9, .08); }
.vmp-avisos { margin: .4rem 0 .4rem 1.1rem; padding: 0; }

/* Agenda: selector de citados */
.age-citados-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .35rem 0 .5rem; }
.age-citados-barra input[type="search"] { flex: 1 1 14rem; min-width: 12rem; font-size: 1rem; padding: .6rem .8rem; }
.age-citados-cuenta { font-weight: 700; color: #1f4e79; margin-left: auto; }
.age-citados-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .4rem; max-height: 22rem; overflow-y: auto; padding: .5rem; border: 1px solid var(--borde-campo, #c5d3e1); border-radius: 8px; background: #fff; }
.age-citado { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: .4rem .7rem; border: 1px solid #c8d4e0; border-radius: 8px; background: #f6f9fc; cursor: pointer; font-size: 1rem; line-height: 1.2; }
.age-citado[hidden] { display: none; }
.age-citado input { width: 1.3rem; height: 1.3rem; flex: none; margin: 0; }
.age-citado-on { background: #dcebf8; border-color: #1f4e79; }
.age-citado-on strong { color: #1f4e79; }

/* Agenda: día seleccionado, panel del día y conmutador */
.age-dia { position: relative; cursor: pointer; }
.age-dia:hover { background: #f1f7fd; }
.age-hit { position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
.age-dia .age-ev, .age-dia small { position: relative; z-index: 2; }
.age-dia.age-sel { border: 2px solid #1f4e79; background: #dcebf8; }
.age-n { display: flex; justify-content: space-between; align-items: center; }
.age-mas { visibility: hidden; font-weight: 700; color: #1f4e79; font-size: 1rem; line-height: 1; }
.age-dia:hover .age-mas, .age-dia.age-sel .age-mas { visibility: visible; }
@media (hover: none) { .age-mas { visibility: visible; opacity: .55; } }
.age-panel { margin: 12px 0; padding: 14px 16px; border: 2px solid #1f4e79; border-radius: 10px; background: #f6f9fc; }
.age-panel h3 { margin: 0; }
.age-lista-dia { list-style: none; margin: .6rem 0; padding: 0; display: grid; gap: .4rem; }
.age-lista-dia li { padding: .5rem .7rem; background: #fff; border: 1px solid #c8d4e0; border-radius: 8px; }
.age-hora { display: inline-block; min-width: 4.5rem; font-weight: 700; color: #1f4e79; }
.age-rapido { margin-top: .8rem; padding-top: .8rem; border-top: 1px dashed #9fb3c8; }
.age-quien { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.age-quien .aba-chip span { padding: .5rem 1rem; font-size: 1rem; }
.age-conmuta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0; }
.age-dia { min-height: 110px; }
@media (max-width: 640px) { .age-citados-lista { grid-template-columns: 1fr; } }
.age-conmuta .boton { width: auto; flex: 0 0 auto; }
.age-citado { font-weight: 400; font-size: .95rem; }
.age-citado strong { font-weight: 700; }
.age-citado input[type="checkbox"] { width: 1.3rem; height: 1.3rem; padding: 0; margin: 0; align-self: center; position: static; }
.age-citado span { display: block; }
.age-quien .aba-chip { flex: 0 0 auto; }
.campo .age-citado { display: flex; flex-direction: row; align-items: center; gap: .6rem; font-weight: 400; margin: 0; }
.campo .age-citado[hidden] { display: none; }
.campo .age-citado strong { font-weight: 700; }

/* Controles: resumen, filtros en una línea y estado vacío */
.ctl-resumen { margin: 0 0 1rem; }
.ctl-resumen-alerta .num-grande { color: var(--error-borde); }
.ctl-filtros { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: flex-end; }
.ctl-filtros .campo { margin: 0; flex: 0 1 11rem; min-width: 9rem; }
.ctl-filtros .campo.ctl-filtro-texto { flex: 1 1 14rem; }
.ctl-filtros .acciones-filtros { margin: 0; }
.ctl-vacio { margin: 1rem 0; padding: .9rem 1rem; border: 1px dashed var(--borde); border-radius: .5rem; color: var(--texto-suave); }
.ctl-tareas { margin: 0 0 1rem; padding: 0; list-style: none; }
.ctl-tareas li { padding: .5rem 0; border-bottom: 1px solid var(--borde); }
.ctl-tareas small { color: var(--texto-suave); }
.ctl-opc { font-weight: 400; font-size: .85em; color: var(--texto-suave); }
/* Filas de campos alineadas (controles, seguimientos): misma altura, sin margen inferior en los campos y todo a la misma línea base */
.ctl-filtros .campo :is(input:not([type="checkbox"]), select), .ctl-fila .campo :is(input:not([type="checkbox"]), select), .ctl-franja.ctl-franja input[type="time"] { margin: 0; height: 3rem; box-sizing: border-box; }
.ctl-filtros .acciones-filtros .boton, .ctl-filtros > .boton { height: 3rem; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.ctl-fila .casilla { height: 3rem; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.ctl-franja { align-items: center; }
.ctl-fila { margin-bottom: .6rem; }
.ctl-fila .ctl-campo-dias { flex: 1 1 auto; }
.ctl-fila .ctl-campo-dias .ctl-dias { margin: 0; align-items: center; min-height: 3rem; }
.ctl-etq { display: block; margin-bottom: .25rem; font-weight: 600; }
.ctl-fila .campo { flex: 0 1 12rem; }
.ctl-fila .ctl-campo-dias { flex: 0 0 auto; }
.ctl-fila .ctl-campo-dias .ctl-etq { font-size: .82rem; white-space: nowrap; }
.ctl-fila .ctl-campo-dias .ctl-opc { font-size: .9em; }
.ctl-fila .ctl-campo-dias .ctl-dias { flex-wrap: nowrap; gap: .3rem; min-height: 3rem; }
.ctl-fila .ctl-campo-dias .ctl-dias label > span { min-width: 2.3rem; padding: .45rem .5rem; }
/* Órdenes: cumplimiento, caducadas, origen */
.ord-progreso { width: 7rem; height: .65rem; vertical-align: middle; accent-color: var(--ok-borde); }
.ord-progreso-mal { accent-color: var(--ambar); }
.ord-caducada { opacity: .75; }
.ord-origen { display: inline-block; margin-right: .6rem; color: var(--texto-suave); }
.ord-caducadas { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .8rem 0; padding: .6rem .9rem; border-radius: .5rem; background: var(--ambar-oscuro); border: 1px solid var(--ambar); }
.ord-hoy-turno { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin: 1.2rem 0 .3rem; }
.ord-hist { width: 100%; font-size: .88rem; }
.ord-edit summary, .ord-copia summary { cursor: pointer; font-weight: 600; }
.ord-cambio { display: block; color: var(--texto-suave); }
.ord-titulo { color: var(--texto); text-decoration: none; }
.ord-titulo:hover { text-decoration: underline; }
.ord-edit a, .ord-origen a, .ord-hoy-turno a, .ord-tarea small a { color: var(--boton-azul); text-decoration: none; font-weight: 600; }
.ord-edit a:hover, .ord-origen a:hover, .ord-hoy-turno a:hover, .ord-tarea small a:hover { text-decoration: underline; }
.ord-sep { margin-top: .8rem; }
.ord-progreso { -webkit-appearance: none; appearance: none; border: 0; border-radius: 1rem; overflow: hidden; background: rgba(15, 35, 56, .15); }
.ord-progreso::-webkit-progress-bar { background: rgba(15, 35, 56, .15); border-radius: 1rem; }
.ord-progreso::-webkit-progress-value { background: var(--ok-borde); border-radius: 1rem; }
.ord-progreso::-moz-progress-bar { background: var(--ok-borde); border-radius: 1rem; }
.ord-progreso-mal::-webkit-progress-value { background: var(--ambar); }
.ord-progreso-mal::-moz-progress-bar { background: var(--ambar); }
.ctl-filtros .acciones-filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ctl-filtros .acciones-filtros .boton { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Portada: módulos como iconos grandes (imagen, nombre y explicación debajo), agrupados en bloques.
   Misma retícula de 7 columnas en todos los bloques; la insignia de pendientes va sobre la esquina de la imagen. */
.grupo-modulos { margin: 1.3rem 0 .6rem; font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--texto-suave); }
.grupo-modulos:first-of-type { margin-top: .3rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) { grid-template-columns: repeat(auto-fill, minmax(max(9.5rem, calc((100% - 6 * 1rem) / 7)), 1fr)); gap: 1.2rem 1rem; margin-bottom: .5rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo,
.rejilla-modulos .tarjeta-modulo.mod-partes { display: block; position: relative; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; min-height: 0; transition: none; text-align: left; color: inherit; }
.rejilla-modulos:not(.rejilla-modulos-chica) a.tarjeta-modulo:hover { transform: none; box-shadow: none; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-imagen { display: block; width: 100%; box-sizing: border-box; border-radius: 1rem; overflow: hidden; border: 1px solid var(--borde); background: var(--superficie); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-imagen img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.rejilla-modulos:not(.rejilla-modulos-chica) a.tarjeta-modulo:hover .modulo-imagen { transform: translateY(-3px); border-color: var(--acento); box-shadow: 0 8px 18px rgba(15, 35, 56, .15); }
.rejilla-modulos:not(.rejilla-modulos-chica) a.tarjeta-modulo:focus-visible { outline: 3px solid var(--ambar); outline-offset: 3px; border-radius: 1rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-titulo { display: block; margin: .5rem .15rem 0; font-size: 1rem; line-height: 1.2; text-align: left; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-desc { display: block; margin: .15rem .15rem 0; font-size: .84rem; line-height: 1.3; color: var(--texto-suave); }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estado-modulo,
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estados-modulo { position: absolute; top: .5rem; right: .5rem; margin: 0; z-index: 1; box-shadow: 0 1px 3px rgba(15, 35, 56, .25); }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estados-modulo { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; box-shadow: none; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estados-modulo .estado-modulo { position: static; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo.proximamente { opacity: 1; border: 0; background: none; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo.proximamente .modulo-imagen { filter: grayscale(.7); opacity: .8; border-style: dashed; }

/* Portal: iconos más pequeños, solo el nombre bajo cada uno; la explicación sale en la franja .info-modulo (portada.js) */
.rejilla-modulos:not(.rejilla-modulos-chica) { grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr)); gap: 1rem .8rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo { text-align: center; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-imagen { width: 6rem; max-width: 100%; margin: 0 auto; border-radius: .85rem; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-titulo { margin: .4rem 0 0; font-size: .9rem; text-align: center; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-desc { display: none; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estado-modulo,
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estados-modulo { top: .25rem; right: calc(50% - 3rem + .25rem); }
.info-modulo { min-height: 2.6rem; margin: .2rem 0 .4rem; padding: .55rem .8rem; border-radius: .6rem; background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-suave); font-size: .9rem; line-height: 1.3; }
.info-modulo strong { color: var(--texto); }
@media (hover: none) { .info-modulo { display: none; } }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo { justify-self: stretch; width: 100%; box-sizing: border-box; }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estado-modulo,
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .estados-modulo { right: auto; left: 50%; transform: translateX(-50%); top: -.35rem; white-space: nowrap; }
.rejilla-modulos:not(.rejilla-modulos-chica) { grid-template-columns: repeat(auto-fill, minmax(max(6.8rem, calc((100% - 6 * .8rem) / 7)), 1fr)); }
.rejilla-modulos:not(.rejilla-modulos-chica) .tarjeta-modulo .modulo-titulo { width: 100%; box-sizing: border-box; justify-self: stretch; }