/* ==========================================================================
   Portal público — Región Policial
   Diseño de las tres maquetas del cliente para el frente público (región, división y comisaría; 2026-10-11).
   Solo estructura institucional y cifras agregadas: nunca datos de personas.
   Mismas reglas que el panel: sin CDN (fuentes locales, OFL), sin estilos en línea (CSP: style-src 'self'),
   el color nunca va solo (siempre hay texto o icono) y el foco siempre es visible.
   ========================================================================== */

:root {
  --pnp-verde-950: #062a1f;
  --pnp-verde-900: #083d2d;
  --pnp-verde-800: #094a31;
  --pnp-verde-700: #0b5d3b;
  --pnp-verde-100: #e8f1ec;
  --pnp-dorado-400: #f2c230;
  --pnp-dorado-700: #7a5c00;
  --pnp-dorado-100: #fdf3d0;
  --alerta-rojo-700: #b42318;

  --verde-noche: #01241c;
  --verde-pie: #011a14;
  --dorado-cabecera: #e7b21e;
  --dorado-boton: #e9b322;
  --rojo-eslogan: #e31b23;
  --rojo-emergencia: #c8161e;

  --fondo: #f3f6f5;
  --superficie: #ffffff;
  --texto: #1c2430;
  --texto-suave: #5b6570;
  --titulo: #0b1320;
  --borde: #e2e8ec;
  --separador: #edf0f2;
  --foco-claro: var(--pnp-verde-700);
  --foco-oscuro: var(--pnp-dorado-400);

  --radio-sm: 6px;
  --radio: 10px;
  --radio-lg: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 20, .05), 0 2px 6px rgba(16, 24, 20, .07);
  --sombra-elevada: 0 12px 30px rgba(16, 24, 20, .16);

  --ancho: 1320px;
  --alto-franja: 0px;

  --fuente: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-titulos: "Roboto Condensed", "Roboto", "Segoe UI", Arial, sans-serif;
  --fuente-lema: "Kaushan Script", "Segoe Script", cursive;
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente); font-size: 15px; line-height: 1.5;
  color: var(--texto); background: var(--fondo);
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
p { margin: 0 0 .8em; }
a { color: var(--pnp-verde-700); text-underline-offset: 2px; }
a:hover { color: var(--pnp-verde-900); }
img { max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
[id] { scroll-margin-top: calc(var(--alto-franja) + 12px); }
main:focus { outline: none; }

:focus-visible { outline: 2px solid var(--foco-claro); outline-offset: 2px; border-radius: 4px; }
.portal-cabecera :focus-visible, .portal-heroe :focus-visible, .portal-pie :focus-visible, .franja-desarrollo :focus-visible { outline-color: var(--foco-oscuro); }

.saltar-contenido { position: absolute; left: -9999px; top: 8px; z-index: 100; }
.saltar-contenido:focus { left: 8px; top: calc(var(--alto-franja) + 8px); background: var(--superficie); color: var(--pnp-verde-900); padding: 8px 12px; border-radius: var(--radio-sm); }

.icono { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.17em; flex-shrink: 0; }

/* ---------------------------------------------------------------- Franja fija de desarrollo / demostración */
body.con-franja { --alto-franja: 38px; padding-top: var(--alto-franja); }
.franja-desarrollo {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  min-height: var(--alto-franja);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 6px 16px;
  background: var(--alerta-rojo-700); color: #fff;
  font-weight: 700; font-size: .86rem; letter-spacing: .02em; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.franja-desarrollo.franja-demostracion { background: var(--pnp-dorado-700); }

/* ---------------------------------------------------------------- Etiquetas DEMO y PRUEBA */
.chip-demo, .chip-prueba {
  display: inline-flex; align-items: center; padding: 0 7px; border-radius: 4px;
  font-family: var(--fuente); font-size: .62rem; font-weight: 700; letter-spacing: .08em; line-height: 1.7;
  vertical-align: middle; white-space: nowrap;
}
.chip-demo { background: #fff4d6; color: #6b5000; border: 1px dashed #b98c00; }
.chip-prueba { background: var(--pnp-dorado-100); color: var(--pnp-dorado-700); border: 1px dashed var(--pnp-dorado-700); }

/* ---------------------------------------------------------------- Cabecera */
.portal-cabecera { position: relative; z-index: 40; background: var(--verde-noche); color: #fff; border-bottom: 3px solid var(--dorado-cabecera); }
.portal-cabecera-interior {
  max-width: var(--ancho); margin: 0 auto; padding: 12px 24px;
  display: flex; align-items: center; gap: 18px;
}
.portal-marca { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
.portal-marca-escudo { display: inline-flex; flex-shrink: 0; }
.portal-marca-escudo img { width: 60px; height: auto; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45)); }
.portal-marca-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.12; }
.portal-institucion { font-family: var(--fuente-titulos); font-weight: 700; font-size: .92rem; letter-spacing: .03em; }
.portal-unidad { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.4rem; letter-spacing: .015em; text-transform: uppercase; overflow-wrap: anywhere; }
.portal-superiores { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin-top: 2px; font-family: var(--fuente-titulos); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.portal-superiores a { color: var(--dorado-cabecera); text-decoration: none; }
.portal-superiores a:hover { color: #fff; text-decoration: underline; }
.portal-separador { color: rgba(255, 255, 255, .5); }
.portal-cabecera .portal-lema { margin-top: 5px; font-size: .64rem; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; color: #cfdcd6; }

.portal-nav { margin-left: auto; }
.portal-nav ul { display: flex; align-items: center; gap: 2px; }
.portal-nav a, .portal-nav .proximamente {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 11px; border-radius: var(--radio-sm);
  color: #e3ece8; font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.portal-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.portal-nav a.activo { color: var(--dorado-cabecera); box-shadow: inset 0 -2px 0 var(--dorado-cabecera); border-radius: 0; }
.portal-nav .proximamente { color: #8fa79e; cursor: default; }

.portal-denuncia {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 9px 14px; border-radius: var(--radio-sm);
  background: rgba(200, 22, 30, .18); border: 1px solid rgba(255, 255, 255, .28);
  color: #fff; font-size: .86rem; font-weight: 700; white-space: nowrap; cursor: default;
}
.portal-denuncia small { font-weight: 500; font-size: .7rem; color: #f3c7c9; }

.portal-menu-movil { display: none; position: relative; margin-left: auto; }
.portal-menu-movil summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 7px 11px; border: 1px solid rgba(255, 255, 255, .45); border-radius: var(--radio-sm);
  color: #fff; font-weight: 600; font-size: .88rem;
}
.portal-menu-movil summary::-webkit-details-marker { display: none; }
.portal-menu-movil summary .icono { width: 1.35em; height: 1.35em; }
.portal-menu-movil nav {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70; min-width: 230px; padding: 8px;
  background: var(--verde-noche); border: 1px solid rgba(255, 255, 255, .15); border-radius: var(--radio); box-shadow: var(--sombra-elevada);
}
.portal-menu-movil nav a, .portal-menu-movil nav .proximamente {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--radio-sm);
  color: #e3ece8; text-decoration: none; font-weight: 600; font-size: .92rem;
}
.portal-menu-movil nav a:hover { background: rgba(255, 255, 255, .08); }
.portal-menu-movil nav a.activo { color: var(--dorado-cabecera); }
.portal-menu-movil nav .proximamente { color: #8fa79e; }
.portal-menu-movil nav .proximamente::after { content: " · próximamente"; font-weight: 400; font-size: .78rem; }

/* ---------------------------------------------------------------- Héroe con foto */
.portal-heroe { position: relative; overflow: hidden; background: var(--verde-noche); color: #fff; min-height: 420px; display: flex; align-items: center; }
.portal-heroe-foto { position: absolute; inset: 0; }
.portal-heroe-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.portal-heroe::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 36, 28, .96) 0%, rgba(1, 36, 28, .84) 32%, rgba(1, 36, 28, .35) 62%, rgba(1, 36, 28, .12) 100%),
    linear-gradient(0deg, rgba(1, 28, 22, .55) 0%, rgba(1, 28, 22, 0) 45%);
}
.portal-heroe-contenido {
  position: relative; z-index: 1; width: 100%; max-width: var(--ancho); margin: 0 auto;
  padding: 48px 24px 96px;
}
.portal-heroe h1 { margin: 0 0 12px; font-family: var(--fuente-titulos); font-weight: 700; font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.portal-heroe-blanco, .portal-heroe-dorado { display: block; }
.portal-heroe-blanco { color: #fff; }
.portal-heroe-dorado { color: var(--dorado-cabecera); }
.portal-heroe-lema { margin: 0 0 14px; font-size: .74rem; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: #dfe9e4; }
.portal-heroe-texto { max-width: 520px; margin: 0 0 22px; font-size: 1.06rem; color: #eef4f1; }
.portal-heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.portal-boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: var(--radio-sm);
  font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.portal-boton-dorado { background: var(--dorado-boton); color: #1d1600; border: 1px solid var(--dorado-boton); }
.portal-boton-dorado:hover { background: #f6c84a; color: #1d1600; }
.portal-boton-borde { border: 1px solid rgba(255, 255, 255, .7); color: #fff; background: rgba(1, 36, 28, .35); }
.portal-boton-borde:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.portal-heroe-eslogan {
  position: absolute; z-index: 1; top: 26px; right: max(34px, calc((100% - var(--ancho)) / 2 + 34px)); max-width: 260px;
  margin: 0; text-align: right;
  font-family: var(--fuente-lema); font-size: 1.8rem; line-height: 1.05; color: #fff;
  transform: rotate(-7deg); text-shadow: 0 2px 6px rgba(0, 0, 0, .55);
}
.portal-heroe-eslogan::after {
  content: ""; position: absolute; right: -4px; bottom: -9px; width: 88%; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(227, 27, 35, 0) 0%, var(--rojo-eslogan) 30%, var(--rojo-eslogan) 100%);
  transform: skewX(-24deg);
}

/* ---------------------------------------------------------------- Cuerpo */
.portal-cuerpo { position: relative; z-index: 2; max-width: var(--ancho); margin: 0 auto; padding: 0 24px 40px; }

/* Franja de cifras: se monta sobre el borde inferior del héroe. */
.portal-cifras { margin: -64px 0 20px; }
.portal-cifras ul {
  --columnas: 4;
  display: grid; grid-template-columns: repeat(var(--columnas), minmax(0, 1fr));
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra-elevada);
  overflow: hidden;
}
.portal-cifras.columnas-1 ul { --columnas: 1; }
.portal-cifras.columnas-2 ul { --columnas: 2; }
.portal-cifras.columnas-3 ul { --columnas: 3; }
.portal-cifras.columnas-5 ul { --columnas: 5; }
.portal-cifras.columnas-6 ul { --columnas: 6; }
/* Separadores: una línea a la izquierda y otra arriba; el borde exterior lo pone la lista (overflow: hidden recorta los sobrantes). */
.portal-cifras li {
  display: flex; align-items: center; gap: 12px; padding: 16px 16px; min-width: 0;
  box-shadow: -1px 0 0 var(--separador), 0 -1px 0 var(--separador);
}
.portal-cifra-icono {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tono-fondo); color: var(--tono-icono);
}
.portal-cifra-icono .icono { width: 24px; height: 24px; }
.icono-verde { --tono-fondo: #e3f4ea; --tono-icono: #1f8a4f; }
.icono-azul { --tono-fondo: #e3eefd; --tono-icono: #1d63c9; }
.icono-dorado { --tono-fondo: #fbf1d6; --tono-icono: #9c7408; }
.icono-rojo { --tono-fondo: #fde4e4; --tono-icono: #c92a25; }
.portal-cifra-datos { display: flex; flex-direction: column; min-width: 0; }
.portal-cifra-valor { display: flex; align-items: center; gap: 6px; font-family: var(--fuente-titulos); font-size: 1.6rem; font-weight: 700; line-height: 1.05; color: var(--titulo); font-variant-numeric: tabular-nums; }
.portal-cifra-etiqueta { font-size: .8rem; font-weight: 600; line-height: 1.25; color: #26303b; }
.portal-cifra-detalle { font-size: .76rem; color: var(--texto-suave); }
/* La variación no se pinta de verde o rojo: que suba no siempre es bueno (p. ej. denuncias). */
.portal-cifra-variacion { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.portal-cifra-variacion .icono { width: .9em; height: .9em; }

.portal-aviso-prueba { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 10px 14px; background: var(--pnp-dorado-100); border-left: 3px solid var(--pnp-dorado-700); border-radius: var(--radio-sm); color: #3b2c00; font-size: .9rem; }
.portal-aviso-prueba .icono { color: var(--pnp-dorado-700); }

/* Rejilla de tarjetas: mapa | unidades | noticias (o nosotros | servicios | mapa en la comisaría). */
.portal-rejilla { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; margin-bottom: 18px; }
.portal-tarjeta {
  min-width: 0; padding: 16px 18px 18px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
}
.portal-tarjeta-cabecera { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.portal-tarjeta-cabecera h2 {
  display: flex; align-items: center; gap: 9px; margin: 0; min-width: 0;
  font-family: var(--fuente-titulos); font-size: 1.08rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--titulo);
}
.portal-tarjeta-cabecera h2 .icono { width: 1.25em; height: 1.25em; color: var(--pnp-verde-700); }
.portal-tarjeta-cabecera .chip-demo, .portal-pildora { margin-left: auto; }
.portal-pildora {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; white-space: nowrap;
  border: 1px solid #cfd7dd; border-radius: 999px; color: var(--titulo); font-size: .76rem; text-decoration: none;
}
.portal-pildora:hover { border-color: var(--pnp-verde-700); color: var(--pnp-verde-800); background: var(--pnp-verde-100); }
.portal-pendiente { display: flex; gap: 8px; margin: 0 0 10px; padding: 10px 12px; background: var(--fondo); border-radius: var(--radio-sm); color: var(--texto-suave); font-size: .86rem; }
.portal-pendiente .icono { margin-top: 3px; }
.portal-nota { margin: 12px 0 0; font-size: .84rem; color: var(--texto-suave); }

/* Colores de la leyenda y de la lista de unidades (12 tonos que se repiten; siempre junto al nombre). */
.portal-color-1 { --color-unidad: #0b5d3b; }
.portal-color-2 { --color-unidad: #1d63c9; }
.portal-color-3 { --color-unidad: #9c7408; }
.portal-color-4 { --color-unidad: #c92a25; }
.portal-color-5 { --color-unidad: #6849cf; }
.portal-color-6 { --color-unidad: #0e7c86; }
.portal-color-7 { --color-unidad: #c2571a; }
.portal-color-8 { --color-unidad: #3b7d2e; }
.portal-color-9 { --color-unidad: #a8327a; }
.portal-color-10 { --color-unidad: #4a5568; }
.portal-color-11 { --color-unidad: #2b6cb0; }
.portal-color-12 { --color-unidad: #8b5e34; }

/* Mapa (pendiente de la cartografía oficial) */
.portal-mapa-lienzo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 230px; padding: 20px; text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(11, 93, 59, .05) 0 12px, rgba(11, 93, 59, 0) 12px 24px),
    #eef4f1;
  border: 1px dashed #b9d3c4; border-radius: var(--radio-sm);
  color: var(--texto-suave); font-size: .86rem;
}
.portal-mapa-lienzo strong { color: var(--pnp-verde-900); font-size: .95rem; }
.portal-mapa-icono { width: 44px; height: 44px; color: var(--pnp-verde-700); opacity: .8; }
.portal-leyenda { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin-top: 12px; font-size: .8rem; color: var(--texto); }
.portal-leyenda li { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.portal-punto { flex-shrink: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--color-unidad); }

/* Lista de divisiones o comisarías */
.portal-lista-unidades { display: grid; gap: 8px; }
.portal-lista-unidades.en-columnas { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.portal-lista-unidades a {
  display: flex; align-items: center; gap: 11px; min-height: 52px; padding: 8px 10px;
  border: 1px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie);
  color: var(--titulo); text-decoration: none;
}
.portal-lista-unidades a:hover { border-color: var(--pnp-verde-700); background: var(--pnp-verde-100); }
.portal-unidad-icono {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-unidad); color: #fff;
}
.portal-unidad-icono .icono { width: 19px; height: 19px; }
.portal-unidad-nombre { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.portal-unidad-nombre .chip-prueba { margin-left: 6px; }
.portal-unidad-total { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: .76rem; color: var(--texto-suave); white-space: nowrap; }
.portal-flecha { color: #98a3ad; }

/* Noticias (DEMO mientras no exista el módulo de prensa) */
.portal-lista-noticias { display: grid; gap: 12px; }
.portal-lista-noticias li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: start; }
.portal-noticia-imagen {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: var(--radio-sm);
  background: linear-gradient(135deg, var(--noticia-fuerte) 0%, var(--noticia-suave) 100%); color: #fff;
}
.portal-noticia-imagen .icono { width: 30px; height: 30px; opacity: .92; }
.noticia-operativo { --noticia-fuerte: #0b5d3b; --noticia-suave: #2f8f63; --noticia-fondo: #e3f4ea; --noticia-texto: #0b5d3b; }
.noticia-comunidad { --noticia-fuerte: #1d4fa0; --noticia-suave: #3d7bd6; --noticia-fondo: #e3eefd; --noticia-texto: #1d4fa0; }
.noticia-institucional { --noticia-fuerte: #7a5c00; --noticia-suave: #c39516; --noticia-fondo: #fbf1d6; --noticia-texto: #6b5000; }
.noticia-vial { --noticia-fuerte: #a3241f; --noticia-suave: #d9502b; --noticia-fondo: #fde4e4; --noticia-texto: #a3241f; }
.portal-noticia-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.portal-noticia-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .74rem; color: var(--texto-suave); }
.portal-etiqueta-noticia { padding: 0 7px; border-radius: 4px; font-weight: 700; font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; background: var(--noticia-fondo); color: var(--noticia-texto); }
.portal-noticia-texto strong { font-size: .9rem; line-height: 1.25; color: var(--titulo); }
.portal-noticia-resumen { font-size: .8rem; line-height: 1.35; color: var(--texto-suave); }
.portal-lista-noticias li.destacada { grid-template-columns: 1fr; }
.portal-lista-noticias li.destacada .portal-noticia-imagen { aspect-ratio: 16 / 7; }
.portal-lista-noticias li.destacada .portal-noticia-imagen .icono { width: 46px; height: 46px; }
.portal-lista-noticias li.destacada strong { font-size: 1rem; }
.portal-noticias.en-fila { margin-bottom: 18px; }
.portal-noticias.en-fila .portal-lista-noticias { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.portal-noticias.en-fila .portal-lista-noticias li { grid-template-columns: 1fr; }
.portal-noticias.en-fila .portal-noticia-imagen { aspect-ratio: 2 / 1; }

/* Accesos rápidos + línea de emergencia */
.portal-accesos { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: stretch; }
/* Escritorio: todos los accesos en una sola fila; en pantallas angostas pasan a varias filas. */
.portal-accesos ul { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
.portal-acceso-tarjeta {
  height: 100%; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px; text-align: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  color: var(--titulo); font-size: .84rem; font-weight: 700; line-height: 1.2; text-decoration: none;
}
.portal-acceso-tarjeta .icono { width: 28px; height: 28px; color: var(--pnp-verde-700); }
a.portal-acceso-tarjeta:hover { border-color: var(--pnp-verde-700); background: var(--pnp-verde-100); color: var(--pnp-verde-900); }
.portal-acceso-tarjeta.pendiente { cursor: default; }
.portal-acceso-tarjeta.pendiente .icono { color: #7d8a83; }
.portal-acceso-tarjeta small { font-weight: 500; font-size: .7rem; color: var(--texto-suave); }
.portal-emergencia {
  display: flex; align-items: center; gap: 14px; min-width: 270px; padding: 16px 20px;
  background: linear-gradient(135deg, var(--rojo-emergencia) 0%, #9e0f16 100%); color: #fff;
  border-radius: var(--radio); box-shadow: var(--sombra); text-decoration: none;
}
.portal-emergencia:hover { color: #fff; filter: brightness(1.06); }
.portal-emergencia-icono { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .16); }
.portal-emergencia-icono .icono { width: 24px; height: 24px; }
.portal-emergencia-texto { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.portal-emergencia-numero { margin-left: auto; font-family: var(--fuente-titulos); font-size: 2.6rem; font-weight: 700; line-height: 1; }

/* ---------------------------------------------------------------- Comisaría */
.portal-nosotros-foto { margin: 0 0 12px; }
.portal-nosotros-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radio-sm); }
.portal-nosotros-foto figcaption { margin-top: 4px; font-size: .72rem; color: var(--texto-suave); }
.portal-nosotros p { font-size: .9rem; }
.portal-lista-servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.portal-lista-servicios li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  padding: 9px 10px; border: 1px solid var(--borde); border-radius: var(--radio-sm);
}
.portal-servicio-icono {
  grid-row: span 2; width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-unidad); color: #fff;
}
.portal-servicio-icono .icono { width: 18px; height: 18px; }
.portal-servicio-texto { font-size: .84rem; font-weight: 700; line-height: 1.2; color: var(--titulo); }
.portal-lista-servicios small { font-size: .7rem; color: var(--texto-suave); }
.portal-ubicacion { margin-bottom: 18px; }
.portal-datos-contacto { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0; }
.portal-datos-contacto div { padding: 10px 12px; background: var(--fondo); border-radius: var(--radio-sm); }
.portal-datos-contacto dt { display: flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--texto-suave); }
.portal-datos-contacto dt .icono { color: var(--pnp-verde-700); }
.portal-datos-contacto dd { margin: 3px 0 0; font-weight: 600; color: var(--titulo); }

/* ---------------------------------------------------------------- Pie */
.portal-pie { background: var(--verde-pie); color: #d7e3de; border-top: 3px solid var(--dorado-cabecera); }
.portal-pie-interior {
  max-width: var(--ancho); margin: 0 auto; padding: 26px 24px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center;
}
.portal-pie-marca { display: flex; align-items: center; gap: 12px; }
.portal-pie-marca img { width: 46px; height: auto; }
.portal-pie-marca div { display: flex; flex-direction: column; line-height: 1.25; }
.portal-pie-marca strong { font-family: var(--fuente-titulos); color: #fff; font-size: 1rem; }
.portal-pie-marca span { font-size: .82rem; }
.portal-pie .portal-lema { font-size: .62rem; letter-spacing: .35em; text-transform: uppercase; color: #9fb5ad; }
.portal-pie-datos p { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: .86rem; }
.portal-pie-datos a { color: #fff; font-weight: 700; }
.portal-pie-demo { color: var(--dorado-cabecera); }
.portal-acceso {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--radio-sm);
  color: #fff; font-weight: 600; font-size: .86rem; text-decoration: none;
}
.portal-acceso:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* ---------------------------------------------------------------- Adaptable */
@media (max-width: 1240px) {
  .portal-denuncia small { display: none; }
  .portal-nav a, .portal-nav .proximamente { padding: 8px 8px; font-size: .82rem; }
}
@media (max-width: 1100px) {
  .portal-nav, .portal-denuncia { display: none; }
  .portal-menu-movil { display: block; }
  .portal-cifras.columnas-5 ul, .portal-cifras.columnas-6 ul { --columnas: 3; }
  .portal-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal-rejilla > :last-child { grid-column: 1 / -1; }
  .portal-accesos { grid-template-columns: 1fr; }
  .portal-accesos ul { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
  .portal-emergencia { min-width: 0; }
  .portal-pie-interior { grid-template-columns: 1fr; gap: 14px; }
  .portal-acceso { justify-self: start; }
}
@media (max-width: 768px) {
  .portal-cabecera-interior { padding: 10px 16px; gap: 12px; }
  .portal-marca-escudo img { width: 46px; }
  .portal-unidad { font-size: 1.12rem; }
  .portal-cabecera .portal-lema { display: none; }
  .portal-heroe { min-height: 0; }
  .portal-heroe-contenido { padding: 34px 16px 84px; }
  .portal-heroe-eslogan { display: none; }
  .portal-heroe::after { background: linear-gradient(90deg, rgba(1, 36, 28, .95) 0%, rgba(1, 36, 28, .78) 100%); }
  .portal-cuerpo { padding: 0 16px 28px; }
  .portal-cifras { margin-top: -56px; }
  .portal-cifras[class*="columnas-"] ul { --columnas: 2; }
  .portal-cifras.columnas-1 ul { --columnas: 1; }
  .portal-cifras li { padding: 12px; }
  .portal-cifra-icono { width: 40px; height: 40px; }
  .portal-cifra-icono .icono { width: 20px; height: 20px; }
  .portal-cifra-valor { font-size: 1.35rem; }
  .portal-rejilla { grid-template-columns: 1fr; }
  .portal-lista-servicios { grid-template-columns: 1fr; }
  .portal-pie-interior { padding: 22px 16px; }
}
@media (max-width: 420px) {
  .franja-desarrollo { font-size: .74rem; padding: 4px 10px; }
  body.con-franja { --alto-franja: 50px; }
  .portal-institucion { font-size: .78rem; }
  .portal-unidad { font-size: 1rem; }
  .portal-superiores { font-size: .7rem; letter-spacing: .06em; }
  .portal-menu-movil summary span { display: none; }
  .portal-boton { white-space: normal; }
  .portal-emergencia { padding: 14px 16px; gap: 10px; }
  .portal-emergencia-numero { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .franja-desarrollo, .portal-nav, .portal-menu-movil, .portal-denuncia, .portal-heroe-acciones, .portal-accesos { display: none; }
  body.con-franja { padding-top: 0; }
  .portal-heroe { min-height: 0; }
  .portal-cifras { margin-top: 12px; }
}
@media (forced-colors: active) {
  .portal-punto, .portal-unidad-icono, .portal-servicio-icono { forced-color-adjust: none; }
  .chip-demo, .chip-prueba { border: 1px solid CanvasText; }
}