/* Secciones de la portada: hero, indicadores, mapa, alerta temprana, informes, investigación y Centro de Información. */

/* ---------- Hero ---------- */
.hero {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(90% 120% at 82% 100%, var(--azul) 0%, var(--azul) 45%, var(--azul-700) 100%);
    color: var(--fondo);
    overflow: hidden;
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--fondo) 16%, transparent) 1px, transparent 1.4px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
    mask-image: linear-gradient(100deg, transparent 30%, #000 75%);
}
.hero__rejilla {
    display: grid;
    grid-template-columns: 65fr 35fr;
    align-items: center;
    gap: var(--sp-6);
    padding-block: var(--sp-8);
}
.hero__texto { align-self: center; }
.hero__titulo {
    max-width: 14em;
    font-family: var(--font-principal);
    font-size: var(--fs-hero);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-caps);
    line-height: 1.1;
    text-transform: uppercase;
    text-wrap: balance;
}
.hero__entradilla {
    max-width: 34em;
    margin-top: var(--sp-5);
    font-size: var(--fs-sub);
    line-height: 1.6;
}
.hero__botones { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero :focus-visible { outline-color: var(--fondo); box-shadow: 0 0 0 3px var(--azul); }

.hero__grafico { position: relative; justify-self: center; width: 100%; max-width: 400px; }
.hero__mapa {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 24px 48px color-mix(in srgb, var(--azul-700) 70%, transparent));
    fill: color-mix(in srgb, var(--fondo) 9%, var(--azul));
    stroke: color-mix(in srgb, var(--fondo) 45%, var(--azul));
    stroke-width: .9;
    stroke-linejoin: round;
}
.hero__datos {
    position: absolute;
    left: 0;
    top: 20%;
    display: grid;
    gap: var(--sp-3);
}
.dato-hero {
    display: grid;
    min-width: 168px;
    padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-5);
    background: var(--fondo);
    border-radius: var(--r-tarjeta);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--azul-700) 45%, transparent);
    background-image: linear-gradient(var(--morado), var(--morado));
    background-size: 4px 100%;
    background-repeat: no-repeat;
}
.dato-hero__valor {
    color: var(--azul);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-secundaria);
    font-size: var(--fs-num);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}
.dato-hero__etiqueta {
    color: var(--tinta);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}

@media (max-width: 1023px) {
    .hero__rejilla { grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-7); }
    .hero__grafico {
        justify-self: stretch;
        max-width: none;
        display: grid;
        grid-template-columns: 1fr minmax(0, 260px);
        align-items: end;
        gap: var(--sp-4);
    }
    .hero__mapa { grid-column: 2; grid-row: 1; }
    .hero__datos { position: static; grid-column: 1; grid-row: 1; align-self: center; }
}
@media (max-width: 479px) {
    .hero__grafico { grid-template-columns: 1fr minmax(0, 150px); }
    .dato-hero { min-width: 0; }
}

