:root {
    --fondo: #f4f7f9;
    --superficie: #ffffff;
    --superficie-suave: #f8fafc;
    --superficie-acento: #edf5f7;
    --texto: #17202a;
    --texto-suave: #5f6f7b;
    --texto-fuerte: #0e1d28;
    --borde: #dfe6eb;
    --borde-fuerte: #c7d2db;
    --verde: #198754;
    --verde-suave: #eafaf1;
    --morado: #7c3aed;
    --morado-suave: #f3ebff;
    --azul: #123f4a;
    --azul-2: #24657a;
    --azul-suave: #edf6f8;
    --ambar: #d97706;
    --rojo: #dc2626;
    --shadow-xs: 0 2px 8px rgba(15, 23, 42, .04);
    --shadow-sm: 0 8px 20px rgba(15, 23, 42, .06);
    --shadow-md: 0 14px 32px rgba(15, 23, 42, .08);
    --radio-xs: 8px;
    --radio-sm: 10px;
    --radio-md: 14px;
    --radio-lg: 18px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

button,
select {
    font: inherit;
}

button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
a:focus-visible {
    outline: 3px solid rgba(18, 63, 74, .3);
    outline-offset: 3px;
}

.md-pagina {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    padding: 40px 0 64px;
}

.md-cabecera {
    max-width: 840px;
    margin-bottom: 28px;
}

.md-ceja {
    margin: 0 0 8px;
    color: var(--azul-2);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.md-cabecera h1,
.md-seccion h2 {
    margin: 0;
    color: var(--texto-fuerte);
    letter-spacing: -.03em;
}

.md-cabecera h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
}

.md-introduccion {
    max-width: 720px;
    margin: 16px 0 10px;
    color: var(--texto-suave);
    font-size: 1.06rem;
    line-height: 1.6;
}

.md-fuente,
.md-referencia,
.md-ayuda-mapa {
    margin: 0;
    color: var(--texto-suave);
    font-size: .86rem;
    line-height: 1.45;
}

.md-periodo {
    display: block;
    margin-top: 3px;
}

.md-estado {
    display: none;
    margin: 0 0 20px;
    padding: 13px 16px;
    border: 1px solid #bfd8df;
    border-radius: var(--radio-sm);
    background: var(--azul-suave);
    color: var(--azul);
    font-size: .92rem;
    font-weight: 650;
}

.md-estado:not(:empty) {
    display: block;
}

.md-estado.is-error,
.md-estado[data-estado="error"] {
    border-color: #f1c2c2;
    background: #fff2f2;
    color: #a82626;
}

.md-seccion {
    margin-top: 24px;
    padding: clamp(18px, 3vw, 28px);
    border: 1px solid var(--borde);
    border-radius: var(--radio-lg);
    background: var(--superficie);
    box-shadow: var(--shadow-xs);
}

.md-seccion-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.md-seccion h2 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.2;
}

.md-seccion-cabecera .md-referencia {
    max-width: 380px;
    text-align: right;
}

.md-referencia {
    color: var(--texto-suave);
    font-size: .78rem;
}

.md-filtros {
    border-color: #ccdde2;
    background: linear-gradient(135deg, #fff 0%, var(--superficie-acento) 100%);
}

.md-formulario {
    display: grid;
    grid-template-columns: repeat(7, minmax(130px, 1fr));
    align-items: end;
    gap: 14px;
}

.md-control label {
    display: block;
    margin-bottom: 6px;
    color: var(--texto-suave);
    font-size: .78rem;
    font-weight: 750;
}

.md-control select {
    width: 100%;
    min-height: 42px;
    padding: 0 34px 0 11px;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    background-color: var(--superficie);
    color: var(--texto);
}

.md-control select:disabled {
    cursor: not-allowed;
    background: #eef2f4;
    color: #839198;
}

.md-acciones button {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid var(--azul);
    border-radius: var(--radio-sm);
    background: var(--azul);
    color: #fff;
    font-weight: 750;
    cursor: pointer;
}

.md-acciones button:hover {
    background: var(--azul-2);
}

.md-aviso-red {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-left: 4px solid var(--ambar);
    border-radius: 0 var(--radio-xs) var(--radio-xs) 0;
    background: #fff8eb;
    color: #74470d;
    font-size: .85rem;
    line-height: 1.45;
}

.md-kpis-grid,
.md-destacados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.md-kpi,
.md-destacado,
.md-ranking,
.md-red-card {
    min-width: 0;
    padding: 17px;
    border: 1px solid var(--borde);
    border-radius: var(--radio-md);
    background: var(--superficie);
}

.md-kpi {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.md-kpi::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--azul-2);
    content: "";
}

.md-kpi-etiqueta,
.md-destacado-tipo {
    display: block;
    margin-bottom: 8px;
    color: var(--texto-suave);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.md-kpi-valor,
.md-destacado-valor {
    display: block;
    color: var(--texto-fuerte);
    font-size: clamp(1.55rem, 3vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.md-kpi-nombre,
.md-destacado h3 {
    margin: 9px 0 0;
    color: var(--texto);
    font-size: .95rem;
    line-height: 1.35;
}

.md-kpi-meta {
    margin: 10px 0 0;
    color: var(--texto-suave);
    font-size: .76rem;
    line-height: 1.4;
}

.md-kpi-cobertura {
    display: inline-block;
    margin-top: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--superficie-acento);
    color: var(--azul);
    font-size: .72rem;
    font-weight: 700;
}

.md-seccion-mapa {
    overflow: hidden;
}

#md-mapa {
    width: 100%;
    height: clamp(340px, 54vw, 620px);
    overflow: hidden;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-md);
    background: #e8f0f1;
}

#md-mapa .leaflet-control-attribution {
    font-size: 10px;
}

#md-mapa .leaflet-popup-content-wrapper {
    border-radius: var(--radio-sm);
    box-shadow: var(--shadow-md);
}

.md-leaflet-tooltip,
.leaflet-tooltip.md-leaflet-tooltip {
    padding: 7px 9px;
    border: 1px solid var(--borde-fuerte);
    border-radius: 6px;
    background: var(--texto-fuerte);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.md-territorio-contenido,
.md-redes-contenido,
.md-rankings-contenido,
.md-grafico-contenedor {
    min-height: 90px;
}

.md-tabla-contenedor {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
}

.md-tabla-contenedor table,
.md-territorio-contenido table,
.md-rankings-contenido table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    font-size: .87rem;
}

.md-tabla-contenedor th,
.md-tabla-contenedor td,
.md-territorio-contenido th,
.md-territorio-contenido td,
.md-rankings-contenido th,
.md-rankings-contenido td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--borde);
    text-align: left;
    vertical-align: middle;
}

