:root {
    --color-fondo: #eaf1fb;
    --color-superficie: #ffffff;
    --color-texto: #1f2733;
    --color-texto-suave: #64748b;
    --color-borde: #e2e8f0;
    --color-primario: #2563eb;
    --color-primario-oscuro: #1d4ed8;
    --color-peligro: #dc2626;
    --color-exito: #16a34a;
    --color-advertencia: #eab308;
    --color-cancelar: #f97316;
    --color-fuego: #dc2626;
    --color-blanca: #2563eb;
    --radio: 12px;
    --sombra: 0 4px 14px rgba(15, 23, 42, 0.12), 0 1px 4px rgba(15, 23, 42, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--color-fondo);
    color: var(--color-texto);
    /* Red de seguridad: el contenido ancho (tablas, gráficos) siempre debe
       scrollear dentro de su propio contenedor (.tabla-scroll,
       .grafico-scroll-movil), nunca desbordar la página entera de costado. */
    overflow-x: hidden;
}

/* ---------- Barra superior ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.75rem;
    background: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    flex-wrap: wrap;
}

/* En escritorio, la fila del logo y el panel de nav/usuario no forman sus
   propias cajas: sus hijos se acomodan directamente como ítems del flex
   ".topbar" (logo | nav | usuario en una sola línea, como siempre). Esto
   permite reordenar todo a un menú desplegable en celular sin duplicar
   el HTML por breakpoint. */
.topbar__fila { display: contents; }
.topbar__panel { display: contents; }

.topbar__marca { display: flex; align-items: center; gap: 0.65rem; }
.topbar__escudo { height: 36px; width: auto; flex-shrink: 0; }
.topbar__marca-texto { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.topbar__logo {
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--color-primario);
    letter-spacing: 0.02em;
}
.topbar__subtitulo { color: var(--color-texto-suave); font-size: 0.9rem; }

.topbar__nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.topbar__nav a {
    /* Antes color-texto-suave (gris) se leia poco sobre el fondo celeste
       del panel del menu; color-texto (casi negro) se ve mejor. */
    color: var(--color-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.4rem 0;
    border-bottom: 2px solid transparent;
}
.topbar__nav a:hover, .topbar__nav a.activo {
    color: var(--color-primario);
    border-bottom-color: var(--color-primario);
}

.topbar__usuario { display: flex; align-items: center; gap: 0.75rem; }
.topbar__nombre { font-size: 0.9rem; color: var(--color-texto-suave); }

/* Botón de menú hamburguesa: oculto en escritorio, solo se ve en celular. */
.topbar__hamburguesa {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    background: var(--color-superficie);
    cursor: pointer;
    flex-shrink: 0;
}
.topbar__hamburguesa span {
    display: block;
    width: 18px;
    height: 2px;
    margin: 0 auto;
    background: var(--color-texto);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.topbar__hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar__hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.topbar__hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.badge-rol {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #e2e8f0;
    color: var(--color-texto-suave);
}
.badge-rol--admin { background: #dbeafe; color: var(--color-primario-oscuro); }
.badge-rol--cad { background: #ede9fe; color: #6d28d9; }
.badge-rol--operador { background: #fef3c7; color: #92400e; }

.form-inline { display: inline; margin: 0; }
.acciones .form-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-right: 0.5rem;
    margin-bottom: 0.35rem;
}
.campo-input--chico { width: auto; min-width: 150px; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.enlace-boton {
    background: none;
    border: none;
    color: var(--color-texto-suave);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}
.enlace-boton:hover { color: var(--color-peligro); }

/* ---------- Layout general ---------- */

.contenido { max-width: 1200px; margin: 0 auto; padding: 1.75rem; }

/* Aviso de instalacion en iOS. Se explica el porque en base.html: Safari no
   ofrece instalar la app sola, asi que estos son los pasos manuales.
   El ancho se calcula para alinear con el texto de .contenido, que tiene
   1.75rem de padding a cada lado. */
.aviso-instalar {
    position: relative;
    width: calc(100% - 2rem);
    max-width: calc(1200px - 3.5rem);
    margin: 1.25rem auto 0;
    padding: 0.9rem 2.4rem 0.9rem 1rem;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.aviso-instalar__titulo {
    margin: 0 0 0.45rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-texto);
}
.aviso-instalar__pasos {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--color-texto);
}
.aviso-instalar__pasos svg { vertical-align: -3px; color: var(--color-primario); }
.aviso-instalar__lista {
    margin: 0;
    padding-left: 1.15rem;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--color-texto);
}
.aviso-instalar__lista li + li { margin-top: 0.3rem; }
.aviso-instalar__nota {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--color-texto-suave);
}
.aviso-instalar__cerrar {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    padding: 0.1rem 0.4rem;
    background: none;
    border: 0;
    border-radius: 6px;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-texto-suave);
}
.aviso-instalar__cerrar:hover {
    background: var(--color-fondo);
    color: var(--color-texto);
}

.panel-encabezado {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.panel-encabezado h1 { margin: 0; font-size: 1.4rem; }
.periodo-monitoreo { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--color-texto-suave); }

.actualizacion {
    font-size: 0.8rem;
    color: var(--color-texto-suave);
}
.actualizacion::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-exito);
    margin-right: 0.4rem;
}

/* ---------- Mensajes ---------- */