/* ---------- Mapa de municipios ---------- */
.mapa {
    display: grid;
    gap: var(--sp-5);
    align-items: start;
}
@media (min-width: 1024px) { .mapa { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.mapa__lienzo {
    padding: var(--sp-5);
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
}
.mapa__svg {
    width: 100%;
    height: auto;
    max-height: 680px;
    margin-inline: auto;
}
.mapa__municipio path {
    fill: var(--azul-050);
    stroke: var(--azul);
    stroke-width: .6;
    stroke-linejoin: round;
    transition: fill .15s ease;
}
.mapa__municipio:hover path,
.mapa__municipio:focus-visible path { fill: color-mix(in srgb, var(--azul) 22%, var(--fondo)); }
.mapa__municipio[aria-current="true"] path { fill: var(--azul); stroke: var(--fondo); }
.mapa__municipio:focus-visible { outline: 3px solid var(--azul); outline-offset: 0; box-shadow: none; }
.mapa__municipio:focus-visible path { stroke: var(--tinta); stroke-width: 2; }
.mapa__fuente { margin-top: var(--sp-3); color: var(--gris-texto); font-size: var(--fs-body); }

.mapa__panel {
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-6);
    background: var(--fondo-alt);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
}
@media (min-width: 1024px) { .mapa__panel { position: sticky; top: calc(var(--alto-encabezado) + var(--sp-5)); } }
.mapa__panel .etiqueta { margin-bottom: 0; }
.mapa__panel .chip { justify-self: start; }
.mapa__nombre {
    color: var(--azul);
    font-family: var(--font-principal);
    font-size: var(--fs-num);
    font-weight: var(--fw-bold);
    line-height: 1.15;
}
.mapa__clave { color: var(--gris-texto); font-size: var(--fs-body); }
.mapa__datos { margin-top: var(--sp-2); }
.mapa__fila {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    min-height: 48px;
    border-bottom: 1px solid var(--linea);
}
.mapa__fila:last-child { border-bottom: 0; }
.mapa__fila dt { font-size: var(--fs-body); }
.mapa__fila dd {
    color: var(--gris-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}

.mapa__lista { margin-top: var(--sp-5); }
.mapa__lista-boton {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 48px;
    padding: 0 var(--sp-5);
    border: 1px solid var(--azul);
    border-radius: var(--r-chip);
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.mapa__lista-boton::after { content: "+"; font-size: var(--fs-title); line-height: 1; }
.mapa__lista[open] .mapa__lista-boton::after { content: "−"; }
.mapa__lista-boton:hover { background: var(--azul-050); }
.mapa__lista-items {
    margin-top: var(--sp-4);
    padding: var(--sp-5);
    columns: 2;
    column-gap: var(--sp-5);
    background: var(--fondo-alt);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
}
@media (min-width: 768px) { .mapa__lista-items { columns: 3; } }
@media (min-width: 1024px) { .mapa__lista-items { columns: 4; } }
.mapa__lista-items li { break-inside: avoid; }
.mapa__lista-items a {
    display: flex;
    align-items: center;
    min-height: var(--tactil);
    color: var(--tinta);
    text-decoration: none;
}
.mapa__lista-items a:hover { color: var(--azul); text-decoration: underline; }
.mapa__lista-items a[aria-current="true"] { color: var(--azul); font-family: var(--font-secundaria); font-weight: var(--fw-semi); }

/* ---------- Alerta temprana ---------- */
.nivel { border-top-width: 4px; }
.nivel__insignia {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    align-self: flex-start;
    min-height: 32px;
    padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2);
    border: 1px solid;
    border-radius: var(--r-chip);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.nivel__forma { width: 18px; height: 18px; stroke-width: 0; }
.nivel--sin-alerta  { border-top-color: var(--n1-texto); }
.nivel--vigilancia  { border-top-color: var(--n2-texto); }
.nivel--alerta      { border-top-color: var(--n3-texto); }
.nivel--prioritaria { border-top-color: var(--n4-texto); }
.nivel--sin-alerta  .nivel__insignia { color: var(--n1-texto); background: var(--n1-fondo); border-color: var(--n1-borde); }
.nivel--vigilancia  .nivel__insignia { color: var(--n2-texto); background: var(--n2-fondo); border-color: var(--n2-borde); }
.nivel--alerta      .nivel__insignia { color: var(--n3-texto); background: var(--n3-fondo); border-color: var(--n3-borde); }
.nivel--prioritaria .nivel__insignia { color: var(--n4-texto); background: var(--n4-fondo); border-color: var(--n4-borde); }
.nivel--sin-alerta  .tarjeta__titulo { color: var(--n1-texto); }
.nivel--vigilancia  .tarjeta__titulo { color: var(--n2-texto); }
.nivel--alerta      .tarjeta__titulo { color: var(--n3-texto); }
.nivel--prioritaria .tarjeta__titulo { color: var(--n4-texto); }

.alerta__pie {
    display: grid;
    gap: var(--sp-6);
    align-items: end;
    margin-top: var(--sp-7);
}
@media (min-width: 1024px) { .alerta__pie { grid-template-columns: 2fr 1fr; } }
.lista-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.lista-chips .chip { min-height: 36px; }
.alerta__cierre { display: grid; gap: var(--sp-2); justify-items: start; }
@media (min-width: 1024px) { .alerta__cierre { justify-items: end; text-align: right; } }

/* ---------- Informes ---------- */
.tarjeta--informe .etiqueta { margin-bottom: 0; }
.desplegable summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tactil);
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.desplegable summary::after { content: "+"; font-size: var(--fs-title); line-height: 1; }
.desplegable[open] summary::after { content: "−"; }
.desplegable summary:hover { text-decoration: underline; }
.desplegable .tarjeta__texto + .tarjeta__texto,
.desplegable summary + .tarjeta__texto { margin-top: var(--sp-3); }

.informe__descargas {
    margin-top: auto;
    padding-top: var(--sp-5);
    border-top: 1px solid var(--linea);
}
.anios {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
@media (max-width: 479px) { .anios { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.anio {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--sp-1);
    height: 100%;
    min-height: 112px;
    padding: var(--sp-3) var(--sp-2);
    border: 1px solid var(--linea);
    border-radius: var(--r-tarjeta);
    background: var(--fondo-alt);
    color: var(--gris-texto);
    text-align: center;
    text-decoration: none;
}
.anio .ico { width: 20px; height: 20px; }
.anio__numero {
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
    font-family: var(--font-secundaria);
    font-size: var(--fs-num);
    font-weight: var(--fw-bold);
    line-height: 1.1;
}
.anio__estado {
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
a.anio { background: var(--fondo); border-color: var(--azul); color: var(--azul); }
a.anio .anio__numero { color: var(--azul); }
a.anio:hover { background: var(--azul); color: var(--fondo); }
a.anio:hover .anio__numero { color: var(--fondo); }

/* ---------- Investigación ---------- */
.tarjeta--investigacion .chip { margin-top: auto; }

/* ---------- Centro de Información ---------- */
.centro { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 1024px) { .centro { grid-template-columns: 1fr 1fr; gap: var(--sp-7); } }
.centro__etiqueta {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.centro__fila { display: flex; gap: var(--sp-3); }
@media (max-width: 479px) { .centro__fila { flex-direction: column; } }
.centro__estado { margin-top: var(--sp-4); }
.centro__estado .chip { margin-right: var(--sp-2); vertical-align: middle; }

/* ---------- 404 ---------- */
.seccion--404 .boton { margin-top: var(--sp-6); }

/* ---------- Escala de riesgo de la alerta temprana ---------- */
.escala { margin-bottom: var(--sp-4); }
.escala__barra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.escala__barra span { height: 6px; border-radius: 3px; }
.escala__barra span:nth-child(1) { background: var(--n1-texto); }
.escala__barra span:nth-child(2) { background: var(--n2-texto); }
.escala__barra span:nth-child(3) { background: var(--n3-texto); }
.escala__barra span:nth-child(4) { background: var(--n4-texto); }
.escala__extremos {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-2);
    color: var(--gris-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
@media (max-width: 1023px) {
    .escala__barra { gap: var(--sp-2); }
}

/* ---------- Leyenda del mapa ---------- */
.mapa__leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--linea);
    color: var(--gris-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.mapa__leyenda li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.muestra { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--azul); }
.muestra--base { background: var(--azul-050); }
.muestra--elegido { background: var(--azul); }
.muestra--pendiente { background: var(--morado-050); border-color: var(--morado); }
.mapa__lienzo .mapa__fuente { margin-top: var(--sp-2); }

/* ---------- Accesos: barra pegada al hero ---------- */
.accesos { background: var(--azul-700); color: var(--fondo); }
.accesos__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.accesos__lista > li { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fondo) 16%, transparent); }
.accesos__lista > li:last-child { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fondo) 16%, transparent), inset -1px 0 0 color-mix(in srgb, var(--fondo) 16%, transparent); }
.acceso {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    height: 100%;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    color: var(--fondo);
    text-decoration: none;
    transition: background-color .25s ease;
}
.acceso::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: var(--morado);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.acceso__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }
.acceso__icono {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fondo) 12%, transparent);
    transition: background-color .25s ease, color .25s ease;
}
.acceso__num {
    color: var(--pie-texto);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    font-variant-numeric: tabular-nums;
}
.acceso__titulo {
    font-family: var(--font-principal);
    font-size: var(--fs-title);
    font-weight: var(--fw-bold);
    line-height: 1.2;
}
.acceso__texto { color: var(--pie-texto); }
.acceso__mas {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: auto;
    padding-top: var(--sp-2);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
}
.acceso__mas .ico { width: 20px; height: 20px; transition: transform .25s ease; }
.acceso:hover, .acceso:focus-visible { background: var(--azul); }
.acceso:hover::before, .acceso:focus-visible::before { transform: scaleX(1); }
.acceso:hover .acceso__icono, .acceso:focus-visible .acceso__icono { background: var(--fondo); color: var(--azul); }
.acceso:hover .acceso__mas .ico { transform: translateX(6px); }
.acceso:focus-visible { outline: 3px solid var(--fondo); outline-offset: -6px; box-shadow: none; }
@media (max-width: 1023px) {
    .accesos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .accesos__lista > li,
    .accesos__lista > li:last-child { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fondo) 16%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fondo) 16%, transparent); }
    .accesos__lista > li:nth-child(2n) { box-shadow: inset 1px 0 0 color-mix(in srgb, var(--fondo) 16%, transparent), inset -1px 0 0 color-mix(in srgb, var(--fondo) 16%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--fondo) 16%, transparent); }
}
@media (max-width: 639px) {
    .accesos__lista { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .accesos__lista > li,
    .accesos__lista > li:nth-child(2n),
    .accesos__lista > li:last-child { box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--fondo) 16%, transparent); }
    .acceso { padding-inline: 0; }
}