.md-tabla-contenedor th,
.md-territorio-contenido th,
.md-rankings-contenido th {
    background: var(--superficie-suave);
    color: var(--texto-suave);
    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.md-tabla-contenedor tbody tr:last-child td,
.md-territorio-contenido tbody tr:last-child td,
.md-rankings-contenido tbody tr:last-child td {
    border-bottom: 0;
}

.md-tabla-contenedor tbody tr {
    transition: background-color .15s ease;
}

.md-tabla-contenedor tbody tr:hover {
    background: var(--azul-suave);
}

.md-tabla-contenedor button,
.md-centro-enlace {
    border: 0;
    background: transparent;
    color: var(--azul);
    font: inherit;
    font-weight: 750;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.md-total {
    margin: 0;
    color: var(--azul);
    font-size: .9rem;
    font-weight: 750;
    white-space: nowrap;
}

.md-ficha-vacia {
    padding: 26px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-sm);
    background: var(--superficie-suave);
    color: var(--texto-suave);
    text-align: center;
}

.md-ficha-cabecera {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 17px;
    border-bottom: 1px solid var(--borde);
}

.md-ficha-cabecera h3 {
    margin: 0;
    color: var(--texto-fuerte);
    font-size: 1.2rem;
}

.md-ficha-cabecera p {
    margin: 5px 0 0;
    color: var(--texto-suave);
}

.md-ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px;
    margin: 18px 0 0;
}

.md-ficha-datos div {
    padding: 12px;
    border-radius: var(--radio-sm);
    background: var(--superficie-suave);
}

.md-ficha-datos dt {
    margin-bottom: 4px;
    color: var(--texto-suave);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.md-ficha-datos dd {
    margin: 0;
    color: var(--texto-fuerte);
    font-weight: 700;
}

.md-grafico-contenedor svg {
    display: block;
    width: 100%;
    min-width: 520px;
    height: auto;
    overflow: visible;
}

.md-grafico-contenedor {
    overflow-x: auto;
    padding: 8px 0 2px;
}

.md-grafico-eje,
.md-grafico-rejilla {
    stroke: var(--borde);
    stroke-width: 1;
}

.md-grafico-linea {
    fill: none;
    stroke: var(--azul-2);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.md-grafico-area {
    fill: rgba(36, 101, 122, .13);
}

.md-grafico-texto {
    fill: var(--texto-suave);
    font-size: 12px;
}

.md-redes-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
    gap: 14px;
}

.md-red-card h3,
.md-ranking h3 {
    margin: 0;
    color: var(--texto-fuerte);
    font-size: 1rem;
}

.md-red-card p,
.md-ranking p,
.md-destacado p {
    margin: 8px 0 0;
    color: var(--texto-suave);
    font-size: .85rem;
    line-height: 1.5;
}

.md-barra {
    height: 8px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--borde);
}

.md-barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--azul-2);
}

.md-rankings-contenido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.md-ranking {
    overflow: hidden;
}

.md-ranking ol {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: ranking;
}

.md-ranking li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--borde);
}

.md-ranking li::before {
    color: var(--azul-2);
    content: counter(ranking);
    counter-increment: ranking;
    font-size: .82rem;
    font-weight: 800;
}

.md-ranking-nombre {
    overflow: hidden;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-ranking-valor {
    color: var(--texto-fuerte);
    font-size: .84rem;
    font-weight: 800;
}

.md-destacado {
    background: linear-gradient(145deg, var(--superficie) 0%, var(--superficie-acento) 100%);
}

.md-destacado h3 {
    min-height: 2.5em;
}

.md-sin-dato {
    color: var(--texto-suave) !important;
    font-style: italic;
    font-weight: 600 !important;
}

.md-sin-dato::after {
    content: "Sin datos";
}

.md-vacio {
    padding: 22px;
    border: 1px dashed var(--borde-fuerte);
    border-radius: var(--radio-sm);
    background: var(--superficie-suave);
    color: var(--texto-suave);
    font-size: .9rem;
    text-align: center;
}

@media (max-width: 1180px) {
    .md-formulario {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }
}

@media (max-width: 800px) {
    .md-pagina {
        width: min(100% - 32px, 1440px);
        padding-top: 28px;
    }

    .md-seccion {
        padding: 20px;
    }

    .md-seccion-cabecera {
        display: block;
    }

    .md-seccion-cabecera .md-referencia {
        max-width: none;
        margin-top: 9px;
        text-align: left;
    }

    .md-formulario {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md-acciones {
        grid-column: span 2;
    }

    #md-mapa {
        height: 430px;
    }
}

@media (max-width: 520px) {
    .md-pagina {
        width: min(100% - 24px, 1440px);
        padding-bottom: 40px;
    }

    .md-cabecera h1 {
        font-size: 2rem;
    }

    .md-seccion {
        margin-top: 16px;
        padding: 16px;
        border-radius: var(--radio-md);
    }

    .md-formulario {
        grid-template-columns: 1fr;
    }

    .md-acciones {
        grid-column: auto;
    }

    .md-kpis-grid,
    .md-destacados-grid,
    .md-redes-contenido,
    .md-rankings-contenido {
        grid-template-columns: 1fr;
    }

    #md-mapa {
        height: 330px;
        border-radius: var(--radio-sm);
    }

    .md-total {
        margin-top: 10px;
        white-space: normal;
    }

    .md-ficha-cabecera {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ======================================================================
   FASE 6.1 — Carrusel de datos destacados, tarjeta promocional,
   distribucion territorial limpia y paginacion compacta.
   Reglas anadidas al final: por cascada sobrescriben las anteriores.
   ====================================================================== */
.md-pagina {
  margin-top: 0;
  padding-top: 1.5rem;
}

.md-seccion-titulo,
.md-seccion h2,
.md-seccion h3 {
  scroll-margin-top: 100px;
}

.md-carrusel {
  display: grid;
  gap: 1.25rem;
  width: 100%;
}

.md-carrusel-escenario {
  min-height: 34rem;
  width: 100%;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.md-carrusel-escenario.is-cambiando {
  opacity: 0;
  transform: translateY(0.75rem);
}

.md-carrusel-escenario .md-destacado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 34rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  box-shadow: 0 0.75rem 2rem rgb(17 43 72 / 8%);
}

.md-destacado-titulo {
  max-width: 44rem;
  margin: 0;
  color: var(--texto);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.2;
}

.md-destacado-valor {
  margin: 0.6rem 0 0;
  color: var(--azul);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.95;
}

.md-destacado-unidad {
  margin-top: 0.55rem;
  color: var(--texto);
  font-size: 1rem;
  font-weight: 600;
}

.md-destacado-meta {
  margin: 1rem 0 0;
  color: var(--texto);
  line-height: 1.55;
  opacity: 0.8;
}

.md-destacado-cobertura {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  margin-top: 1rem;
  padding: 0.2rem 0.65rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--azul-2);
  font-size: 0.8rem;
  font-weight: 700;
}

.md-destacado-fuente {
  margin-top: auto;
  padding-top: 1.5rem;
  color: var(--texto);
  font-size: 0.8rem;
  line-height: 1.4;
  opacity: 0.7;
}

.md-destacado-grafico {
  width: 100%;
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
  overflow-x: auto;
  overflow-y: hidden;
}

.md-destacado-grafico svg {
  display: block;
  min-width: 34rem;
  width: 100%;
  height: auto;
}

.md-grafico-eje {
  stroke: var(--borde);
  stroke-width: 1;
}

.md-grafico-rejilla {
  stroke: var(--borde);
  stroke-dasharray: 3 4;
  stroke-width: 1;
  opacity: 0.8;
}

.md-grafico-linea {
  fill: none;
  stroke: var(--azul);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.md-grafico-area {
  fill: var(--azul);
  opacity: 0.12;
}

.md-grafico-texto,
.md-grafico-leyenda {
  fill: var(--texto);
  font-family: inherit;
  font-size: 0.78rem;
}

.md-grafico-barra {
  fill: var(--azul-2);
  rx: 4;
}

.md-destacado-lista {
  display: grid;
  gap: 0.85rem;
  width: 100%;
  margin-top: 1.5rem;
}

.md-destacado-lista-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 1rem;
  align-items: center;
}

.md-destacado-lista-nombre {
  min-width: 0;
  color: var(--texto);
  font-weight: 700;
}

.md-destacado-lista-valor {
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: right;
}

.md-destacado-lista-barra {
  grid-column: 1 / -1;
  height: 0.35rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--borde);
}