.mensajes { list-style: none; padding: 0; margin: 0 0 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.mensaje { padding: 0.7rem 1rem; border-radius: var(--radio); font-size: 0.9rem; }
.mensaje--success { background: #dcfce7; color: #166534; }
.mensaje--error { background: #fee2e2; color: #991b1b; }
.mensaje--info, .mensaje--warning { background: #fef9c3; color: #854d0e; }

/* ---------- Tarjetas ---------- */

.tarjeta {
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem 1.4rem;
    margin-bottom: 1.5rem;
    /* Por defecto, una celda de grid no se achica más que el contenido que
       tiene adentro (su "min-content"). Sin esto, una tabla o un gráfico
       anchos (con overflow-x propio) empujan la tarjeta entera —y toda la
       página— a desbordar de costado en vez de scrollear solo por dentro. */
    min-width: 0;
}
.tarjeta h2 { margin: 0 0 0.9rem; font-size: 1.05rem; }
.tarjeta--ancha { grid-column: 1 / -1; }

/* ---------- KPIs ---------- */

.tarjetas-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.kpi {
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.1rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    border-left: 4px solid var(--color-primario);
}
.kpi--fuego { border-left-color: var(--color-fuego); }
.kpi--blanca { border-left-color: var(--color-blanca); }
.kpi--total { border-left-color: #f59e0b; }
.kpi__valor { font-size: 1.9rem; font-weight: 800; }
.kpi__etiqueta { color: var(--color-texto-suave); font-size: 0.85rem; }
/* Mes al que corresponde el número (solo cuando hay una región elegida:
   ahí las tarjetas muestran el mes en curso, no el total acumulado). */
.kpi__periodo {
    align-self: flex-start;
    margin-top: 0.4rem;
    padding: 0.15rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 0.8rem;
    font-weight: 700;
}
.tarjeta--grafico .grafico-periodo {
    display: table;
    margin: -0.6rem auto 1rem;
}
/* Mes en curso: el valor y el porcentaje son provisorios hasta fin de mes. */
.kpi--comparativo__en-curso {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    text-align: center;
}
.kpi--comparativo__nota {
    align-self: center;
    font-size: 0.72rem;
    color: var(--color-texto-suave);
    text-align: center;
}
.nota-grafico {
    margin: 0.6rem 0 0;
    font-size: 0.8rem;
    color: var(--color-texto-suave);
    text-align: center;
}
.pies-tipo {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.pie-bloque {
    flex: 1 1 260px;
    min-width: 0;
}
.pie-bloque__mes {
    text-align: center;
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-texto);
}

/* Tarjeta comparativa mes actual vs. mes anterior, estilo "bolsa de valores". */
.kpi--comparativo {
    border-left-color: #7c3aed;
    gap: 0.7rem;
}
.kpi--comparativo__titulo {
    font-weight: 800;
    font-size: 1.15rem;
    color: var(--color-texto);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-texto-suave);
    cursor: help;
    width: fit-content;
    align-self: center;
}

.kpi--comparativo__meses {
    display: flex;
    /* Alineado arriba y no al centro: si una etiqueta ocupa dos lineas y la
       otra una, los dos numerones quedan igual a la misma altura. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.kpi--comparativo__mes {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}
.kpi--comparativo__mes-valor { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--color-texto); }
.kpi--comparativo__mes-nombre {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.25;
    /* Sin esto (antes decia nowrap) el nombre del mes no podia cortarse, y
       como su columna puede encogerse (flex: 1 + min-width: 0) el texto se
       desbordaba y se montaba sobre el del otro mes en pantallas chicas.
       Dejandolo cortar, en el peor caso el ano baja a una segunda linea. */
    white-space: normal;
}
.kpi--comparativo__mes--anterior .kpi--comparativo__mes-valor {
    font-size: 1.35rem;
    font-weight: 700;
    color: #475569;
}
.kpi--comparativo__separador {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-texto-suave);
    flex-shrink: 0;
    /* Compensa el align-items: flex-start de arriba, para que el "vs" quede
       a la altura de los numeros y no pegado al borde superior. */
    margin-top: 0.45rem;
}

.kpi--comparativo__badge {
    align-self: center;
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    white-space: nowrap;
}
/* Más heridos (▲) = malo = rojo; menos heridos (▼) = bueno = verde. */
.kpi--comparativo__badge--sube { background: #fee2e2; color: #991b1b; }
.kpi--comparativo__badge--baja { background: #dcfce7; color: #166534; }
.kpi--comparativo__badge--neutro { background: #e2e8f0; color: var(--color-texto-suave); font-size: 0.78rem; }

/* El atributo hidden debe ganarle siempre a cualquier "display" de las clases
   (si no, un elemento con hidden que además tenga display: block/table se
   sigue viendo). */
[hidden] { display: none !important; }

/* ---------- Gráficos ---------- */

.grilla-graficos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.contenedor-grafico {
    position: relative;
    width: 100%;
    height: 280px;
}
.contenedor-grafico canvas {
    width: 100% !important;
    height: 100% !important;
}
.contenedor-grafico--alto {
    height: 340px;
}
.contenedor-grafico--mensual {
    height: 430px;
}
/* Barras horizontales por centro: el alto lo fija el JS según la cantidad
   de centros (no se pisa con los alturas fijas de los otros gráficos). */
.grilla-graficos--centros .contenedor-grafico--centros {
    height: 640px;
}
.grafico-vacio {
    text-align: center;
    color: var(--color-texto-suave);
    font-weight: 600;
    padding: 3rem 1rem;
    margin: 0;
}
/* Gráficos de análisis por arma: más altos, porque los separadores gruesos
   entre colores se "comen" los tramos chicos si el gráfico es bajo. */
.grilla-graficos--analisis .contenedor-grafico--mensual {
    height: 520px;
}
.grilla-graficos--centros,
.grilla-graficos--analisis {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

.tarjeta--grafico {
    border: 1.5px solid #1f2733;
    box-shadow: none;
}
.tarjeta--grafico h2 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.03em;
    margin: 0 0 1.1rem;
}

/* ---------- Seguridad ---------- */

.grilla-seguridad {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.tarjeta--enlace {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.tarjeta--enlace:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    transform: translateY(-2px);
}
.tarjeta--enlace h2 { margin: 0 0 0.5rem; font-size: 1.1rem; color: var(--color-primario); }
.tarjeta--enlace p { margin: 0 0 0.9rem; color: var(--color-texto-suave); font-size: 0.9rem; }
.tarjeta--enlace__dato { font-weight: 700; font-size: 0.85rem; }

.lista-roles { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.92rem; }
.lista-roles .badge-rol { margin-right: 0.5rem; }

.acciones__nota { color: var(--color-texto-suave); font-size: 0.85rem; font-style: italic; }

.badge-auditoria {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.badge-auditoria--ingreso { background: #dcfce7; color: #166534; }
.badge-auditoria--salida { background: #e2e8f0; color: var(--color-texto-suave); }
.badge-auditoria--ingreso_fallido { background: #fee2e2; color: #991b1b; }
.badge-auditoria--creacion { background: #dbeafe; color: var(--color-primario-oscuro); }
.badge-auditoria--modificacion { background: #fef9c3; color: #854d0e; }
.badge-auditoria--eliminacion { background: #fee2e2; color: #991b1b; }
.badge-auditoria--activacion { background: #dcfce7; color: #166534; }
.badge-auditoria--desactivacion { background: #e2e8f0; color: var(--color-texto-suave); }
.badge-auditoria--cambio_contrasena { background: #ede9fe; color: #5b21b6; }
.badge-auditoria--notificacion_mail { background: #e0f2fe; color: #075985; }

/* ---------- Ranking de centros ---------- */

.grilla-rankings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.tarjeta--ranking {
    border: 1.5px solid #1f2733;
    box-shadow: none;
    padding: 1.25rem 1.4rem 0.5rem;
}
/* Borde de color según el tipo de arma: fuego = rojo, blanca = azul (en las
   tarjetas "Ingreso por centro" y en los rankings). */
.tarjeta--fuego { border: 2px solid var(--color-fuego); }
.tarjeta--blanca { border: 2px solid var(--color-blanca); }
.tarjeta--ranking h2 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.03em;
    margin: 0 0 0.3rem;
}
.tarjeta--ranking__subtitulo {
    text-align: center;
    color: var(--color-texto-suave);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 1.1rem;
}

.tabla-ranking {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92rem;
    /* Marco alrededor de toda la tabla: la cabecera es blanca (mismo fondo
       que la tarjeta que la contiene), asi que sin este borde no se
       distinguia donde empieza la tabla. */
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    overflow: hidden;
}
.tabla-ranking thead th {
    background: #fff;
    color: var(--color-texto);
    border-bottom: 2px solid var(--color-texto);
    text-align: left;
    padding: 0.65rem 0.9rem;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* La primera columna (numero de puesto) no lleva titulo de texto, pero
   mantiene el mismo ancho fijo para que la cabecera quede alineada con
   la columna de numeros de las filas. */
.tabla-ranking thead th:first-child { text-align: center; width: 3rem; }
.tabla-ranking thead th:last-child { text-align: center; }

.fila-ranking td {
    padding: 0.6rem 0.9rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.fila-ranking__num {
    text-align: center;
    font-weight: 800;
}
.fila-ranking__total {
    text-align: center;
    font-weight: 800;
}

/* Podio (puestos 1 a 3): fondo de color, letra negra FIJA (no depende del
   tema: con var(--color-texto) en el tema oscuro quedaba gris claro sobre
   rojo/amarillo/verde y no se leía). Semáforo estándar de la app, solo tres
   niveles: 1º riesgo ALTO (rojo), 2º riesgo MEDIO (amarillo), 3º riesgo
   BAJO (verde); del 4º en adelante, gris (fuera del podio). */
.fila-ranking--1 { background: #dc2626; color: #111827; }
.fila-ranking--2 { background: #facc15; color: #111827; }
.fila-ranking--3 { background: #22c55e; color: #111827; }
.fila-ranking--resto { background: #d1d5db; color: #111827; }

/* Filas del ranking pasadas las primeras 10: ocultas hasta "Ver más". */
.fila-ranking--oculta { display: none; }
.ranking-ver-mas {
    display: block;
    margin: 0.2rem auto 0.8rem;
    padding: 0.45rem 1.2rem;
    border-radius: 999px;
    border: 1.5px solid currentColor;
    background: transparent;
    color: var(--color-primario);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.ranking-ver-mas:hover { background: var(--color-fondo); }
.tarjeta--fuego .ranking-ver-mas { color: var(--color-fuego); }
.tarjeta--blanca .ranking-ver-mas { color: var(--color-blanca); }

.fila-ranking--1 td, .fila-ranking--2 td, .fila-ranking--3 td, .fila-ranking--resto td {
    border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* ---------- Tablas ---------- */

.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabla th, .tabla td {
    text-align: left;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-borde);
    white-space: nowrap;
}
.tabla th { color: var(--color-texto-suave); font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; background: var(--color-fondo); }
.acciones a { margin-right: 0.75rem; font-weight: 600; text-decoration: none; color: var(--color-primario); }
/* Cuando "Editar"/"Eliminar" son botones de verdad (.boton) dentro de una
   celda de acciones en texto plano, tienen que ganarle en su color propio
   al azul que ".acciones a" le pone a cualquier link de la celda. */
.acciones a.boton--primario { color: #fff; }
.acciones a.boton--peligro { color: #fff; }
.acciones a.boton--advertencia { color: #000; }
.enlace-peligro { color: var(--color-peligro) !important; }
.enlace-advertencia {
    background: var(--color-advertencia);
    color: #000;
    border-radius: 6px;
}

.paginacion { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; margin-bottom: 1rem; font-size: 0.85rem; }
.paginacion a { color: var(--color-primario); text-decoration: none; font-weight: 600; }
.paginacion-total { margin-left: auto; color: var(--color-texto-suave, #555); }

a.topbar__marca { text-decoration: none; color: inherit; }

/* ---------- Filtros y formularios ---------- */

.filtros { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Barra de filtros de /registros/: UN solo contenedor flex con wrap (ya
   no hay divs de fila separados en el template - todos los campos son
   hijos directos, siempre en el mismo orden: buscar, centro, arma, tipo
   de centro, region, fecha desde, fecha hasta, filtrar). Lo que decide
   donde corta la linea es el ANCHO (%) de cada campo en cada media query
   de abajo: si un campo no entra en la linea actual, el navegador lo
   pasa solo a la de abajo - nunca hace falta deslizar de costado para
   llegar al boton Filtrar, porque flex-wrap jamas desborda, solo baja de
   linea. flex-grow reparte lo que sobra en cada linea para que los
   campos lleguen hasta el final, igual que la tabla de abajo. */
#filtros-traslados { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
#filtros-traslados > * { min-width: 0; }
#filtros-traslados button[type="submit"] { flex: 0 0 auto; min-width: 110px; }
/* Fechas con su rotulo ("Fecha inicio" / "Fecha hasta"): el campo nativo solo muestra dd/mm/aaaa. */
#filtros-traslados { align-items: flex-end; }
#filtros-traslados .filtro-fecha { display: flex; flex-direction: column; gap: 0.2rem; }
#filtros-traslados .filtro-fecha > span { font-size: 0.75rem; font-weight: 600; color: var(--color-texto-suave); }

/* Escritorio ancho: entran comodas 2 filas de siempre - buscar+centro
   arriba, el resto abajo. Los porcentajes de la primera fila suman lo
   mas cerca posible al 100% para que ningun otro campo entre ahi. */
@media (min-width: 1025px) {
    #filtros-traslados #buscador-centro-filtro { flex: 1 1 34%; }
    #filtros-traslados select[name="centro"] { flex: 1 1 58%; }
    #filtros-traslados select[name="tipo"] { flex: 1 1 13%; }
    #filtros-traslados select[name="tipo_centro"] { flex: 1.4 1 19%; }
    #filtros-traslados select[name="region"] { flex: 1 1 13%; }
    #filtros-traslados select[name="departamento"] { flex: 1.1 1 15%; }
    #filtros-traslados .filtro-fecha { flex: 1 1 13%; }
}

/* Tablet (769-1024px, incluye iPad en vertical): a este ancho los 6
   campos de la segunda fila de escritorio ya no entran comodos, asi que
   Arma y Tipo de centro suben a la primera fila (ahi sobraba lugar) y la
   segunda se queda con Region + las 2 fechas + Filtrar. Siempre 2 filas,
   nunca hace falta scroll para ninguna de las dos. */
@media (min-width: 769px) and (max-width: 1024px) {
    #filtros-traslados #buscador-centro-filtro { flex: 1 1 18%; }
    #filtros-traslados select[name="centro"] { flex: 1 1 27%; }
    #filtros-traslados select[name="tipo"] { flex: 1 1 17%; }
    #filtros-traslados select[name="tipo_centro"] { flex: 1 1 17%; }
    #filtros-traslados select[name="region"],
    #filtros-traslados select[name="departamento"] { flex: 1 1 22%; }
    #filtros-traslados .filtro-fecha { flex: 1 1 22%; }
}

@media (max-width: 768px) {
    #filtros-traslados { flex-direction: column; }
    #filtros-traslados > * { width: 100%; }
}

.acciones-exportar { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }

.campo-input {
    width: 100%;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 0.95rem;
    /* Fondo distinto al de la tarjeta blanca que lo contiene, para que el
       campo se note como "hueco" para escribir y no se confunda con la
       superficie de la tarjeta. */
    background: var(--color-fondo);
    color: var(--color-texto);
}
.campo-input:focus { outline: 2px solid var(--color-primario); outline-offset: 1px; }

/* Variante "sistema" (igual criterio que .boton--primario): fondo azul,
   letras blancas. Para destacar un filtro puntual como cualquier otro
   elemento primario del sistema (ej. el select de Calificación en
   Reportes generales de inspección). */
.campo-input--primario {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
}
.campo-input--primario:focus { outline-color: var(--color-primario-oscuro); }

.campo { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; max-width: 420px; }
.campo label { font-weight: 600; font-size: 0.88rem; }
.campo small { color: var(--color-texto-suave); font-size: 0.78rem; }
.campo-error { color: var(--color-peligro) !important; }

/* Buscador de centro (formulario de nuevo/editar registro): el input y el
   <select> real van juntos en este contenedor relative para que, al
   "desplegar" el select (JS le pone size>1 + esta clase), quede
   posicionado justo debajo del buscador, tapando lo que sigue del
   formulario en vez de empujarlo hacia abajo. */
.centro-combo { display: flex; flex-direction: column; gap: 0.35rem; position: relative; }
.centro-combo select.centro-desplegado {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    margin-top: 2px;
    box-shadow: var(--sombra);
}

.acciones-formulario { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.campo--centro { max-width: 560px; }
.campo-centro { display: flex; gap: 0.5rem; align-items: stretch; }
.campo-centro select { flex: 1; }
.campo-centro .boton { flex-shrink: 0; white-space: nowrap; }

.panel-nuevo-centro {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.6rem;
    padding: 0.75rem;
    background: var(--color-fondo);
    border: 1px dashed var(--color-borde);
    border-radius: 8px;
}
.panel-nuevo-centro[hidden] { display: none; }
.panel-nuevo-centro input {
    flex: 1;
    min-width: 160px;
}
.panel-nuevo-centro small {
    width: 100%;
    margin: 0;
}

.campo-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
}
.campo-checkbox input {
    width: auto;
}

/* ---------- Botones ---------- */

.boton {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    cursor: pointer;
}
.boton--primario { background: var(--color-primario); border-color: var(--color-primario); color: #fff; }
.boton--primario:hover { background: var(--color-primario-oscuro); }
/* Igual que campo-input: fondo propio en vez de transparente, para que
   se distinga de la tarjeta blanca donde vive. */
.boton--secundario { background: var(--color-fondo); }
.boton--secundario:hover { background: #dde7f6; }
.boton--peligro { background: var(--color-peligro); border-color: var(--color-peligro); color: #fff; }
.boton--peligro:hover { background: #b91c1c; }
.boton--exito { background: var(--color-exito); border-color: var(--color-exito); color: #fff; }
.boton--exito:hover { background: #15803d; }
.boton--advertencia { background: var(--color-advertencia); border-color: var(--color-advertencia); color: #000; }
.boton--advertencia:hover { background: #ca8a04; }
/* Cancelar: mismo criterio que Editar/Eliminar (fondo sólido, texto que
   contraste), pero en naranja para distinguirse a simple vista del rojo de
   Eliminar cuando los dos conviven en una misma pantalla (por ejemplo, las
   confirmaciones de borrado: "Cancelar" al lado de "Eliminar definitivamente"
   quedaban ambos en rojo, y a simple vista no se distinguían). */
.boton--cancelar { background: var(--color-cancelar); border-color: var(--color-cancelar); color: #000; }
.boton--cancelar:hover { background: #ea580c; }
.boton--ancho-completo { width: 100%; text-align: center; }
.boton--chico { padding: 0.35rem 0.7rem; font-size: 0.8rem; border-radius: 7px; }
.boton[hidden] { display: none; }

/* Fila de botones de acción bien separados (ej. "Ver desactivados"): cada
   uno es un botón prolijo en vez de un simple link de texto pegado a los
   demás. Las reglas con clase extra (".acciones-botones a.boton...") son
   necesarias para ganarle en especificidad a ".acciones a" de más abajo,
   que en el resto de la app pinta los links de las tablas de azul. */
.acciones-botones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.acciones-botones a.boton { margin-right: 0; text-decoration: none; }
.acciones-botones a.boton--secundario { color: var(--color-texto); }
.acciones-botones a.boton--peligro { color: #fff; }

/* ---------- Login ---------- */

.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #38bdf8 100%);
    padding: 1.5rem;
}
.login-tarjeta {
    background: var(--color-superficie);
    border-radius: 16px;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 380px;
}
.login-tarjeta__encabezado { text-align: center; margin-bottom: 1.5rem; }
.login-tarjeta__logo {
    display: inline-block;
    font-weight: 800;
    color: var(--color-primario);
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    margin-bottom: 0.4rem;
}
.login-tarjeta__logo-img {
    display: block;
    width: 82%;
    max-width: 250px;
    height: auto;
    margin: 0 auto;
}
.login-tarjeta__encabezado h1 { margin: 0 0 0.35rem; font-size: 1.35rem; }
.login-tarjeta__encabezado p { margin: 0; color: var(--color-texto-suave); font-size: 0.9rem; }

.login-form { display: flex; flex-direction: column; gap: 0.4rem; }
.login-form label { font-weight: 600; font-size: 0.85rem; margin-top: 0.5rem; }

.login-nota { margin-top: 1.25rem; text-align: center; font-size: 0.78rem; color: var(--color-texto-suave); }

.alerta { padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; }
.alerta--error { background: #fee2e2; color: #991b1b; }

/* ---------- Insignias Sí/No (checklist de inspecciones) ---------- */

.badge-si, .badge-no {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    margin-right: 0.3rem;
}
.badge-si { background: #dcfce7; color: #166534; }
.badge-no { background: #fee2e2; color: #991b1b; }

/* ---------- Calificación de un reporte (según % de respuestas "Sí") ---------- */
/* Excelente 90-100% · Bueno 53-89% · Regular 30-52% · Deficiente <30% */
.badge-calificacion {
    display: inline-block;
    min-width: 92px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    white-space: nowrap;
}
.badge-calificacion--excelente { background: #dcfce7; color: #166534; }
.badge-calificacion--bueno { background: #dbeafe; color: #1d4ed8; }
.badge-calificacion--regular { background: #fef9c3; color: #854d0e; }
.badge-calificacion--deficiente { background: #fee2e2; color: #991b1b; }
.calificacion-porcentaje { color: var(--color-texto-suave); font-size: 0.82rem; min-width: 3.2rem; display: inline-block; }
/* Insignia + porcentaje bien separados y alineados en columna, para que
   todas las filas de la tabla se vean prolijas (ej. "Excelente   100%"). */
.resultado-celda { display: inline-flex; align-items: center; gap: 0.75rem; }

/* ---------- Reportes generales (filtros + resumen + descarga de PDF) ---------- */
.kpi--excelente { border-left-color: #166534; }
.kpi--bueno { border-left-color: #1d4ed8; }
.kpi--regular { border-left-color: #854d0e; }
.kpi--deficiente { border-left-color: #991b1b; }
.kpi__promedio { color: var(--color-texto-suave); font-size: 0.85rem; margin-top: -0.5rem; margin-bottom: 1rem; }
.filtros label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-texto-suave);
}
.filtros .campo-input { width: auto; min-width: 160px; }
/* La mayoria de estas barras de filtros viven directo sobre el fondo
   celeste de la pagina (no dentro de una tarjeta blanca), asi que el
   campo-input necesita el criterio contrario al habitual: fondo
   blanco (igual que el boton "Filtrar" de al lado) para que los
   elementos del filtro se vean como un solo grupo uniforme. */
.filtros .campo-input { background: var(--color-superficie); }
/* Excepcion: cuando la barra de filtros esta DENTRO de una tarjeta
   blanca (ej. el historial dentro del detalle de un punto), volvemos
   al criterio general de campo-input: fondo celeste para que el
   campo contraste con la tarjeta que lo contiene. */
.tarjeta .filtros .campo-input { background: var(--color-fondo); }
.filtros__acciones { display: flex; align-items: flex-end; gap: 0.6rem; }

/* ---------- Checklist de inspección (preguntas Sí/No) ---------- */

.campo--pregunta { max-width: 640px; }
.pregunta-booleana { display: flex; gap: 1.25rem; }
.pregunta-booleana__opcion {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 500;
    cursor: pointer;
}
.pregunta-booleana__opcion input { width: auto; }

/* ---------- Inspecciones: menú de configuración (⚙) ---------- */
/* Junta "Ver desactivados" y "Preguntas del reporte" en un desplegable que
   siempre arranca recogido, para no ocupar dos botones grandes junto al
   título. */
.titulo-con-menu { display: flex; align-items: center; gap: 0.6rem; }
.titulo-con-menu h1 { margin: 0; }

.menu-config { position: relative; z-index: 15; }
.menu-config__boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-primario);
    box-shadow: var(--sombra);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.menu-config__boton:hover { background: var(--color-fondo); }
.menu-config__boton[aria-expanded="true"] {
    background: var(--color-fondo);
    border-color: var(--color-primario);
}
/* Variante chica: un engranaje por cada grupo del mapa, dentro de su fila
   de título, mucho más discreto que el de la cabecera. */
.menu-config__boton--chico {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    box-shadow: none;
}
.menu-config__lista {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 0.4rem;
    /* Tiene que ganarle a las capas internas de Leaflet (sus controles y
       paneles usan z-index de hasta ~1000), si no el mapa lo tapa. */
    z-index: 1500;
}
/* El engranaje de cada grupo está pegado al borde derecho de la barra
   lateral, así que su desplegable se alinea a la derecha (y no a la
   izquierda, que lo sacaría fuera de la barra) y es un poco más angosto. */
.menu-config--grupo .menu-config__lista {
    left: auto;
    right: 0;
    min-width: 180px;
}
.menu-config__lista a,
.menu-config__lista button {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--color-texto);
    text-decoration: none;
    text-align: left;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.menu-config__lista a:hover,
.menu-config__lista button:hover { background: var(--color-fondo); color: var(--color-primario-oscuro); }
.menu-config__lista form { margin: 0; }
.menu-config__lista[hidden] { display: none; }
/* La opción de eliminar, dentro de estos menús, con el mismo fondo rojo y
   letra blanca que cualquier otro botón de eliminar/cancelar del sistema
   (el !important de .enlace-peligro fuerza el color de texto, así que acá
   hace falta igualarlo para que no le gane al blanco). */
.menu-config__lista a.enlace-peligro {
    background: var(--color-peligro);
    color: #fff !important;
}
.menu-config__lista a.enlace-peligro:hover {
    background: #b91c1c;
    color: #fff !important;
}
.menu-config__lista a.enlace-advertencia {
    background: var(--color-advertencia);
    color: #000;
}
.menu-config__lista a.enlace-advertencia:hover {
    background: #ca8a04;
    color: #000;
}

/* ---------- Inspecciones: mapa ---------- */

/* El mapa se arma como un "escenario" a pantalla completa (el mapa de
   Leaflet ocupa todo el espacio disponible) con las demás piezas
   -encabezado, buscador, barra lateral de grupos/puntos- flotando encima
   como tarjetas (mismo criterio que .mapa-panel-punto, que ya flotaba así).
   Mobile-first: acá van los estilos base (celular), y el escenario a
   pantalla completa con las tarjetas en posición absoluta se activa recién
   en el media query de escritorio, más abajo. */
.mapa-escenario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mapa-flotante {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* En celular el título y la barra lateral no van juntos en una sola
   columna flotante: "display:contents" hace que esta envoltura desaparezca
   del layout y sus dos hijos (título y barra lateral) pasen a ser hijos
   directos de .mapa-escenario, cada uno con su propio "order" más abajo. */
.mapa-flotante--lateral {
    display: contents;
}

.mapa-sidebar {
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-height: 480px;
}
.mapa-sidebar__grupos { overflow-y: auto; flex: 1; }
.mapa-sidebar__vacio { color: var(--color-texto-suave); font-size: 0.88rem; }

.mapa-grupo { border-bottom: 1px solid var(--color-borde); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
.mapa-grupo:last-child { border-bottom: none; }
.mapa-grupo summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    padding: 0.4rem 0.2rem;
    list-style: none;
}
.mapa-grupo summary::-webkit-details-marker { display: none; }
.mapa-grupo__acciones { display: flex; align-items: center; gap: 0.2rem; }
.mapa-grupo__eliminar {
    color: var(--color-texto-suave);
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.1rem 0.35rem;
    border-radius: 6px;
}
.mapa-grupo__eliminar:hover { color: var(--color-peligro); background: #fee2e2; }
.mapa-grupo__ocultar {
    background: none;
    border: none;
    color: var(--color-texto-suave);
    text-decoration: none;
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
}
.mapa-grupo__ocultar:hover { color: var(--color-primario-oscuro); background: var(--color-fondo); }
.mapa-grupo__puntos { list-style: none; margin: 0; padding: 0; }
.mapa-grupo__vacio { color: var(--color-texto-suave); font-size: 0.82rem; padding: 0.3rem 0.5rem; }

.mapa-punto-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.45rem 0.5rem;
    font: inherit;
    font-size: 0.86rem;
    color: var(--color-texto);
    border-radius: 6px;
    cursor: pointer;
}
.mapa-punto-item:hover { background: var(--color-fondo); }

.mapa-nuevo-grupo {
    /* Arranca escondido SIEMPRE (web, celular y tablet): antes en
       escritorio quedaba fijo y visible, ocupando espacio permanente en la
       barra lateral y dejando menos lugar para ver/mover los grupos y
       puntos. Ahora el botón "+ Más" lo despliega en cualquier pantalla
       (ver .mapa-nuevo-grupo--visible-movil más abajo). */
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    /* Antes tenia un borde gris arriba para separarla de la lista de
       grupos/puntos; ahora que tiene fondo propio (ver mas abajo) ese
       borde ya no hace falta, el color de fondo alcanza para separarla. */
    /* Mismo verde suave que el anillo de los clusters chicos del mapa
       (marker-cluster-small en MarkerCluster.Default.css), para asociar
       visualmente esta caja con la agrupacion de puntos. */
    background: rgba(181, 226, 140, 0.35);
    border-radius: var(--radio);
    padding: 0.85rem;
    margin-top: 0.85rem;
}
.mapa-nuevo-grupo.mapa-nuevo-grupo--visible-movil { display: flex; }
.mapa-nuevo-grupo .campo-input { text-align: center; background: var(--color-superficie); }
.mapa-nuevo-grupo .boton--secundario { background: var(--color-superficie); }

/* Botón "+ Más" que muestra/esconde el formulario de "Agregar grupo",
   ahora en cualquier tamaño de pantalla (antes solo se veía en celular). */
.mapa-alternar-nuevo-grupo { display: block; width: 100%; }

/* Control "Mi ubicación" reubicado dentro del mapa (arriba a la derecha,
   entre el selector de capas y el zoom, ver inspecciones_mapa.js). Se le
   da la pinta de los controles nativos de Leaflet (fondo blanco, sombra),
   ya que ahora vive ahí en vez de en la barra de búsqueda. */
.mapa-control-ubicacion {
    background: transparent;
    box-shadow: none;
    border: none;
}
.mapa-control-ubicacion #boton-mi-ubicacion {
    /* Solo el ícono (círculo + puntito, ver mapa.html): cuadrado chico
       como los demás controles nativos de Leaflet (zoom, capas), sin
       texto ni padding de más. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra);
}

/* Orden de apilado en celular (el escenario es un flex column ahí):
   título, buscador, barra lateral de grupos/puntos, y el mapa al final. */
.mapa-flotante--lateral > .panel-encabezado { order: 1; }
.mapa-flotante--buscador { order: 2; }
/* Mismo "order" que el buscador (2): al tener el mismo valor, el orden
   entre ambos lo define en qué orden aparecen en el HTML (el buscador va
   primero), así el combo de riesgo cae justo debajo de él. */
.mapa-flotante--riesgo { order: 2; }
/* A pedido: en celular la barra de grupos/puntos va ANTES que el mapa
   (orden 3), y el mapa queda al final (orden 4) — invertido respecto
   del orden "natural" title/buscador/mapa/grupos. */
.mapa-flotante--lateral > .mapa-sidebar { order: 3; }
.mapa-contenedor { order: 4; }

.mapa-buscador { display: flex; gap: 0.6rem; }
.mapa-buscador__campo { position: relative; flex: 1; }
.mapa-buscador__campo .campo-input { width: 100%; }
/* El campo de busqueda y el boton "Mi ubicacion" van en blanco (en vez
   del celeste habitual de campo-input/boton--secundario), para quedar
   invertidos respecto de la tarjeta celeste que los contiene en
   escritorio (ver ".mapa-flotante--buscador .mapa-buscador" mas abajo). */
.mapa-buscador .campo-input { background: var(--color-superficie); }
.mapa-buscador .boton--secundario { background: var(--color-superficie); }
.mapa-resultados-busqueda {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: #fff;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    box-shadow: var(--sombra);
    max-height: 260px;
    overflow-y: auto;
}
.mapa-resultados-busqueda li { margin: 0; }
.mapa-resultados-busqueda button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0.6rem;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-texto);
    cursor: pointer;
}
.mapa-resultados-busqueda button:hover { background: var(--color-fondo); }
.mapa-aviso {
    margin: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 8px;
    background: #fef9c3;
    color: #854d0e;
    font-size: 0.85rem;
}
.mapa-aviso--advertencia {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
    margin-bottom: 0.85rem;
}
.mapa-contenedor {
    height: 400px;
    width: 100%;
    border-radius: var(--radio);
    overflow: hidden;
    box-shadow: var(--sombra);
    background: #e2e8f0;
}

/* ---------- Mapa de calor (unificado dentro del mapa de pines, ver
   ".mapa-calor-panel" más abajo y inspecciones_mapa.js) ---------- */

.mapa-leyenda-calor__titulo {
    font-size: 0.82rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-texto-suave);
}
.mapa-leyenda-calor__barra {
    height: 10px;
    border-radius: 999px;
    margin-top: 0.5rem;
    background: linear-gradient(to right, #22c55e, #facc15, #dc2626);
}
.mapa-leyenda-calor__etiquetas {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--color-texto-suave);
    margin-top: 0.3rem;
}
/* Reutilizada además en la leyenda del combo "Nivel de riesgo" (ver
   ".mapa-control-riesgo__leyenda" más abajo). */
.mapa-leyenda-calor__punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Panel "Mapa de calor" de la barra lateral: un interruptor (apagado por
   defecto — el mapa arranca en modo pines) que despliega la región de
   estudio, qué estudiar (nivel de riesgo o puntos de inspección) y la
   leyenda, sin ocupar espacio mientras está apagado. */
.mapa-calor-panel {
    border-top: 1px solid var(--color-borde);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    flex-shrink: 0;
}

/* Botón "Mapa de Calor" que colapsa/expande TODO el panel de arriba
   (interruptor + opciones + leyenda), igual mecanismo que "+ Más" para
   "Agregar grupo" pero con un default distinto por tamaño de pantalla: acá
   el panel arranca DESPLEGADO en escritorio (>1024px, el botón ni se ve) y
   COLAPSADO en celular/tablet (<=1024px, ver el botón despliega/esconde
   agregándole la clase --visible-movil desde inspecciones_mapa.js). */
.mapa-alternar-mapa-calor { display: none; }
@media (max-width: 1024px) {
    .mapa-alternar-mapa-calor { display: block; width: 100%; margin-top: 0.75rem; }
    .mapa-calor-panel { display: none; }
    .mapa-calor-panel.mapa-calor-panel--visible-movil { display: block; }
}
.mapa-calor-panel__interruptor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
}
.mapa-calor-panel__interruptor input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.mapa-calor-panel__opciones {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.65rem;
}
.mapa-calor-panel__opciones .campo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.mapa-calor-panel__opciones .campo label {
    font-size: 0.78rem;
    color: var(--color-texto-suave);
}

/* ---------- Control "Nivel de riesgo" del mapa de pines ----------
   Tarjeta flotante propia, pegada al pie del mapa (ver la posición exacta
   en escritorio más abajo, ".mapa-flotante--riesgo" en el media query) —
   no vive en la barra lateral (que queda libre para grupos/puntos) ni
   arriba (donde chocaba con el buscador y el selector de capas de
   Leaflet). Colapsada por defecto: el botón "Nivel de Riesgo" (ver
   ".mapa-control-riesgo__alternar" más abajo) es lo único que se ve hasta
   que se lo toca, para no ocupar lugar mientras se busca o se trabaja en
   el mapa; un clic más lo vuelve a esconder. */
.mapa-control-riesgo {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--color-superficie);
    color: var(--color-texto);
    padding: 0.55rem 0.65rem;
    border-radius: 10px;
    box-shadow: var(--sombra);
    margin-bottom: 0.5rem;
}
.mapa-control-riesgo.mapa-control-riesgo--visible { display: flex; }

/* Botón que despliega/esconde el panel de arriba (ver JS:
   "boton-alternar-riesgo"). Con la tarjeta colgando de "bottom" (ver
   ".mapa-flotante--riesgo"), este botón queda siempre pegado al pie del
   mapa y el panel se despliega hacia arriba de él, nunca lo tapa. */
.mapa-control-riesgo__alternar {
    display: block;
    background: var(--color-superficie);
    color: var(--color-texto);
    border: none;
    padding: 0.5rem 0.8rem;
    border-radius: 10px;
    box-shadow: var(--sombra);
    font: inherit;
    font-weight: 700;
    font-size: 0.82rem;
    cursor: pointer;
    white-space: nowrap;
}
.mapa-control-riesgo__alternar:hover { background: var(--color-fondo); }

.mapa-control-riesgo__select {
    width: 100%;
    padding: 0.35rem 0.4rem;
    border-radius: 7px;
    border: 1px solid var(--color-borde);
    background: var(--color-fondo);
    color: var(--color-texto);
    font-size: 0.8rem;
}
/* Leyenda chica y discreta, en columna (Riesgo alto/medio/bajo = el mismo
   semáforo rojo/amarillo/verde de siempre, y gris para el resto, solo que
   acá con esas palabras en vez de "Puesto 1/2/3/Resto"). */
.mapa-control-riesgo__leyenda {
    list-style: none;
    margin: 0.1rem 0 0;
    padding: 0.3rem 0 0;
    border-top: 1px solid var(--color-borde);
    display: flex;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--color-texto-suave);
}
.mapa-control-riesgo__leyenda--columna {
    flex-direction: column;
    align-items: flex-start;
}
.mapa-control-riesgo__leyenda li {
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.mapa-control-riesgo__leyenda .mapa-leyenda-calor__punto {
    width: 7px;
    height: 7px;
    margin-right: 0.25rem;
}

/* Clusters de puntos coloreados por riesgo (ver iconoClusterRiesgo en
   inspecciones_mapa.js): reemplaza el esquema por defecto de
   Leaflet.markercluster, que colorea el cluster solo según cuántos puntos
   agrupa (sin relación con el riesgo) y podía mostrar, por ejemplo, un
   cluster amarillo formado enteramente por puntos verdes. La estructura
   (círculo + número) es la misma que trae la librería por defecto; lo
   único que cambia es de dónde sale el color. */
.mapa-cluster-riesgo { background: transparent; }
.mapa-cluster-riesgo__nucleo {
    width: 34px;
    height: 34px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font: 600 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.85);
}
.mapa-ayuda { margin: 0; color: var(--color-texto-suave); font-size: 0.82rem; }

/* Créditos del mapa (Esri/OSM): la ley de uso exige mantenerlos, pero el
   texto completo es larguísimo y en el celular tapaba media pantalla. Se
   muestran achicados y truncados en una sola línea; un toque los despliega
   completos y otro toque los vuelve a achicar. */
.mapa-contenedor .leaflet-control-attribution {
    max-width: min(78vw, 420px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.68rem;
    line-height: 1.3;
    cursor: pointer;
}
.mapa-contenedor .leaflet-control-attribution.mapa-atribucion--expandida {
    max-width: min(92vw, 480px);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* Marcadores propios (sin depender de las imágenes por defecto de Leaflet).
   Cada marcador es un pin (la "gota") con el color de su grupo; cuando el
   punto está vinculado a un Centro se le suma un anillo detrás, del color
   que le corresponde en el ranking de heridos del mes corriente
   (rojo/amarillo/verde para los tres primeros, gris para el resto: igual
   que en la tabla de ranking). */
.mapa-marcador-contenedor {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
}
.mapa-marcador-anillo {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid transparent;
    background: rgba(255, 255, 255, 0.95);
    /* Doble "aro" de contorno (halo blanco + línea oscura fina) para que el
       color del anillo se distinga siempre del mapa de fondo, sobre todo el
       amarillo, que se camufla contra las calles/terrenos claros de las
       teselas de Esri. */
    box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.95),
        0 0 0 3px rgba(15, 23, 42, 0.3),
        0 3px 8px rgba(15, 23, 42, 0.4);
}
.mapa-marcador-pin {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.45);
}
/* Punto celeste tipo "estás acá" que muestra "Mi ubicación", con un pulso
   suave para diferenciarlo a simple vista de los pines de inspección. */
.mapa-marcador-ubicacion {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2563eb;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 2px 6px rgba(15, 23, 42, 0.4);
    animation: mapa-ubicacion-pulso 2s ease-in-out infinite;
}
@keyframes mapa-ubicacion-pulso {
    0%, 100% { box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.5), 0 2px 6px rgba(15, 23, 42, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0.15), 0 2px 6px rgba(15, 23, 42, 0.4); }
}
.mapa-marcador-pin--nuevo {
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    border: 3px solid #1f2733;
    animation: mapa-marcador-pulso 1.1s ease-in-out infinite;
}
@keyframes mapa-marcador-pulso {
    0%, 100% { transform: rotate(-45deg) scale(1); }
    50% { transform: rotate(-45deg) scale(1.15); }
}

/* Ventana emergente (popup) de un punto */
.mapa-popup {
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 200px;
}
.mapa-popup__encabezado {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.mapa-popup__punto-color {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.25);
}
/* El popup de Leaflet es SIEMPRE fondo blanco (así lo define la propia
   librería, sin importar el tema claro/oscuro de la app — ver
   .leaflet-popup-content-wrapper en leaflet.css), así que su texto va con
   colores fijos en vez de var(--color-texto)/var(--color-texto-suave):
   esas variables se vuelven claras en modo oscuro y quedaban casi
   invisibles sobre el fondo blanco del popup. */
.mapa-popup__titulo {
    font-size: 1rem;
    line-height: 1.25;
    color: #1f2733;
}
.mapa-popup__grupo { color: #64748b; font-size: 0.8rem; }
.mapa-popup__centro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.8rem;
}
.mapa-popup__insignia {
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}
.mapa-popup__direccion {
    color: #64748b;
    font-size: 0.8rem;
    padding-top: 0.35rem;
    border-top: 1px dashed rgba(15, 23, 42, 0.15);
}
/* Leaflet trae su propia regla ".leaflet-container a { color: ... }", más
   específica que una sola clase, así que acá hace falta igualarla en
   especificidad para que el texto del botón se vea realmente blanco. */
.leaflet-container a.mapa-popup__enlace {
    display: block;
    text-align: center;
    margin-top: 0.2rem;
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    background: var(--color-primario);
    color: #fff;
    font-weight: 600;
    font-size: 0.83rem;
    text-decoration: none;
}
.leaflet-container a.mapa-popup__enlace:hover {
    background: var(--color-primario-oscuro);
    color: #fff;
}

/* Un poco más de aire y esquinas redondeadas para la "cápsula" del popup de
   Leaflet, así hace juego con el resto de las tarjetas de la app. */
.mapa-contenedor .leaflet-popup-content-wrapper {
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.mapa-contenedor .leaflet-popup-content { margin: 0.85rem 1rem; }
.mapa-contenedor .leaflet-popup-tip { box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15); }

/* Panel flotante para completar los datos de un punto nuevo */
.mapa-panel-punto {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1000;
    background: var(--color-superficie);
    border-radius: var(--radio);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.28);
    padding: 1.25rem;
    width: 320px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
}
.mapa-panel-punto[hidden] { display: none; }
.mapa-panel-punto h2 { margin: 0 0 0.9rem; font-size: 1.05rem; }
.mapa-panel-punto .campo { max-width: none; }

/* ---------- Inspecciones: mapa a pantalla completa (escritorio/tablet) ----------
   A partir de acá el mapa deja de ser una caja con margen: ocupa todo el
   espacio de la pantalla debajo del encabezado (topbar), de punta a punta,
   y el título, el buscador y la barra lateral de grupos/puntos flotan
   encima como tarjetas, sin taparse entre sí ni tapar el mapa. Se activa
   desde donde termina el layout apilado de celular (768px) para arriba. */
@media (min-width: 769px) {
    body.pagina-mapa-inspecciones {
        display: flex;
        flex-direction: column;
        height: 100vh;
        overflow: hidden;
    }
    body.pagina-mapa-inspecciones .topbar {
        flex-shrink: 0;
    }
    /* .contenido trae un max-width y padding pensados para páginas de
       texto/tablas; acá se anulan para que el mapa llegue a los cuatro
       bordes, y se lo convierte en el "lienzo" sobre el que flotan las
       tarjetas (position:relative + overflow:hidden). */
    body.pagina-mapa-inspecciones .contenido {
        flex: 1;
        min-height: 0;
        max-width: none;
        margin: 0;
        padding: 0;
        position: relative;
        overflow: hidden;
    }
    /* Si en algún momento hay un mensaje del sistema (django messages) en
       esta página, que flote arriba centrado en vez de empujar el mapa. */
    body.pagina-mapa-inspecciones .contenido > .mensajes {
        position: absolute;
        top: 0.85rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1300;
        width: min(90%, 480px);
        margin: 0;
    }

    .mapa-escenario {
        position: absolute;
        inset: 0;
    }

    .mapa-contenedor {
        position: absolute;
        inset: 0;
        height: 100%;
        border-radius: 0;
        box-shadow: none;
    }

    /* Las tarjetas flotantes vuelven a ser columnas flex de verdad (en vez
       de "display:contents") y se ubican por posición absoluta sobre el
       mapa. El z-index las deja por encima tanto del mapa como de los
       controles propios de Leaflet (zoom, capas), que rondan z-index 1000. */
    .mapa-flotante {
        position: absolute;
        z-index: 1100;
    }
    .mapa-flotante--lateral {
        display: flex;
        top: 1rem;
        left: 1rem;
        width: 300px;
        /* "height" (no "max-height"): así la columna siempre ocupa el mismo
           alto fijo, con el título arriba (flex-shrink:0) y la barra lateral
           abajo estirándose para llenar el resto (flex:1) con su propio
           scroll interno. Si fuera max-height, con pocos grupos la tarjeta
           quedaría más baja que ese alto y dejaría asomar el control de
           zoom de Leaflet (que vive fijo abajo a la izquierda del mapa). */
        height: calc(100% - 2rem);
    }
    .mapa-flotante--lateral > .panel-encabezado { order: initial; }
    .mapa-flotante--lateral > .mapa-sidebar { order: initial; }

    /* El título comparte el mismo look de tarjeta flotante que el resto
       (fondo, radio y sombra ya definidos como --sombra/--radio). */
    body.pagina-mapa-inspecciones .mapa-flotante--lateral .panel-encabezado {
        background: var(--color-superficie);
        border-radius: var(--radio);
        box-shadow: var(--sombra);
        padding: 0.9rem 1.1rem;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    /* La barra lateral aprovecha toda la altura que le sobra debajo del
       título, en vez de quedar fija en 480px como en el resto de anchos. */
    .mapa-flotante--lateral .mapa-sidebar {
        flex: 1;
        min-height: 0;
        max-height: none;
    }

    /* El buscador flota arriba, a la derecha de la barra lateral. Ancho fijo
       (no hasta el borde) para no chocar con el selector de capas de
       Leaflet, que vive arriba a la derecha del mapa. */
    .mapa-flotante--buscador {
        top: 1rem;
        left: calc(300px + 2rem);
        width: 380px;
    }
    /* Invertido a proposito respecto del resto del sistema: esta tarjeta
       flotante usa fondo celeste (en vez de blanco) y el campo/boton de
       adentro usan blanco (en vez de celeste), ver las reglas de
       ".mapa-buscador .campo-input" / ".mapa-buscador .boton--secundario"
       mas abajo. */
    .mapa-flotante--buscador .mapa-buscador {
        background: var(--color-fondo);
        border-radius: var(--radio);
        box-shadow: var(--sombra);
        padding: 0.65rem;
    }
    .mapa-flotante--buscador .mapa-aviso {
        box-shadow: var(--sombra);
    }

    /* El combo de riesgo va pegado ABAJO A LA DERECHA del mapa (antes
       flotaba arriba a la derecha, amontonado con el buscador y el
       selector de capas de Leaflet; después probamos centrado abajo del
       todo, pero quedaba en medio del mapa estorbando). Acá abajo a la
       derecha queda lejos de todo lo demás — buscador, capas, zoom,
       sidebar — y de los popups de los puntos (que Leaflet auto-panea
       hacia arriba/al costado al abrirse, ver autoPanPadding en
       inspecciones_mapa.js). Colapsado por defecto (botón "Nivel de
       Riesgo"), así que en la práctica ocupa apenas una esquina chica
       hasta que se lo abre. Ancho fijo y angosto porque ahora las
       opciones son cortas (IAF/IAB, Histórico/mes actual, Uruguay/región)
       y la leyenda va en columna: no hace falta una tarjeta ancha. */
    .mapa-flotante--riesgo {
        top: auto;
        bottom: 1rem;
        left: auto;
        right: 1rem;
        width: 220px;
    }
    .mapa-control-riesgo__select { width: 100%; }
}

/* ---------- Responsive (celular y tablet) ---------- */

/* En celulares, una sola tarjeta por fila.
   El motivo: la grilla usa minmax(180px, 1fr) con auto-fit, asi que desde
   unos 376px de ancho pasa a dos columnas de ~181px. A las tarjetas simples
   les alcanza, pero a la comparativa no: necesita ~292px para que los dos
   nombres de mes entren en una linea cada uno (medido, "Septiembre 2026"
   pide 109px y va dos veces, mas el "vs" y los espacios), y con 181px los
   nombres se montaban uno sobre otro.

   Se probo darle a esa tarjeta sola el ancho completo, pero entonces son 5
   lugares en una grilla de 2 columnas y siempre queda un hueco visible.
   Con una columna no hay huecos, cada numero se lee grande, el orden de
   lectura queda natural (los totales primero, la comparacion al final) y
   ademas "Total de heridos ingresados" entra en una linea.
   El costo es scrollear un poco mas para llegar a los graficos. */
@media (max-width: 680px) {
    .tarjetas-kpi {
        grid-template-columns: 1fr;
    }
    /* Redundante con una sola columna, pero deja la intencion explicita si
       alguna vez se vuelve a varias columnas en este rango. */
    .kpi--comparativo {
        grid-column: 1 / -1;
    }
}

/* De 681px para arriba la grilla es auto-fit con minmax(180px, 1fr): agrega
   una columna en cuanto entran otros 180px, asi que las columnas nunca pasan
   de ~280px. La tarjeta RIH necesita ~290px (dos nombres de mes largos, tipo
   "Noviembre 2026 vs Diciembre 2026", uno al lado del otro), asi que en todo
   ese rango quedaba justa o desbordada, y con la letra del sistema mas grande
   o con zoom se rompia seguro.
   Dos reglas lo resuelven sin dejar huecos en la grilla (las dos paginas que
   usan .tarjetas-kpi tienen 4 tarjetas):
   - 681-1023px: dos columnas fijas -> 2x2, y la RIH queda de 315-476px.
   - 1024px o mas: auto-fit da 5 columnas y la RIH ocupa dos -> 3 + 2 = 5
     celdas, una sola fila completa. En la otra pagina, sin tarjeta RIH, son
     4 tarjetas y auto-fit colapsa la quinta columna sola. */
@media (min-width: 681px) and (max-width: 1023px) {
    .tarjetas-kpi {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .kpi--comparativo {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .topbar {
        flex-wrap: wrap;
        padding: 0.7rem 1.1rem;
    }
    .topbar__fila {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .topbar__escudo { height: 28px; }
    .topbar__hamburguesa { display: flex; }

    /* El panel de nav + usuario se despliega debajo del logo, empujando el
       contenido hacia abajo (nada de superposiciones ni z-index). En vez del
       típico rectángulo blanco y chato, se ve como una "tarjeta" flotante
       con degradé y sombra azulada, con una animación de despliegue suave
       (max-height + opacity, ya que "display" no se puede animar). */
    .topbar__panel {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        margin-top: 0;
        padding: 0 0.9rem;
        border-radius: 0 0 16px 16px;
        background: linear-gradient(180deg, #eaf0ff 0%, #ffffff 68%);
        box-shadow: 0 16px 30px -14px rgba(37, 99, 235, 0.45);
        transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease, padding 0.3s ease;
    }
    .topbar__panel.abierto {
        max-height: 70vh;
        opacity: 1;
        margin-top: 0.75rem;
        padding: 0.85rem 0.9rem 1rem;
        overflow-y: auto;
    }

    .topbar__nav {
        flex-direction: column;
        gap: 0.2rem;
        width: 100%;
    }
    .topbar__nav a {
        padding: 0.85rem 0.9rem;
        border-bottom: none;
        border-radius: 10px;
        font-size: 1rem;
        transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .topbar__nav a:hover { background: rgba(37, 99, 235, 0.1); }
    .topbar__nav a.activo {
        background: linear-gradient(135deg, var(--color-primario), var(--color-primario-oscuro));
        color: #fff;
        border-bottom-color: transparent;
        box-shadow: 0 6px 14px -6px rgba(37, 99, 235, 0.6);
    }

    .topbar__usuario {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: 0.5rem;
        padding: 0.8rem 0.3rem 0.2rem;
        border-top: 1px solid rgba(37, 99, 235, 0.15);
    }
    .topbar__nombre { flex: 1; }

    .contenido { padding: 1.1rem; }

    .panel-encabezado { flex-direction: column; align-items: stretch; }
    .panel-encabezado .boton { width: 100%; text-align: center; }
    .panel-encabezado h1 { font-size: 1.2rem; }

    .tarjeta { padding: 1rem 1.1rem; }

    .contenedor-grafico { height: 240px; }
    .contenedor-grafico--alto { height: 300px; }
    .contenedor-grafico--mensual { height: 360px; }

    /* Gráficos con muchas categorías (centros, meses): en vez de apretar las
       etiquetas hasta que se superpongan, se hacen desplazables de costado,
       igual que ya se hace con las tablas anchas. */
    .grafico-scroll-movil { overflow-x: auto; }
    .grafico-scroll-movil .contenedor-grafico { min-width: 640px; }

    .tabla th, .tabla td, .tabla-ranking th, .tabla-ranking td {
        padding: 0.5rem 0.6rem;
        font-size: 0.82rem;
    }

    .filtros { flex-direction: column; align-items: stretch; }
    .filtros .campo-input, .filtros .boton { width: 100%; }

    .grilla-graficos, .grilla-rankings, .grilla-seguridad { grid-template-columns: 1fr; }

    /* En el celular, el título y el buscador van primero, después la
       lista de grupos/puntos, y al final el mapa (el orden real lo define
       "order" en las reglas de más arriba; acá solo hace falta angostar
       la barra lateral). */
    .mapa-flotante--lateral > .mapa-sidebar { max-height: 280px; }
    .mapa-buscador { flex-direction: column; }
    .mapa-panel-punto {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        width: auto;
    }

    /* "+ Más" / formulario "Agregar grupo": ahora es una regla global (ver
       más arriba, fuera de este breakpoint) — no hace falta repetirla acá. */
}

/* Mismo problema que arriba (celular), pero en el rango de tablet
   (769-1024px —cubre el iPad Pro 12.9" vertical, 1024px de ancho—, entre el
   breakpoint de celular y donde el ancho de escritorio
   ya sobra): la grilla de gráficos pasa a 2 columnas automáticas apenas se
   supera el ancho de celular (auto-fit, minmax 320px), y esa columna angosta
   (~350-450px) no alcanza para las 9 categorías x 2 series del gráfico
   "Heridos por Centro" sin que las etiquetas se superpongan entre sí. Se
   resuelve igual que en celular: una columna de ancho completo para los
   gráficos y, si aun así no entrara, scroll horizontal en vez de aplastar
   el texto. */
@media (min-width: 769px) and (max-width: 1024px) {
    .grilla-graficos { grid-template-columns: 1fr; }
    .grafico-scroll-movil { overflow-x: auto; }
    .grafico-scroll-movil .contenedor-grafico { min-width: 640px; }
}

@media (max-width: 420px) {
    .topbar__subtitulo { display: none; }
}

/* ---------- Impresión (botón "Imprimir" de /registros/) ---------- */
/* Al imprimir, se oculta todo lo que no sea la tabla en sí: navbar, menú
   hamburguesa, filtros, paginación y los botones de acciones/exportar. */
@media print {
    .topbar, .filtros, .acciones-exportar, .paginacion,
    .panel-encabezado .boton, .acciones {
        display: none !important;
    }
    body { background: #fff; }
    .tarjeta { box-shadow: none; padding: 0; margin-bottom: 0; }
    .tabla-scroll { overflow: visible; }
    .tabla { font-size: 0.8rem; }
}

/* =====================================================================
   Tema oscuro (Auto / Claro / Oscuro)
   Se activa poniendo data-theme="dark" en <html> (ver theme.js, cargado
   en el <head> de base.html). "Auto" no pone el atributo y deja que
   prefers-color-scheme decida.
   ===================================================================== */

:root[data-theme="dark"] {
    --color-fondo: #0f172a;
    --color-superficie: #1e293b;
    --color-texto: #e5eaf3;
    --color-texto-suave: #94a3b8;
    --color-borde: #334155;
    --color-primario: #3b82f6;
    --color-primario-oscuro: #60a5fa;
    --color-peligro: #f87171;
    --color-exito: #4ade80;
    --color-advertencia: #eab308;
    --color-cancelar: #fb923c;
    --color-fuego: #f87171;
    --color-blanca: #3b82f6;
    --sombra: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-fondo: #0f172a;
        --color-superficie: #1e293b;
        --color-texto: #e5eaf3;
        --color-texto-suave: #94a3b8;
        --color-borde: #334155;
        --color-primario: #3b82f6;
        --color-primario-oscuro: #60a5fa;
        --color-peligro: #f87171;
        --color-exito: #4ade80;
        --color-advertencia: #eab308;
        --color-cancelar: #fb923c;
        --color-fuego: #f87171;
        --color-blanca: #3b82f6;
        --sombra: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4);
    }
}

html[data-theme="dark"],
html:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
}
@media (prefers-color-scheme: light) {
    html:not([data-theme="light"]):not([data-theme="dark"]) { color-scheme: light; }
}
html[data-theme="light"] { color-scheme: light; }

/* Insignias/mensajes neutros: mismo gris que ya se usa para bordes */
[data-theme="dark"] .badge-rol,
[data-theme="dark"] .badge-auditoria--salida,
[data-theme="dark"] .badge-auditoria--desactivacion,
[data-theme="dark"] .kpi--comparativo__badge--neutro,
[data-theme="dark"] .mapa-contenedor {
    background: var(--color-borde);
}

/* Verde (éxito) */
[data-theme="dark"] .mensaje--success,
[data-theme="dark"] .badge-si,
[data-theme="dark"] .badge-calificacion--excelente,
[data-theme="dark"] .badge-auditoria--ingreso,
[data-theme="dark"] .badge-auditoria--activacion,
[data-theme="dark"] .kpi--comparativo__badge--baja {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
}

/* Rojo (error/peligro) */
[data-theme="dark"] .mensaje--error,
[data-theme="dark"] .badge-no,
[data-theme="dark"] .badge-calificacion--deficiente,
[data-theme="dark"] .badge-auditoria--eliminacion,
[data-theme="dark"] .badge-auditoria--ingreso_fallido,
[data-theme="dark"] .alerta--error,
[data-theme="dark"] .kpi--comparativo__badge--sube {
    background: rgba(248, 113, 113, 0.18);
    color: #f87171;
}

/* Amarillo/ámbar (info/advertencia) */
[data-theme="dark"] .mensaje--info,
[data-theme="dark"] .mensaje--warning,
[data-theme="dark"] .badge-rol--operador,
[data-theme="dark"] .badge-calificacion--regular,
[data-theme="dark"] .badge-auditoria--modificacion,
[data-theme="dark"] .mapa-aviso {
    background: rgba(234, 179, 8, 0.18);
    color: #facc15;
}
[data-theme="dark"] .mapa-aviso--advertencia {
    background: rgba(234, 179, 8, 0.16);
    color: #fbbf24;
    border: 1px solid rgba(234, 179, 8, 0.35);
}

/* Azul (admin/creación/bueno) */
[data-theme="dark"] .badge-rol--admin,
[data-theme="dark"] .badge-calificacion--bueno,
[data-theme="dark"] .badge-auditoria--creacion {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
}

/* Violeta (CAD / cambio de contraseña) */
[data-theme="dark"] .badge-rol--cad,
[data-theme="dark"] .badge-auditoria--cambio_contrasena {
    background: rgba(167, 139, 250, 0.2);
    color: #c4b5fd;
}

/* Celeste (notificación por mail) */
[data-theme="dark"] .badge-auditoria--notificacion_mail {
    background: rgba(56, 189, 248, 0.18);
    color: #7dd3fc;
}

/* Bordes de acento de las tarjetas KPI: versiones más claras para que se
   distingan sobre el fondo oscuro de la tarjeta. */
[data-theme="dark"] .kpi--excelente { border-left-color: #4ade80; }
[data-theme="dark"] .kpi--bueno { border-left-color: #60a5fa; }
[data-theme="dark"] .kpi--regular { border-left-color: #facc15; }
[data-theme="dark"] .kpi--deficiente { border-left-color: #f87171; }
[data-theme="dark"] .kpi--total { border-left-color: #fbbf24; }
[data-theme="dark"] .kpi--comparativo { border-left-color: #a78bfa; }
[data-theme="dark"] .kpi--comparativo__mes-nombre,
[data-theme="dark"] .kpi--comparativo__mes--anterior .kpi--comparativo__mes-valor {
    color: #94a3b8;
}

/* Buscador del mapa: mismo color de superficie que el resto de las tarjetas */
[data-theme="dark"] .mapa-resultados-busqueda {
    background: var(--color-superficie);
}

/* Menú móvil desplegable: degradé oscuro en vez del celeste claro */
@media (max-width: 768px) {
    [data-theme="dark"] .topbar__panel {
        background: linear-gradient(180deg, #1e293b 0%, #0f172a 68%);
        box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6);
    }
    [data-theme="dark"] .topbar__nav a:hover { background: rgba(59, 130, 246, 0.15); }
    [data-theme="dark"] .topbar__usuario { border-top-color: rgba(148, 163, 184, 0.2); }
}

/* ---------- Selector de tema (Auto / Claro / Oscuro) ---------- */

.selector-tema {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    flex-shrink: 0;
}
.selector-tema__opcion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--color-texto-suave);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.selector-tema__opcion svg { width: 16px; height: 16px; pointer-events: none; }
.selector-tema__opcion:hover { color: var(--color-texto); }
.selector-tema__opcion.activo {
    background: var(--color-superficie);
    color: var(--color-primario);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}
[data-theme="dark"] .selector-tema__opcion.activo {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Cabecera de las tablas de ranking (Total / Mes actual): en modo oscuro el
   fondo blanco fijo dejaba el texto (que ya usa --color-texto, claro en
   este tema) invisible. Se cambia el fondo, no la letra, para que siga
   blanca y legible. */
[data-theme="dark"] .tabla-ranking thead th {
    background: var(--color-borde);
}

/* Columna a la derecha del encabezado del panel: el indicador de
   "Actualizado a las..." y, debajo, el desplegable para filtrar el panel
   por región (o "País" para las 4 juntas). */
.panel-encabezado__derecha {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
}
@media (max-width: 768px) {
    .panel-encabezado__derecha { align-items: stretch; width: 100%; }
    .panel-encabezado__derecha #filtro-region { width: 100%; }
}

/* El desplegable de Región/País es el filtro estrella del panel: se
   destaca con el mismo azul primario y letras blancas que el resto de los
   botones principales del sistema (.boton--primario), en vez del fondo
   blanco por defecto de un <select>. */
#filtro-region {
    background: var(--color-primario);
    border-color: var(--color-primario);
    color: #fff;
    font-weight: 600;
}
#filtro-region:hover { background: var(--color-primario-oscuro); }
#filtro-region:focus { outline: 2px solid #fff; outline-offset: 1px; }
#filtro-region option {
    background: var(--color-superficie);
    color: var(--color-texto);
    font-weight: 400;
}


/* ---- Modo análisis (gráficos "Análisis herido por arma...") ---- */
.analisis-barra {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: transparent;
}
.analisis-barra__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.analisis-boton {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: transparent;
    color: var(--color-texto);
    font: inherit;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
}
.analisis-boton:disabled { opacity: .45; cursor: not-allowed; }
.analisis-boton:focus-visible { outline: 3px solid var(--color-advertencia); outline-offset: 2px; }
.tarjeta--fuego .analisis-boton--principal { background: var(--color-fuego); border-color: var(--color-fuego); color: #fff; }
.tarjeta--blanca .analisis-boton--principal { background: var(--color-blanca); border-color: var(--color-blanca); color: #fff; }
.tarjeta--fuego .analisis-boton--secundario { border-color: var(--color-fuego); }
.tarjeta--blanca .analisis-boton--secundario { border-color: var(--color-blanca); }
.analisis-boton--ligero { border-color: var(--color-advertencia); }
.analisis-boton--aviso { background: var(--color-advertencia); color: #000; }
.analisis-barra__estado {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: .92rem;
    font-weight: 600;
    color: var(--color-texto);
}
.analisis-barra__punto {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: .38em;
    border-radius: 50%;
    background: var(--color-texto-suave);
}
.analisis-barra--en-vivo .analisis-barra__punto { background: var(--color-exito); }
.analisis-barra--tachando .analisis-barra__punto,
.analisis-barra--pausa .analisis-barra__punto { background: var(--color-advertencia); }
.analisis-barra--pausa {
    border-color: var(--color-advertencia);
    background: rgba(234, 179, 8, .14);
}
.analisis-barra__detalle { margin: 0; font-size: .85rem; color: var(--color-texto-suave); }

/* ---- Leyenda en tabla de los gráficos de análisis ---- */
.analisis-leyenda { margin-top: 14px; overflow-x: auto; }
.analisis-leyenda__tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.analisis-leyenda__tabla th {
    text-align: left;
    padding: 8px 12px;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-texto-suave);
    border-bottom: 2px solid var(--color-borde);
}
.analisis-leyenda__tabla td { padding: 8px 12px; border-bottom: 1px solid var(--color-borde); color: var(--color-texto); }
.analisis-leyenda__num { text-align: right !important; width: 1%; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.analisis-leyenda__fila { cursor: pointer; }
.analisis-leyenda__fila:hover td { background: rgba(127, 127, 127, .10); }
.analisis-leyenda__fila:focus-visible { outline: 3px solid var(--color-advertencia); outline-offset: -3px; }
.analisis-leyenda__celda { display: flex; align-items: center; gap: 10px; min-width: 0; }
.analisis-leyenda__nombre { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.analisis-leyenda__muestra { flex: none; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(127, 127, 127, .45); }
.analisis-leyenda__muestra--linea { height: 0; border: 0; border-top: 3px solid var(--color-texto); border-radius: 0; position: relative; }
.analisis-leyenda__fila--tachada .analisis-leyenda__nombre,
.analisis-leyenda__fila--tachada .analisis-leyenda__num { text-decoration: line-through; opacity: .5; }
.analisis-leyenda__fila--tachada .analisis-leyenda__muestra { opacity: .4; }

/* ---- Mapas de calor "Horas pico" (día x hora) ---- */
.grilla-graficos--calor { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.calor-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 14px; }
/* Tarjetas del resumen: mismo naranja suave que las etiquetas del recuadro explicativo. */
.calor-chip { background: #fed7aa; border: 1px solid #fdba74; border-radius: 10px; padding: 8px 12px; min-width: 0; }
.calor-chip__titulo { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a3412; }
.calor-chip__valor { font-size: 1.1rem; font-weight: 800; color: #431407; overflow-wrap: anywhere; }
.calor-chip__detalle { font-size: .8rem; color: #7c2d12; }
.calor-scroll { overflow-x: auto; padding-bottom: 4px; }
.calor-tabla { border-collapse: separate; border-spacing: 2px; width: 100%; min-width: 800px; table-layout: fixed; }
.calor-tabla th { font-size: .7rem; font-weight: 700; color: var(--color-texto-suave); padding: 2px 0; text-align: center; }
.calor-tabla th.calor-dia { width: 46px; text-align: left; color: var(--color-texto); font-size: .8rem; }
.calor-tabla th.calor-col-total { width: 58px; }
.calor-celda { height: 34px; padding: 0; text-align: center; font-weight: 800; font-size: .85rem; border-radius: 4px; color: #111827; }
.calor-celda--vacia { background: rgba(127, 127, 127, .14); }
.calor-celda--b0 { background: #22c55e; }
.calor-celda--b1 { background: #facc15; }
.calor-celda--b2 { background: #dc2626; }
.calor-celda--b3 { background: #94a3b8; } /* pocos casos: sin semáforo */
.calor-total { text-align: center; font-size: .78rem; font-weight: 800; line-height: 1.15; color: var(--color-texto); padding-top: 3px; font-variant-numeric: tabular-nums; }
.calor-total small { display: block; font-size: .6rem; font-weight: 600; color: var(--color-texto-suave); }
.calor-total--general { border-left: 2px solid var(--color-borde); }
.calor-pico { text-align: center; padding: 2px 0; }
.calor-pico__pildora { display: inline-block; background: var(--color-advertencia); color: #000; border-radius: 999px; padding: 1px 6px; font-size: .68rem; font-weight: 800; }
.calor-pico__pildora--empate { background: transparent; color: var(--color-texto); box-shadow: inset 0 0 0 2px var(--color-advertencia); }
.cargando { opacity: .55; transition: opacity .15s; pointer-events: none; }
.calor-escala { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 4px; font-size: .8rem; color: var(--color-texto); }
.calor-escala__item { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.calor-escala__muestra { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(127,127,127,.4); }
.calor-escala__nota { color: var(--color-texto-suave); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Combo de mes del estudio (mapas de calor "Horas pico") */
.analisis-mes { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; color: var(--color-texto); }
.analisis-mes__select {
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    border: 2px solid var(--color-borde);
    background: var(--color-superficie);
    color: var(--color-texto);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.analisis-mes__select:focus-visible { outline: 3px solid var(--color-advertencia); outline-offset: 2px; }

/* Explicación de los datos de "Horas pico" */
.calor-explica { margin: 12px 0 4px; padding: 0 14px 12px; border: 1px solid var(--color-borde); border-radius: 10px; overflow: hidden; }
/* Título: fuente blanca sobre franja azul, a todo el ancho del recuadro. */
.calor-explica__titulo { margin: 0 -14px 12px; padding: 9px 14px; font-size: .9rem; font-weight: 700; color: #fff; background: #2563eb; }
.calor-explica__lista { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; align-items: center; margin: 0; font-size: .85rem; }
/* Etiquetas (naranja suave) para cada dato; el texto explicativo queda en gris. */
.calor-explica__lista dt { justify-self: start; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; color: #9a3412; background: #fed7aa; border-radius: 999px; padding: 3px 11px; }
.calor-explica__lista dd { margin: 0; color: var(--color-texto-suave); min-width: 0; }
.calor-explica__nota { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed var(--color-borde); font-size: .78rem; color: var(--color-texto-suave); }
@media (max-width: 560px) {
    .calor-explica__lista { grid-template-columns: 1fr; gap: 0; }
    .calor-explica__lista dd { margin-bottom: 8px; }
}
[data-theme="dark"] .calor-explica__lista dt { color: #fdba74; background: rgba(251, 146, 60, 0.22); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .calor-explica__lista dt { color: #fdba74; background: rgba(251, 146, 60, 0.22); } }
[data-theme="dark"] .calor-chip { background: rgba(251, 146, 60, 0.22); border-color: rgba(251, 146, 60, 0.45); }
[data-theme="dark"] .calor-chip__titulo { color: #fdba74; }
[data-theme="dark"] .calor-chip__valor { color: #fff7ed; }
[data-theme="dark"] .calor-chip__detalle { color: #fed7aa; }

/* Tablas de centros de los análisis: filas pasadas las primeras 10, ocultas hasta "Ver más". */
.analisis-leyenda__fila--oculta { display: none; }

/* Lista de centros: estado y filas desactivadas */
.estado-centro { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.estado-centro--activo { background: #dcfce7; color: #166534; }
.estado-centro--inactivo { background: #e2e8f0; color: #475569; }
.estado-centro--sinpunto { background: #fef3c7; color: #92400e; margin-left: 0.35rem; }
.fila-centro-inactivo td:first-child { color: var(--color-texto-suave); }
[data-theme="dark"] .estado-centro--activo { background: #14532d; color: #bbf7d0; }
[data-theme="dark"] .estado-centro--inactivo { background: #334155; color: #cbd5e1; }
[data-theme="dark"] .estado-centro--sinpunto { background: #78350f; color: #fde68a; }
/* Lista de centros: con las columnas Estado y Traslados la tabla es más ancha;
   se compacta el relleno lateral para que los botones no queden cortados. */
#tarjeta-centros .tabla th, #tarjeta-centros .tabla td { padding-left: 0.6rem; padding-right: 0.6rem; }
#tarjeta-centros .tabla td.acciones { white-space: nowrap; }

/* Formulario de centros: cuadro de "centros parecidos" mientras se escribe el nombre */
.sugerencias-centro {
    margin-top: 0.4rem;
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    background: var(--color-fondo);
    overflow: hidden;
}
.sugerencias-centro__titulo { padding: 0.5rem 0.75rem; font-size: 0.82rem; font-weight: 700; color: var(--color-texto-suave); border-bottom: 1px solid var(--color-borde); }
.sugerencias-centro__titulo--alerta { color: #991b1b; background: #fee2e2; }
.sugerencias-centro__ok { padding: 0.5rem 0.75rem; font-size: 0.85rem; color: #166534; background: #dcfce7; }
.sugerencias-centro__lista { list-style: none; margin: 0; padding: 0; max-height: 15rem; overflow-y: auto; }
.sugerencias-centro__item { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--color-borde); }
.sugerencias-centro__item:last-child { border-bottom: 0; }
.sugerencias-centro__item--igual { background: #fee2e2; }
.sugerencias-centro__item--igual .sugerencias-centro__nombre { color: #991b1b; }
.sugerencias-centro__nombre { font-size: 0.9rem; font-weight: 600; color: var(--color-texto); }
.sugerencias-centro__detalle { font-size: 0.78rem; color: var(--color-texto-suave); }
.sugerencias-centro__mas { padding: 0.4rem 0.75rem; font-size: 0.78rem; color: var(--color-texto-suave); }
[data-theme="dark"] .sugerencias-centro__titulo--alerta { background: #7f1d1d; color: #fecaca; }
[data-theme="dark"] .sugerencias-centro__ok { background: #14532d; color: #bbf7d0; }
[data-theme="dark"] .sugerencias-centro__item--igual { background: #7f1d1d; }
[data-theme="dark"] .sugerencias-centro__item--igual .sugerencias-centro__nombre { color: #fecaca; }
/* Formulario de centros: la lista de centros ya cargados solo se ve desplegada (al tocar el nombre) */
#lista-centros-existentes:not(.centro-desplegado) { display: none; }