/* ---------- Indicadores: tablero ---------- */
.tablero {
    background: var(--fondo);
    border: 1px solid var(--linea);
    border-radius: var(--r-modulo);
    box-shadow: var(--sombra);
    overflow: hidden;
}
.tablero__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    padding: var(--sp-4) var(--sp-5);
    background: var(--azul-050);
    border-bottom: 1px solid var(--linea);
}
.tablero__titulo {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-label);
    font-weight: var(--fw-semi);
}
.tablero__titulo .ico { width: 20px; height: 20px; }
.tablero__fuentes { margin-right: auto; color: var(--gris-texto); font-size: var(--fs-label); }
.tablero__celdas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1px;
    background: var(--linea);
}
.indicador {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-6) var(--sp-5);
    background: var(--fondo);
    transition: background-color .2s ease;
}
.indicador:hover { background: var(--fondo-alt); }
.indicador__icono { color: var(--azul); margin-bottom: var(--sp-2); }
.indicador__etiqueta {
    min-height: calc(2 * 1.4em);
    color: var(--tinta);
    font-size: var(--fs-body);
    line-height: 1.4;
}
.indicador__valor {
    margin-top: auto;
    color: var(--azul);
    font-family: var(--font-secundaria);
    font-size: var(--fs-num);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
@media (max-width: 1023px) { .tablero__celdas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .indicador { padding: var(--sp-4); } }

.encabezado { transition: box-shadow .2s ease; }
.encabezado.con-sombra { box-shadow: 0 6px 20px color-mix(in srgb, var(--azul-700) 12%, transparent); }