.md-destacado-lista-barra > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--azul-2);
}

.md-carrusel-controles {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
  gap: 1rem;
  align-items: center;
}

.md-carrusel-boton,
.md-paginacion-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--azul);
  border-radius: 0.65rem;
  background: var(--superficie);
  color: var(--azul);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
}

.md-carrusel-boton:last-child {
  justify-self: end;
}

.md-carrusel-boton:hover:not(:disabled),
.md-paginacion-boton:hover:not(:disabled) {
  background: var(--azul);
  color: #fff;
}

.md-carrusel-boton:disabled,
.md-paginacion-boton:disabled {
  border-color: var(--borde);
  color: var(--texto);
  cursor: not-allowed;
  opacity: 0.45;
}

.md-carrusel-progreso {
  display: flex;
  justify-content: center;
  min-width: 5rem;
}

.md-carrusel-puntos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}

.md-carrusel-punto {
  width: 0.65rem;
  min-width: 0.65rem;
  height: 0.65rem;
  min-height: 0.65rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--borde);
  cursor: pointer;
}

.md-carrusel-punto.is-activo {
  width: 1.65rem;
  background: var(--azul);
}

.md-promo {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  background: var(--superficie);
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.md-promo:hover {
  border-color: var(--azul-2);
  box-shadow: 0 0.6rem 1.5rem rgb(17 43 72 / 10%);
}

.md-promo-imagen {
  display: block;
  width: min(100%, 14rem);
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: calc(var(--radio-lg) - 0.25rem);
  background: var(--borde);
}

.md-promo-texto {
  min-width: 0;
}

.md-promo-titulo {
  margin: 0;
  color: var(--texto);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.15;
}

.md-promo-subtitulo {
  margin: 0.7rem 0 0;
  color: var(--texto);
  font-size: 1.05rem;
  line-height: 1.5;
}

.md-promo-usuario {
  display: block;
  margin-top: 0.5rem;
  color: var(--azul-2);
  font-weight: 800;
}

.md-promo-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 1.2rem;
  padding: 0.55rem 1rem;
  border-radius: 0.65rem;
  background: var(--azul);
  color: #fff;
  font-weight: 800;
}

.md-promo-nota {
  display: block;
  margin-top: 0.75rem;
  color: var(--texto);
  font-size: 0.8rem;
  opacity: 0.7;
}

.md-territorio-lista {
  display: grid;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.md-territorio-fila {
  display: grid;
  grid-template-columns: minmax(10rem, 1.4fr) minmax(12rem, 1fr) minmax(8rem, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0.5rem;
}

.md-territorio-fila:first-child {
  border-top: 1px solid var(--borde);
}

.md-territorio-fila:hover {
  background: rgb(17 43 72 / 4%);
}

.md-territorio-nombre {
  color: var(--texto);
  font-weight: 800;
  line-height: 1.3;
}

.md-territorio-cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.md-territorio-cifra {
  display: grid;
  gap: 0.1rem;
}

.md-territorio-cifra-valor {
  color: var(--azul);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.md-territorio-cifra-etiqueta {
  color: var(--texto);
  font-size: 0.75rem;
  line-height: 1.2;
  opacity: 0.7;
}

.md-territorio-barra {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--borde);
}

.md-territorio-barra > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--azul-2);
}

.md-territorio-contenido table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  box-shadow: none;
}

.md-territorio-contenido th,
.md-territorio-contenido td {
  padding: 0.8rem 0;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: transparent;
}

.md-paginacion {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
}

.md-paginacion-boton {
  min-width: 2.75rem;
  padding-inline: 0.75rem;
}

.md-paginacion-boton.is-actual {
  border-color: var(--azul);
  background: var(--azul);
  color: #fff;
}

.md-paginacion-estado {
  width: 100%;
  color: var(--texto);
  font-size: 0.85rem;
  text-align: center;
  opacity: 0.75;
}

.md-carrusel-boton:focus-visible,
.md-carrusel-punto:focus-visible,
.md-promo:focus-visible,
.md-territorio-fila:focus-visible,
.md-paginacion-boton:focus-visible {
  outline: 3px solid var(--azul-2);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  .md-carrusel-escenario,
  .md-carrusel-escenario .md-destacado {
    min-height: 31rem;
  }

  .md-territorio-fila {
    grid-template-columns: minmax(9rem, 1fr) minmax(11rem, 1fr);
  }

  .md-territorio-barra {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .md-carrusel-escenario,
  .md-carrusel-escenario .md-destacado {
    min-height: 29rem;
  }

  .md-promo {
    grid-template-columns: 1fr;
  }

  .md-promo-imagen {
    width: min(100%, 12rem);
  }

  .md-territorio-fila {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .md-territorio-barra {
    grid-column: auto;
  }
}

@media (max-width: 520px) {
  .md-carrusel-escenario,
  .md-carrusel-escenario .md-destacado {
    min-height: 27rem;
  }

  .md-carrusel-escenario .md-destacado {
    padding: 1.25rem;
  }

  .md-destacado-grafico svg {
    min-width: 28rem;
  }

  .md-carrusel-controles {
    grid-template-columns: 1fr 1fr;
  }

  .md-carrusel-progreso {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .md-carrusel-boton:last-child {
    justify-self: stretch;
  }

  .md-carrusel-boton {
    width: 100%;
  }

  .md-paginacion {
    justify-content: stretch;
  }

  .md-paginacion-boton {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .md-carrusel-escenario,
  .md-promo,
  .md-carrusel-boton,
  .md-paginacion-boton {
    transition: none;
  }
}

/* ============================================================================
   FASE 6.7.1 — Buscador global predictivo.
   El menú de sugerencias se posiciona en absoluto sobre la sección (sin
   contenedores con overflow que lo recorten) y pasa a flujo normal en móvil.
   ============================================================================ */
.md-buscador {
    position: relative;
    margin: 0 0 18px;
}

.md-buscador > label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--texto-fuerte, #10323c);
}

.md-buscador-campo {
    position: relative;
}

.md-buscador input {
    width: 100%;
    padding: 12px 42px 12px 14px;
    font-size: 1rem;
    color: var(--texto, #1f2d33);
    background: #ffffff;
    border: 1px solid var(--borde, #cfdae0);
    border-radius: var(--radio-sm, 8px);
}

.md-buscador input:focus-visible {
    outline: 3px solid rgba(25, 135, 84, 0.35);
    outline-offset: 1px;
}

.md-buscador-limpiar {
    position: absolute;
    top: 50%;
    right: 6px;
    padding: 4px 8px;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--texto-suave, #5b6b73);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.md-buscador-ayuda {
    margin: 6px 0 0;
    font-size: 0.8rem;
    color: var(--texto-suave, #5b6b73);
}

.md-buscar-sugerencias {
    position: absolute;
    z-index: 1200;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 320px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    list-style: none;
    background: #ffffff;
    border: 1px solid var(--borde, #cfdae0);
    border-radius: var(--radio-sm, 8px);
    box-shadow: 0 14px 30px rgba(16, 42, 50, 0.18);
}

.md-buscar-sugerencias li {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.md-buscar-sugerencias li[aria-selected="true"],
.md-buscar-sugerencias li:hover {
    background: #eef6f8;
}

.md-sugerencia-nombre {
    display: block;
    font-weight: 600;
}

.md-sugerencia-meta {
    font-size: 0.8rem;
    color: var(--texto-suave, #5b6b73);
}

.md-sugerencia-codigo {
    font-variant-numeric: tabular-nums;
}

.md-buscar-estado {
    padding: 10px;
    font-size: 0.85rem;
    color: var(--texto-suave, #5b6b73);
    cursor: default;
}

/* La cabecera fija no debe tapar el título al desplazarse hasta la ficha. */
.md-seccion {
    scroll-margin-top: 88px;
}

.md-ficha.is-destacada,
section.is-destacada {
    animation: md-destacar-ficha 2.4s ease-out 1;
}

@keyframes md-destacar-ficha {
    0% { box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.55); background: #eaf7f1; }
    100% { box-shadow: none; }
}

@media (max-width: 520px) {
    .md-buscar-sugerencias {
        position: static;
        margin-top: 6px;
        box-shadow: none;
    }
}

/* ============================================================================
   FASE 6.7.2 — Selector de vista (Mapa / Listado) y selección coherente.
   ============================================================================ */
.md-vistas {
    display: inline-flex;
    gap: 4px;
    margin: 4px 0 0;
    padding: 4px;
    background: #eef3f5;
    border: 1px solid var(--borde, #cfdae0);
    border-radius: 999px;
}

.md-vista {
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--texto-suave, #5b6b73);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.md-vista.is-activa {
    color: #ffffff;
    background: var(--acento, #12707f);
}

.md-vista:focus-visible {
    outline: 3px solid rgba(25, 135, 84, 0.35);
    outline-offset: 1px;
}

#md-centros tbody tr.is-seleccionada {
    background: #eaf7f1;
    box-shadow: inset 3px 0 0 0 var(--acento, #12707f);
}

#md-vista-listado[hidden],
#md-vista-mapa[hidden] {
    display: none;
}

@media (max-width: 520px) {
    .md-vistas {
        display: flex;
        width: 100%;
    }
    .md-vista {
        flex: 1 1 0;
        text-align: center;
    }
}

/* ============================================================================
   FASE 6.7.3 — Identidad visual y organización por bloques de la ficha.
   Fondo turquesa muy suave, acento lateral corporativo y jerarquía por bloques.
   ============================================================================ */
#md-ficha {
    background: linear-gradient(180deg, #f1fafb 0%, #ffffff 65%);
    border-left: 5px solid var(--acento, #12707f);
}

.md-ficha-bloque {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #dbe8ec;
}

.md-ficha-bloque:first-of-type {
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
}

.md-ficha-bloque-titulo {
    margin: 0;
    font-size: 1rem;
    letter-spacing: 0.01em;
    color: #0f3b45;
}

.md-ficha-bloque-sub {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--texto-suave, #5b6b73);
}

.md-ficha-bloque-cuerpo {
    margin-top: 10px;
}

.md-ficha-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
}

.md-ficha-cifra {
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #d7e6ea;
    border-radius: 10px;
}

.md-ficha-cifra-etiqueta {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--texto-suave, #5b6b73);
}

.md-ficha-cifra-valor {
    display: block;
    font-size: 1.5rem;
    line-height: 1.2;
    color: #0f3b45;
}

.md-ficha-cifra-curso {
    display: block;
    font-size: 0.72rem;
    color: var(--texto-suave, #5b6b73);
}

.md-ficha-datos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 8px 16px;
}

.md-ficha-dato {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.md-ficha-dato-etiqueta {
    font-size: 0.74rem;
    color: var(--texto-suave, #5b6b73);
}

.md-ficha-dato-valor {
    font-weight: 600;
    color: #123c46;
}

.md-ficha-etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.md-ficha-etiqueta {
    padding: 3px 10px;
    font-size: 0.8rem;
    background: #e6f4f6;
    border: 1px solid #c9e3e8;
    border-radius: 999px;
}

.md-ficha-lista {
    display: grid;
    gap: 2px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.md-ficha-lista li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.88rem;
    border-bottom: 1px dotted #dbe7ea;
}

.md-ficha-nota {
    margin: 8px 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--texto-suave, #5b6b73);
}

.md-ficha-indicadores {
    display: grid;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.md-ficha-indicadores li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px dashed #cbdde2;
    border-radius: 8px;
}

.md-ficha-indicador-estado {
    padding: 2px 8px;
    font-size: 0.76rem;
    font-weight: 600;
    color: #8a6d1f;
    background: #fdf5e2;
    border-radius: 999px;
}

@media (max-width: 520px) {
    #md-ficha {
        border-left-width: 4px;
    }
    .md-ficha-cifras {
        grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    }
}

/* ============================================================================
   FASE 6.7.4 — Tarjeta SIPRI compacta: cifra principal y desglose en la misma
   tarjeta (sustituciones · vacantes · desiertas), con curso de referencia.
   ============================================================================ */
.md-sipri-tarjeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #d7e6ea;
    border-left: 4px solid var(--acento, #12707f);
    border-radius: 10px;
}

.md-sipri-principal {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.md-sipri-total {
    font-size: 2rem;
    line-height: 1;
    color: #0f3b45;
    font-variant-numeric: tabular-nums;
}

.md-sipri-total-etiqueta {
    font-size: 0.85rem;
    color: var(--texto-suave, #5b6b73);
}

.md-sipri-desglose {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.md-sipri-desglose-item {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 4px 10px;
    background: #eef6f8;
    border: 1px solid #d7e6ea;
    border-radius: 999px;
}

.md-sipri-desglose-valor {
    color: #0f3b45;
    font-variant-numeric: tabular-nums;
}

.md-sipri-desglose-nombre {
    font-size: 0.8rem;
    color: var(--texto-suave, #5b6b73);
}

.md-sipri-aviso {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: #8a6d1f;
}

@media (max-width: 520px) {
    .md-sipri-tarjeta {
        gap: 10px 12px;
    }
    .md-sipri-total {
        font-size: 1.7rem;
    }
}

/* Actividad SIPRI por curso y especialidad (ficha del centro) */
.md-sipri-especialidad-bloque { margin-top: 12px; }
.md-sipri-cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.md-sipri-cabecera-texto { font-size: .8rem; font-weight: 600; color: var(--texto-suave, #5b6b73); }
.md-sipri-selector { padding: 4px 8px; font-size: .85rem; border: 1px solid var(--borde, #cfdae0);
    border-radius: var(--radio-sm, 8px); background: #fff; }
.md-sipri-especialidades { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.md-sipri-especialidad { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px;
    padding: 6px 10px; background: #fff; border: 1px solid #e2ecef; border-radius: 8px; font-size: .88rem; }
.md-sipri-especialidad.is-pt { border-left: 3px solid #12707f; }
.md-sipri-especialidad.is-or { border-left: 3px solid #8a6d1f; }
.md-sipri-especialidad.is-ex { border-left: 3px dashed #b9c6cb; }
.md-sipri-esp-nombre { flex: 1 1 55%; font-weight: 600; }
.md-sipri-esp-familia { font-size: .72rem; color: var(--texto-suave, #5b6b73); }
.md-sipri-esp-cifras { font-variant-numeric: tabular-nums; }
.md-sipri-esp-detalle { font-size: .78rem; color: var(--texto-suave, #5b6b73); }
@media (max-width: 520px) {
    .md-sipri-especialidad { font-size: .84rem; }
    .md-sipri-esp-nombre { flex: 1 1 100%; }
}

/* FASE 7.1 — presentación universal de especialidades y servicios con iconos SVG */
.md-sipri-totales { margin: 6px 0 8px; font-size: .9rem; color: #123c46; }
.md-sipri-totales strong { font-size: 1.1rem; }
.md-sipri-especialidad { border-left: 3px solid #dfe9ec; }   /* acento neutro: sin familias destacadas */
.md-ficha-servicios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.md-ficha-servicios-titulo { font-size: .78rem; color: var(--texto-suave, #5b6b73); }
.md-servicio { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
    background: #eef6f8; border: 1px solid #d7e6ea; border-radius: 999px; font-size: .82rem; color: #123c46; }
.md-servicio-icono { flex: 0 0 auto; }
.md-servicio-texto { white-space: nowrap; }
@media (max-width: 520px) { .md-servicio-texto { font-size: .78rem; } }

/* ============================================================================
   MEGA FASE 8 — selector Mapa/Listado con más presencia, ficha seleccionada
   persistente, nota metodológica secundaria.
   ============================================================================ */
.md-vistas { gap: 6px; padding: 5px; border-radius: 14px; }
.md-vista {
    min-width: 132px;
    min-height: 44px;               /* área de interacción cómoda (también en móvil) */
    padding: 10px 22px;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-radius: 10px;
    color: #24505c;
    background: #ffffff;
    border: 1px solid #d7e6ea;
}
.md-vista:hover { background: #f2f9fa; }
.md-vista.is-activa {
    color: #ffffff;
    background: var(--acento, #12707f);
    border-color: var(--acento, #12707f);
    box-shadow: 0 2px 8px rgba(18, 112, 127, 0.28);
}
.md-vista.is-activa::before { content: "● "; font-size: 0.7rem; vertical-align: middle; }

.md-nota-metodologica {
    margin: 6px 0 0;
    font-size: 0.78rem;
    color: var(--texto-suave, #5b6b73);
}

/* Ficha del centro seleccionado: estado persistente + animación breve */
#md-ficha.is-seleccionada {
    border-left-width: 6px;
    border-left-color: var(--acento, #12707f);
    box-shadow: 0 6px 22px rgba(18, 112, 127, 0.16);
    background: linear-gradient(180deg, #eef8fa 0%, #ffffff 70%);
}
#md-ficha.is-seleccionada .md-ficha-bloque-titulo { color: #0c5b68; }
#md-ficha.is-seleccionada .md-seccion-cabecera h2::after {
    content: " · seleccionado";
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--texto-suave, #5b6b73);
}

@media (max-width: 520px) {
    .md-vistas { display: flex; width: 100%; }
    .md-vista { flex: 1 1 0; min-width: 0; min-height: 46px; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    #md-ficha.is-destacada { animation: none; }
}


/* ============================================================================
   MEGA FASE 8.1 — resumen y distribución territorial más compactos
   ============================================================================ */
.md-resumen, .md-territorio, .md-distribucion,
.md-seccion-resumen, .md-seccion-territorio { margin-top: 0; padding-top: 0; }
.md-resumen .md-tarjeta, .md-territorio .md-tarjeta, .md-distribucion .md-tarjeta {
    padding: 10px 12px;               /* tarjetas menos altas */
}
.md-resumen .md-tarjeta h3, .md-territorio h3, .md-distribucion h3 { margin: 0 0 4px; font-size: 0.95rem; }
.md-resumen, .md-territorio { gap: 10px; }

/* Escritorio: resumen y territorio comparten una banda compacta de dos columnas */
@media (min-width: 1024px) {
    .md-resumen + .md-territorio, .md-resumen + .md-seccion-territorio {
        display: grid;
        grid-template-columns: minmax(280px, 1fr) minmax(420px, 1.6fr);
        align-items: start;
        gap: 14px;
        margin-top: 6px;
    }
    .md-territorio .md-tabla-territorio, .md-territorio table { max-height: 420px; overflow-y: auto; }
}

/* Móvil: apilado natural, sin comprimir en exceso ni desbordar */
@media (max-width: 520px) {
    .md-resumen .md-tarjeta, .md-territorio .md-tarjeta { padding: 10px; }
    .md-territorio table { font-size: 0.82rem; }
    .md-territorio .md-tabla-scroll, .md-territorio .md-scroll { overflow-x: auto; max-width: 100%; }
}

/* Bloque de redes reales (fuente experimental local) */
.md-redes-reales { margin: 8px 0 4px; }
.md-redes-titulo { margin: 0 0 6px; font-size: 0.95rem; }
.md-redes-subtitulo { margin: 10px 0 6px; font-size: 0.9rem; }
.md-redes-lista { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.md-red-item { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
    padding: 6px 10px; background: #fff; border: 1px solid #e2ecef; border-radius: 8px; font-size: 0.86rem; }
.md-red-nombre { flex: 1 1 45%; font-weight: 600; }
.md-red-cifras { font-variant-numeric: tabular-nums; font-weight: 600; }
.md-red-alumnado { font-size: 0.78rem; color: var(--texto-suave, #5b6b73); }


/* MEGA FASE 8 (cierre) — banda compacta: resumen y territorio en una sola sección visual */
.md-banda-territorial { display: block; margin-top: 4px; }
.md-banda-territorial > section { margin-top: 0; padding-top: 10px; }
.md-banda-territorial .md-seccion-cabecera { margin-bottom: 6px; }
.md-banda-territorial .md-tarjeta { padding: 10px 12px; }
.md-banda-territorial .md-tarjeta + .md-tarjeta { margin-top: 8px; }

@media (min-width: 1024px) {
    .md-banda-territorial {
        display: grid;
        grid-template-columns: minmax(300px, 0.85fr) minmax(460px, 1.35fr);
        gap: 16px;
        align-items: start;
    }
    .md-banda-territorial > section { margin: 0; }
    /* el territorio aprovecha el ancho: sus tarjetas se reparten en dos columnas internas */
    .md-banda-territorial > section:last-child .md-tarjeta { display: inline-block; vertical-align: top;
        width: calc(50% - 6px); margin-right: 8px; }
}

@media (max-width: 1023px) {
    .md-banda-territorial > section + section { margin-top: 12px; }
}

/* FASE 8+ — redes educativas como tarjetas compactas dentro de datos destacados */
.md-redes-reales { margin: 10px 0 0; }
.md-redes-titulo { margin: 0 0 8px; font-size: 0.92rem; color: var(--texto-suave, #5b6b73); font-weight: 600; }
.md-redes-subtitulo { margin: 12px 0 6px; font-size: 0.86rem; color: var(--texto-suave, #5b6b73); font-weight: 600; }
.md-redes-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.md-red-tarjeta { padding: 10px 12px; background: #fff; border: 1px solid #e2ecef; border-radius: 10px; }
.md-red-tarjeta-etiqueta { margin: 0; font-size: 0.76rem; color: var(--texto-suave, #5b6b73); line-height: 1.25; }
.md-red-tarjeta-valor { margin: 2px 0 0; font-size: 1.5rem; font-weight: 700; color: #123c46;
    font-variant-numeric: tabular-nums; line-height: 1.1; }
.md-red-tarjeta-pie { margin: 2px 0 0; font-size: 0.72rem; color: var(--texto-suave, #5b6b73); }
@media (max-width: 520px) { .md-redes-tarjetas { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); } }

/* ============================================================================
   Aprovechamiento del ancho y paginación numérica (escritorio y móvil)
   ============================================================================ */
.md-paginacion-numeros { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.md-paginacion-puntos { padding: 0 4px; opacity: .6; }

@media (min-width: 1024px) {
    /* El directorio deja de estar encajonado en una columna estrecha. */
    main, .md-contenedor, .md-cabecera-inner { max-width: none; }
    #md-vista-listado, #md-centros, .md-tabla-contenedor { width: 100%; max-width: none; }
    #md-vista-listado .md-tabla-contenedor { overflow-x: auto; }
}

@media (max-width: 520px) {
    /* Móvil: la tabla se desplaza dentro de su contenedor, nunca la página completa. */
    .md-tabla-contenedor { overflow-x: auto; max-width: 100%; }
    .md-paginacion-boton { min-height: 2.4rem; padding: 0.45rem 0.7rem; font-size: 0.85rem; }
    .md-paginacion-numeros .md-paginacion-boton { min-width: 2.4rem; }
}


/* FASE 6 — gráficas de ficha: responsive, compactas y sin etiquetas cortadas */
.md-ficha svg, .md-evolucion svg, svg.md-grafica { max-width: 100%; height: auto; display: block; }
.md-grafica-titulo, .md-ficha .md-grafica-titulo { margin: 4px 0 2px; font-size: .84rem; font-weight: 600; color: #123c46; }
.md-grafica-nota { margin: 2px 0 8px; font-size: .76rem; color: var(--texto-suave, #5b6b73); }
.md-ficha .md-evolucion, .md-ficha .md-grafica { max-height: 210px; overflow: hidden; }
@media (max-width: 520px) { .md-ficha .md-evolucion, .md-ficha .md-grafica { max-height: 170px; } }


/* Nota metodológica del filtro único de red educativa */
.md-red-nota { margin: 4px 0 0; font-size: .76rem; color: var(--texto-suave, #5b6b73); max-width: 62ch; }
.md-total.is-error { color: #a3341f; font-weight: 600; }


/* AUDITORÍA FASE 7 — sin huecos residuales entre Mapa y Listado */
.md-seccion[hidden], #md-vista-mapa[hidden], #md-vista-listado[hidden] { display: none !important; }
.md-seccion-mapa { min-height: 0; }
#md-vista-mapa:not([hidden]) { display: block; }
#md-vista-listado:not([hidden]) { display: block; width: 100%; }

/* Agregado municipal de la capa de centros (sin librerías externas) */
.md-cluster { background: transparent; border: 0; }
.md-cluster span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: 50%; background: rgba(25,135,84,.9); color: #fff; font-size: .72rem; font-weight: 700;
    border: 2px solid #123f4a; box-shadow: 0 1px 3px rgba(0,0,0,.35); }

/* ===== CAMBIO 1: gráficas históricas compactas, con leyenda y sin solapes ===== */
.md-graficos { display: grid; gap: 10px; margin: 6px 0 4px; }
@media (min-width: 900px) { .md-graficos { grid-template-columns: 1fr 1fr; align-items: start; } }
.md-grafico-caja { margin: 0; padding: 8px 10px 6px; background: #fff; border: 1px solid #e2ecef; border-radius: 10px; }
.md-grafico-titulo { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 600; color: #123c46; margin-bottom: 2px; }
.md-grafico-clave { width: 11px; height: 11px; border-radius: 3px; display: inline-block; flex: none; }
.md-grafico-unidad { margin-left: auto; font-weight: 400; font-size: .72rem; color: var(--texto-suave, #5b6b73); }
.md-grafico { width: 100%; height: auto; max-height: 118px; display: block; }
.md-grafico-nota { margin: 6px 0 0; font-size: .74rem; color: var(--texto-suave, #5b6b73); }
.md-grafico-linea { fill: none; stroke-width: 2; }
.md-grafico-punto { stroke: #fff; stroke-width: .8; }
.md-grafico-eje, .md-grafico-rejilla { stroke: #cfdae0; stroke-width: 1; }
.md-grafico-texto { font-size: 9px; fill: #5b6b73; }
.md-ficha .md-grafico:not(:last-child) { margin-bottom: 0; }

/* ===== CAMBIO 2: la cabecera fija no tapa la ficha al desplazarse ===== */
#md-ficha { scroll-margin-top: 92px; }
#md-ficha.is-seleccionada { scroll-margin-top: 92px; }

/* ===== CAMBIO 3: resumen y distribución provincial compactos ===== */
.md-kpis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; margin: 6px 0 2px; }
.md-kpi { padding: 8px 10px; border-radius: 10px; gap: 1px; }
.md-kpi::before { height: 3px; }
.md-kpi-valor { font-size: 1.30rem; line-height: 1.1; }
.md-kpi-nombre { font-size: .78rem; margin: 0; }
.md-kpi-etiqueta { font-size: .68rem; }
.md-kpi-meta, .md-kpi-cobertura { font-size: .70rem; margin-top: 2px; }
.md-redes-reales { margin-top: 8px; padding: 0; }
.md-redes-titulo, .md-redes-subtitulo { font-size: .82rem; margin: 6px 0 4px; }
.md-redes-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 6px; margin-bottom: 6px; }
.md-red-tarjeta { padding: 7px 9px; border-radius: 9px; }
.md-red-tarjeta-valor { font-size: 1.02rem; line-height: 1.15; }
.md-red-tarjeta-etiqueta { font-size: .72rem; }
.md-red-tarjeta-pie { font-size: .68rem; }
/* Distribución provincial: rejilla alineada y comparable (2 columnas en escritorio) */
.md-territorio-contenido { margin-top: 4px; }
.md-territorio-lista { display: grid; gap: 4px; }
@media (min-width: 900px) { .md-territorio-lista { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.md-territorio-fila { display: grid; grid-template-columns: minmax(92px, 1.15fr) minmax(60px, 1.6fr) auto;
    align-items: center; gap: 8px; padding: 4px 6px; border-radius: 8px; }
.md-territorio-nombre { font-size: .84rem; font-weight: 600; }
.md-territorio-cifras { display: flex; align-items: baseline; gap: 6px; justify-content: flex-end; }
.md-territorio-cifra-valor { font-size: .90rem; font-weight: 700; }
.md-territorio-cifra-etiqueta { font-size: .66rem; color: var(--texto-suave, #5b6b73); }
.md-territorio-barra { height: 5px; border-radius: 4px; }
/* Ranking plegable: bloque secundario, misma información a un clic */
.md-plegable { margin-top: 10px; border: 1px solid #e2ecef; border-radius: 10px; background: #fff; }
.md-plegable > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: .86rem; color: #123c46; }
.md-plegable[open] > summary { border-bottom: 1px solid #eef4f6; }
.md-plegable .md-rankings-contenido { padding: 2px 10px 10px; }
.md-rankings-contenido { display: grid; gap: 8px; }
.md-rankings-contenido th, .md-rankings-contenido td { padding: 4px 8px; font-size: .82rem; }
@media (min-width: 900px) { .md-rankings-contenido { grid-template-columns: 1fr 1fr; align-items: start; } }
@media (max-width: 520px) {
    .md-kpis-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .md-territorio-fila { grid-template-columns: minmax(84px, 1.2fr) 1.4fr auto; }
}

/* ===== AJUSTE: distribución territorial más compacta y a todo el ancho ===== */
#md-territorio { grid-column: 1 / -1; }
#md-territorio .md-seccion-cabecera { margin-bottom: 2px; }
#md-territorio .md-territorio-titulo, #md-territorio h2 { margin-bottom: 0; }
.md-territorio-contenido { margin-top: 2px; }
.md-territorio-lista { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2px 18px; }
.md-territorio-fila { padding: 2px 6px; min-height: 0; align-items: center; }
.md-territorio-barradentro, .md-territorio-barra { height: 4px; }
.md-territorio-nombre { font-size: .82rem; }
.md-territorio-cifra-valor { font-size: .86rem; }
.md-territorio-cifra-etiqueta { font-size: .64rem; }
/* Redes educativas del resumen: tarjetas más bajas y rejilla más densa */
#md-redes-reales { margin-top: 4px; }
#md-redes-reales .md-redes-titulo { margin: 4px 0 3px; font-size: .84rem; }
#md-redes-reales .md-redes-subtitulo { margin: 5px 0 3px; font-size: .8rem; }
#md-redes-reales .md-redes-tarjetas { gap: 5px; margin-bottom: 4px; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); }
#md-redes-reales .md-red-tarjeta { padding: 5px 8px; }
#md-redes-reales .md-red-tarjeta-valor { font-size: 1.05rem; line-height: 1.1; margin-top: 0; }
#md-redes-reales .md-red-tarjeta-etiqueta { font-size: .7rem; line-height: 1.2; }
#md-redes-reales .md-red-tarjeta-pie { font-size: .66rem; margin-top: 1px; }
#md-redes-reales .md-ficha-nota { margin: 3px 0 0; font-size: .7rem; line-height: 1.25; }
@media (max-width: 640px) {
    .md-territorio-lista { grid-template-columns: 1fr; gap: 2px; }
    #md-redes-reales .md-redes-tarjetas { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
}

/* ===== Resumen plegable y composición mapa 2/3 + resumen 1/3 ===== */
.md-resumen { padding: 0; }
.md-plegable-resumen > summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    cursor: pointer; list-style: none; border-radius: var(--radio-md, 12px); }
.md-plegable-resumen > summary::-webkit-details-marker { display: none; }
.md-plegable-resumen > summary::after { content: "▸"; margin-left: 8px; color: var(--texto-suave, #5b6b73); }
.md-plegable-resumen[open] > summary::after { content: "▾"; }
.md-plegable-resumen > summary h2 { margin: 0; font-size: 1rem; }
.md-plegable-resumen .md-ceja { margin: 0; }
.md-plegable-pista { margin-left: auto; font-size: .74rem; color: var(--texto-suave, #5b6b73); }
.md-resumen-cuerpo { padding: 0 12px 12px; }
.md-resumen-cuerpo .md-referencia { margin: 0 0 6px; }
/* Bloques por universo (titularidad / 0-3 / otras enseñanzas) */
.md-redes-bloque { margin: 8px 0 0; }
.md-redes-bloque .md-redes-subtitulo { margin: 0 0 4px; }
.md-redes-bloque .md-redes-tarjetas { margin-bottom: 4px; }
.md-redes-bloque .md-ficha-nota { margin: 2px 0 0; }
@media (min-width: 1024px) {
    .md-pagina { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
        column-gap: 22px; row-gap: 16px; align-items: start; }
    .md-pagina > * { grid-column: 1 / -1; }
    #md-vista-mapa { grid-column: 1; grid-row: 1; }
    #md-kpis { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: 74px;
        max-height: calc(100vh - 96px); overflow: auto; }
    #md-kpis .md-kpis-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    #md-mapa { height: clamp(440px, 70vh, 780px); }
}
@media (max-width: 1023px) {
    #md-mapa { height: clamp(320px, 52vh, 520px); }
}

/* ===== FASE 9: barra de tres vistas a ancho completo y zona única de contenido ===== */
.md-vistas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
    width: 100%; margin: 6px 0 0; padding: 4px; box-sizing: border-box;
    background: #eef3f5; border: 1px solid var(--borde, #cfdae0); border-radius: 12px; }
.md-vista { display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--azul, #17505f); font: inherit; font-weight: 700; font-size: .92rem;
    cursor: pointer; transition: background-color .16s ease, color .16s ease, border-color .16s ease; }
.md-vista:hover { background: #fff; }
.md-vista:focus-visible { outline: 2px solid var(--azul, #17505f); outline-offset: 2px; }
.md-vista.is-activa { background: var(--azul, #17505f); border-color: var(--azul, #17505f); color: #fff; }
.md-vista-icono { width: 18px; height: 18px; flex: none; }
.md-vista-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-contenido { display: block; width: 100%; }
.md-contenido > [hidden] { display: none !important; }   /* solo una vista visible */
.md-estadisticas-cuerpo { padding: 2px 0 0; }
/* La antigua composición en dos columnas deja paso a la navegación por vistas */
@media (min-width: 1024px) {
    .md-pagina { display: block; }
    #md-kpis { position: static; max-height: none; overflow: visible; }
    #md-mapa { height: clamp(460px, 68vh, 780px); }
}
@media (max-width: 640px) {
    .md-vistas { gap: 3px; padding: 3px; }
    .md-vista { font-size: .78rem; gap: 6px; padding: 8px 6px; }
    .md-vista-icono { width: 16px; height: 16px; }
    #md-mapa { height: clamp(320px, 52vh, 520px); }
}

/* ===== FASE 9.1: las tres vistas usan TODO el ancho disponible ===== */
/* La banda territorial ya no reparte el espacio en dos columnas: las vistas son hijas de main. */
.md-banda-territorial { display: block; }
@media (min-width: 1024px) {
    .md-banda-territorial { display: block; grid-template-columns: none; }
    .md-banda-territorial > section:last-child .md-tarjeta { display: block; width: auto; margin-right: 0; }
    #md-contenido, #md-vista-mapa, #md-vista-listado, #md-kpis { width: 100%; max-width: none; }
    #md-mapa { width: 100%; }
    /* Distribución proporcional al ancho real */
    .md-kpis-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    #md-redes-reales .md-redes-tarjetas { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
    .md-territorio-lista { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
    .md-rankings-contenido { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
}

/* ===== FASE 10: comparación histórica en la ficha (alumnado, unidades y plantilla) ===== */
.md-comparada { margin: 6px 0 0; }
.md-modos { display: inline-flex; gap: 4px; padding: 3px; background: #eef3f5;
    border: 1px solid var(--borde, #cfdae0); border-radius: 10px; margin: 2px 0 6px; }
.md-modo { border: 1px solid transparent; background: transparent; border-radius: 7px; cursor: pointer;
    padding: 5px 10px; font: inherit; font-size: .8rem; font-weight: 600; color: var(--azul, #17505f);
    transition: background-color .15s ease, color .15s ease; }
.md-modo:hover { background: #fff; }
.md-modo.is-activa { background: var(--azul, #17505f); color: #fff; border-color: var(--azul, #17505f); }
.md-modo:focus-visible { outline: 2px solid var(--azul, #17505f); outline-offset: 2px; }
.md-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 4px; padding: 0; list-style: none; }
.md-leyenda-item { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: #123c46; }
.md-leyenda-color { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.md-leyenda-base { color: var(--texto-suave, #5b6b73); font-size: .72rem; }
.md-grafico-comparado { max-height: 200px; }
.md-tabla-comparada { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: .78rem; }
.md-tabla-comparada caption { text-align: left; font-weight: 700; font-size: .8rem; padding-bottom: 3px; color: #123c46; }
.md-tabla-comparada th, .md-tabla-comparada td { padding: 3px 6px; border-bottom: 1px solid #eef4f6; text-align: left; }
.md-tabla-comparada th[scope="row"] { font-weight: 600; }
.md-tabla-valor { font-weight: 700; white-space: nowrap; }
.md-tabla-formula { color: var(--texto-suave, #5b6b73); font-size: .72rem; }
.md-resumen-interpretativo { margin: 6px 0 2px; padding: 6px 9px; background: #f4f8f9; border-left: 3px solid var(--azul, #17505f);
    border-radius: 0 8px 8px 0; font-size: .82rem; }
@media (max-width: 640px) {
    .md-tabla-formula { display: none; }          /* en móvil, la fórmula completa estorba */
    .md-modos { width: 100%; }
    .md-modo { flex: 1 1 0; text-align: center; }
}

/* ===== P1: indicadores históricos de la ficha (SIPRI y plantilla registrada) ===== */
.md-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 6px 0; }
.md-cifra { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #f4f8f9;
    border: 1px solid var(--borde, #cfdae0); border-radius: 10px; }
.md-cifra-valor { font-size: 1.25rem; font-weight: 700; color: var(--azul, #17505f); line-height: 1.1; }
.md-cifra-etiqueta { font-size: .72rem; color: var(--texto-suave, #5b6b73); }
.md-plantilla-indicador { margin-top: 4px; }
@media (max-width: 640px) {
    .md-cifras { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
    .md-cifra-valor { font-size: 1.1rem; }
}

/* ===== Filtros de la actividad SIPRI (curso + especialidad) ===== */
.md-sipri-filtros { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 4px 0 6px; }
.md-sipri-campo { display: flex; flex-direction: column; gap: 3px; min-width: 150px; flex: 1 1 170px; }
.md-sipri-campo-etiqueta { font-size: .72rem; font-weight: 600; color: var(--texto-suave, #5b6b73); }
.md-sipri-filtros .md-sipri-selector { width: 100%; }
@media (max-width: 640px) { .md-sipri-campo { flex: 1 1 100%; } }

/* ===== P2: carrusel de estadísticas comparativas por red ===== */
.md-stats { margin-top: 14px; border: 1px solid var(--borde, #cfdae0); border-radius: 12px; background: #fff; padding: 10px 12px; }
.md-stats:focus-visible { outline: 2px solid var(--azul, #17505f); outline-offset: 2px; }
.md-stats-barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-stats-boton { border: 1px solid var(--borde, #cfdae0); background: #f4f8f9; color: var(--azul, #17505f);
    border-radius: 8px; padding: 6px 12px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.md-stats-boton:hover:not(:disabled) { background: var(--azul, #17505f); color: #fff; }
.md-stats-boton:disabled { opacity: .45; cursor: default; }
.md-stats-posicion { margin: 0; font-size: .8rem; font-weight: 700; color: #123c46; text-align: center; }
.md-stats-controles { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 8px 0 6px; }
.md-stats-campo { display: flex; flex-direction: column; gap: 3px; min-width: 140px; }
.md-stats-contenido { margin-top: 4px; }
.md-stats-explicacion { margin: 6px 0 2px; font-size: .82rem; color: #123c46; }
.md-stats-dato { margin: 6px 0 2px; font-size: .78rem; color: var(--texto-suave, #5b6b73); }
.md-stats-aviso { margin: 4px 0 6px; padding: 6px 9px; background: #fff6e8; border-left: 3px solid #a3341f;
    border-radius: 0 8px 8px 0; font-size: .8rem; }
.md-stats-serie { margin-bottom: 6px; }
.md-stats-serie-titulo { margin: 4px 0 2px; font-size: .8rem; color: #123c46; }
.md-stats-pie { margin-top: 6px; }
.md-barras { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 5px; }
.md-barra-fila { display: grid; grid-template-columns: minmax(120px, 1.1fr) 3fr minmax(74px, auto); align-items: center; gap: 8px; }
.md-barra-etiqueta { font-size: .78rem; color: #123c46; }
.md-barra-pista { display: block; height: 14px; background: #eef3f5; border-radius: 7px; overflow: hidden; }
.md-barra-valor { display: block; height: 100%; border-radius: 7px; transition: width .25s ease; }
.md-barra-cifra { font-size: .78rem; font-weight: 700; text-align: right; white-space: nowrap; }
.md-tabla-redes th, .md-tabla-redes td { font-size: .76rem; }
@media (max-width: 640px) {
    .md-barra-fila { grid-template-columns: 1fr; gap: 2px; }
    .md-barra-cifra { text-align: left; }
    .md-stats-barra { flex-wrap: wrap; }
    .md-tabla-redes { display: block; overflow-x: auto; }   /* la tabla no desborda la página */
}