/* Tablero de resultados en una pantalla (ADR-017 y ADR-021). Escritorio y tablet horizontal: panel de pestañas a la
   izquierda (25 % del ancho, entre 320 y 420 px) y el mapa en el resto, con la página sin desplazamiento; solo se
   desplaza el contenido de cada pestaña. Tablet vertical: el mapa a todo el ancho y el panel en un cajón superpuesto.
   Celular: mapa a pantalla completa y hoja inferior de tres alturas. Tabla y Ranking se despliegan sobre la parte de
   abajo del mapa. Solo variables del tema (shell.css) y componentes de resultados.css. */

/* La página no se desplaza: encabezado y barra de contexto arriba, el pie abajo y el tablero en el resto de la
   ventana (100dvh menos encabezado, barra y pie). En celular el pie no se muestra: el mapa ocupa toda la pantalla. */
html.es-tablero .app-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--alto-nav-inferior, 0px));
    height: calc(100dvh - var(--alto-nav-inferior, 0px));
    min-height: 0;
}

html.es-tablero .site-header,
html.es-tablero .barra-contexto,
html.es-tablero .site-footer {
    flex: none;
}

html.es-tablero .site-footer {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

@media (max-width: 640px) {
    html.es-tablero .site-footer {
        display: none;
    }
}

.tablero {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.tablero .error-carga {
    position: absolute;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    z-index: 30;
}

/* Enlaces con aspecto de botón (Vista informe, Ver el tablero, Ver el TREP): con alto propio, como los botones. */
a.boton-secundario {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.icono {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

/* --- Panel de pestañas: Resultados, D'Hondt, Filtros, Capas y Método ------------------------------------------- */

.tablero__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--surface-solid);
    color: var(--text);
}

/* Íconos con el texto debajo: las cinco entran a lo ancho del panel sin cortar palabras. En el cajón (tablet vertical),
   el botón de cerrar va en la misma fila. */
.tablero__barra-pestanas {
    flex: none;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

.tablero__pestanas {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
}

.tablero__pestanas [role="tab"] {
    cursor: pointer;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    min-height: 3.25rem;
    margin-bottom: -1px;
    padding: .375rem .125rem;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: var(--text-soft);
    font: inherit;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.tablero__pestanas [role="tab"]:hover {
    color: var(--text);
}

.tablero__pestanas [role="tab"][aria-selected="true"] {
    border-bottom-color: var(--orange-500);
    color: var(--orange-700);
}

html[data-theme="dark"] .tablero__pestanas [role="tab"][aria-selected="true"] {
    color: var(--orange-400);
}

.tablero__pestanas [role="tab"]:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: -3px;
}

.tablero__pestanas .icono {
    width: 1.25rem;
    height: 1.25rem;
}

/* D'Hondt con Intendencia: atenuada; el aviso aparece al pasar el puntero o con el foco. */
.tablero__pestanas [role="tab"].es-atenuada {
    opacity: .5;
}

.pestanas__aviso {
    position: absolute;
    z-index: 30;
    max-width: 15rem;
    margin: 0;
    padding: .375rem .625rem;
    border-radius: .625rem;
    background: var(--text);
    color: var(--surface-solid);
    font-size: .75rem;
    font-weight: 600;
    box-shadow: var(--card-shadow);
    pointer-events: none;
}

.pestanas__aviso[hidden] {
    display: none;
}

/* Solo se desplaza el contenido de la pestaña elegida. */
.tablero__seccion {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: .875rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .875rem 1rem 1rem;
}

.tablero__seccion[hidden] {
    display: none;
}

.tablero__seccion:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: -3px;
}

/* Los paneles van dentro de las pestañas sin tarjeta propia. */
.tablero__seccion > .panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.estado-vacio--panel {
    display: grid;
    gap: .5rem;
    justify-items: start;
}

.estado-vacio--panel h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
}

.estado-vacio--panel p {
    margin: 0;
    color: var(--text-soft);
}

.estado-vacio--panel[hidden] {
    display: none;
}

.tablero__cerrar-panel {
    cursor: pointer;
    display: none;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 .375rem;
    border: 1px solid var(--border-strong);
    border-radius: 9999px;
    background: transparent;
    color: var(--text-soft);
}

.tablero__cerrar-panel:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

/* En la columna angosta, los votos y el porcentaje quedan a la derecha aunque el nombre ocupe dos renglones. */
.tablero__seccion .resultado__encabezado,
.tablero__seccion .resultado__pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.tablero__seccion .resultado__votos,
.tablero__seccion .resultado__pct {
    text-align: right;
    white-space: nowrap;
}

.tablero__seccion .resultado {
    gap: .625rem;
}

.tablero__seccion .resultado__foto {
    width: 2.75rem;
    height: 2.75rem;
    flex-basis: 2.75rem;
}

.filtros__limpiar {
    justify-self: start;
}

/* --- Filtros: ruta geográfica, búsqueda y capas ---------------------------------------------------------------- */

.ruta-geo ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    font-weight: 700;
}

.ruta-geo li {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.ruta-geo li + li::before {
    content: "›";
    color: var(--text-muted);
}

.ruta-geo__paso {
    cursor: pointer;
    padding: .25rem .375rem;
    border-radius: .5rem;
    background: transparent;
    color: var(--orange-700);
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

html[data-theme="dark"] .ruta-geo__paso {
    color: var(--orange-400);
}

.ruta-geo__actual {
    padding: .25rem 0;
    color: var(--text);
}

.ruta-geo__paso:focus-visible,
.tabla__elegir:focus-visible,
.ranking-lista__boton:focus-visible,
.hoja__asa:focus-visible,
.mapa__herramienta:focus-visible,
.capas__opcion:focus-within {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.filtros__niveles {
    display: grid;
    gap: .5rem;
}

/* Foco visible en los campos del tablero (selectores de la ruta, búsqueda, capas y bandeja). */
.tablero select:focus-visible,
.tablero input:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.filtros__niveles .campo-select,
.buscar-local .campo-buscar {
    display: grid;
    gap: .25rem;
    color: var(--text-soft);
    font-size: .75rem;
    font-weight: 700;
}

.filtros__niveles select,
.capas__detalle select {
    width: 100%;
    min-height: 2.5rem;
    padding: .375rem .625rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
}

.filtros__niveles select:disabled {
    opacity: .6;
}

.buscar-local {
    position: relative;
}

.buscar-local .campo-buscar input {
    width: 100%;
}

.sugerencias {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 15;
    max-height: 18rem;
    margin: .25rem 0 0;
    padding: .25rem;
    overflow-y: auto;
    border: 1px solid var(--border-strong);
    border-radius: .875rem;
    background: var(--surface-solid);
    box-shadow: var(--card-shadow);
    list-style: none;
}

.sugerencias__item {
    cursor: pointer;
    display: grid;
    gap: .125rem;
    min-height: 2.75rem;
    padding: .375rem .625rem;
    border-radius: .625rem;
}

.sugerencias__item:hover,
.sugerencias__item[aria-selected="true"] {
    background: color-mix(in srgb, var(--orange-500) 12%, var(--surface-solid));
}

.sugerencias__nombre {
    color: var(--text);
    font-size: .875rem;
    font-weight: 700;
}

.sugerencias__detalle {
    color: var(--text-muted);
    font-size: .75rem;
}

.capas {
    display: grid;
    gap: .125rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.capas legend {
    margin-bottom: .375rem;
    padding: 0;
    color: var(--text-soft);
    font-size: .75rem;
    font-weight: 700;
}

.capas__opcion {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.25rem;
    padding: .25rem .5rem;
    border-radius: .625rem;
    color: var(--text);
    font-size: .875rem;
    font-weight: 600;
}

.capas__opcion:has(input:checked) {
    background: color-mix(in srgb, var(--orange-500) 12%, transparent);
}

.capas__opcion:has(input:disabled) {
    cursor: default;
    color: var(--text-muted);
}

.capas__opcion input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--orange-500);
}

/* Pestaña Capas: mapa base (dos botones), opacidad de la capa temática (deslizador) y elementos visibles (casillas). */
.capas--base .segmentos {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.capas--base .segmentos button {
    flex: 1 1 0;
}

.capas__opacidad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .25rem .75rem;
    color: var(--text-soft);
    font-size: .75rem;
    font-weight: 700;
}

.capas__opacidad label {
    grid-column: 1 / -1;
}

.capas__opacidad input[type="range"] {
    width: 100%;
    min-height: 2rem;
    margin: 0;
    accent-color: var(--orange-500);
}

.capas__opacidad input[type="range"]:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.capas__opacidad output {
    min-width: 3.25rem;
    color: var(--text);
    font-size: .875rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.capas--elementos .capas__opcion input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--orange-500);
}

/* Leyenda: subtítulo de los puntos y nota de la opacidad. */
.leyenda .leyenda__subtitulo {
    margin-top: .25rem;
    color: var(--text-soft);
    font-weight: 700;
}

.leyenda .leyenda__nota {
    color: var(--text-muted);
    font-size: .6875rem;
}

.capas__detalle {
    display: grid;
    gap: .5rem;
    margin: .125rem 0 .375rem 1.75rem;
}

.capas__detalle .campo-select {
    display: grid;
    gap: .25rem;
    color: var(--text-soft);
    font-size: .75rem;
    font-weight: 700;
}

.capas__detalle .segmentos button {
    padding: .375rem .75rem;
    font-size: .8125rem;
}

/* El enlace a los gráficos de la capa (el IPM por distrito en Análisis): a su ancho, no al de la columna. */
.capas__detalle .boton-secundario {
    justify-self: start;
}

.tablero__filtros .nota {
    margin: 0;
}

/* Método: tres botones grandes que abren los diálogos. */
.metodo__botones {
    display: grid;
    gap: .625rem;
}

.boton-grande {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    min-height: 4rem;
    padding: .75rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 1rem;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
}

.boton-grande:hover {
    border-color: var(--orange-500);
}

.boton-grande:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.boton-grande .icono {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--orange-500);
}

.boton-grande strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
}

.boton-grande small {
    display: block;
    color: var(--text-soft);
    font-size: .8125rem;
}

#panelMetodo > .boton-secundario {
    justify-self: start;
}

.tablero .panel__acciones .boton-secundario {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    white-space: nowrap;
}

.tablero__legal {
    margin: 0;
    color: var(--text-muted);
    font-size: .75rem;
    line-height: 1.5;
}

/* --- Mapa: un lienzo que llena su área, con la leyenda superpuesta --------------------------------------------- */

.tablero__mapa {
    position: relative;
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    background: var(--surface);
}

.tablero__mapa > .mapa:not(.mapa--pantalla) {
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
    aspect-ratio: auto;
}

/* El tablero no desplaza la página: el mapa maneja todos los gestos, como en pantalla completa. */
.mapa--gestos .mapa__svg {
    touch-action: none;
}

/* Abajo a la derecha, donde el mapa del distrito deja lugar libre, encima de la atribución y por debajo de los botones
   de zoom; con la bandeja abierta, sube por encima de ella. */
.mapa__leyenda--fija {
    right: max(.625rem, env(safe-area-inset-right));
    bottom: 1.875rem;
    left: auto;
    max-width: min(19rem, calc(100% - 1.25rem));
    max-height: calc(100% - 15rem);
    padding: .375rem .75rem;
    background: color-mix(in srgb, var(--surface-solid) 92%, transparent);
}

.mapa__leyenda--fija summary {
    display: list-item;
    min-height: 1.75rem;
    line-height: 1.75rem;
}

.mapa__leyenda--fija .leyenda {
    gap: .25rem;
    font-size: .75rem;
}

/* Capas de barrios: sin los puntos de mesa (se elige tocando un barrio); en el IPM, los locales encima. */
.mapa__svg[data-capa="listas"] .mapa__puntos,
.mapa__svg[data-capa="participacion"] .mapa__puntos,
.mapa__svg[data-capa="ipm"] .mapa__puntos,
.mapa__svg[data-capa="listas"] .mapa__toques,
.mapa__svg[data-capa="participacion"] .mapa__toques,
.mapa__svg[data-capa="ipm"] .mapa__toques,
.mapa__locales {
    display: none;
}

.mapa__svg[data-capa="ipm"] .mapa__locales {
    display: inline;
}

.mapa__local.es-atenuado {
    opacity: .2;
}

.mapa__mesa.es-seleccion-mesa {
    stroke-width: calc(22px / var(--zoom-raiz, 1));
}

/* Marca del local elegido: un anillo del color del texto, visible en todas las capas. */
.mapa__marca {
    fill: none;
    stroke: var(--text);
    stroke-width: calc(26px / var(--zoom-raiz, 1));
    stroke-dasharray: calc(70px / var(--zoom-raiz, 1)) calc(45px / var(--zoom-raiz, 1));
    pointer-events: none;
}

.mapa__marca.es-oculta {
    display: none;
}

.leyenda .leyenda__muestra--escala {
    width: 1.25rem;
    border-radius: 3px;
}

.con-bandeja .mapa__leyenda--fija {
    bottom: calc(var(--alto-bandeja, 40%) + 1.875rem);
    max-height: calc(100% - var(--alto-bandeja, 40%) - 7rem);
}

/* Herramientas sobre el mapa, arriba a la izquierda: el panel (solo en tablet vertical), la búsqueda y la tabla. */
.mapa__herramientas {
    position: absolute;
    top: .625rem;
    left: max(.625rem, env(safe-area-inset-left));
    z-index: 4;
    display: flex;
    gap: .5rem;
}

.mapa__herramienta {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-height: 2.75rem;
    padding: 0 .875rem;
    border: 1px solid var(--border-strong);
    border-radius: 9999px;
    background: var(--surface-solid);
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.mapa__herramienta[aria-expanded="true"] {
    border-color: var(--orange-500);
    color: var(--orange-700);
}

html[data-theme="dark"] .mapa__herramienta[aria-expanded="true"] {
    color: var(--orange-400);
}

#botonPanel {
    display: none;
}

/* La atribución (resultados.css) queda siempre a la vista: encima de la bandeja o de la hoja. */
.con-bandeja .mapa__atribucion {
    bottom: calc(var(--alto-bandeja, 40%) + .25rem);
}

.mapa--pantalla .mapa__atribucion {
    bottom: .25rem;
}

/* --- Bandeja: Tabla y Ranking, desplegable sobre la parte de abajo del mapa ------------------------------------ */

.tablero__bandeja {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: .375rem;
    height: var(--alto-bandeja, 40%);
    min-height: 8rem;
    padding: 0 1rem .625rem;
    border-top: 1px solid var(--border-strong);
    background: var(--surface-solid);
    box-shadow: 0 -8px 30px rgba(15, 23, 42, .14);
}

.tablero__bandeja[hidden] {
    display: none;
}

/* Cabecera de la bandeja en un renglón: pestañas, controles del panel elegido y «Cerrar» (en celular, los controles
   pasan abajo). */
.bandeja__cabecera {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .75rem;
}

.bandeja__cabecera .bandeja__controles {
    flex: 1 1 auto;
    min-width: 0;
}

.bandeja__cabecera .bandeja__controles[hidden] {
    display: none;
}

#cerrarBandeja {
    margin-left: auto;
}

.tablero .pestanas {
    position: static;
    margin: 0;
    background: transparent;
}

.bandeja__cabecera .pestanas {
    border-bottom: 0;
}

/* Bandeja compacta: pestañas y botón de cerrar bajos, para que se vean más filas. */
.bandeja__cabecera .pestanas button {
    padding: .5rem .75rem;
}

#cerrarBandeja {
    padding: .375rem .875rem;
    font-size: .8125rem;
}

.tablero .panel {
    padding: 1rem;
    border-radius: 1.25rem;
    box-shadow: none;
}

.tablero .panel h2 {
    font-size: 1.125rem;
}

.tablero .panel__meta {
    margin-bottom: .75rem;
}

.tablero .panel--totales__cuerpo {
    grid-template-columns: minmax(0, 1fr);
    gap: .875rem;
}

.tablero .panel--totales__lateral .otros-votos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tablero__tabla,
.tablero__ranking {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 0;
    overflow: hidden;
}

.tablero__tabla[hidden],
.tablero__ranking[hidden] {
    display: none;
}

.tablero__tabla .panel__barra,
.tablero__ranking .panel__barra {
    flex: none;
    margin: 0;
    gap: .5rem;
}

.tablero__tabla .segmentos button,
.tablero__ranking .segmentos button {
    padding: .375rem .75rem;
    font-size: .8125rem;
}

.tablero__tabla .tabla-scroll {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

.tablero__tabla .nota,
.tablero__ranking .nota {
    flex: none;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Controles de la bandeja en una sola línea: unidad (o unidad y orden del ranking) y filtro. */
.bandeja__controles {
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.bandeja__controles .campo-select,
.bandeja__controles .campo-buscar {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    min-width: 0;
    white-space: nowrap;
    color: var(--text-soft);
    font-size: .75rem;
    font-weight: 700;
}

.bandeja__controles select,
.bandeja__controles input {
    min-width: 0;
    min-height: 2.25rem;
    padding: .25rem .625rem;
    border: 1px solid var(--border-strong);
    border-radius: .75rem;
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    font-size: .8125rem;
}

.bandeja__controles .campo-buscar {
    flex: 1 1 auto;
    max-width: 18rem;
    margin-left: auto;
}

.bandeja__controles .campo-buscar input {
    width: 100%;
}

/* El nombre de la fila elige la unidad: botón con el aspecto del texto de la celda. */
.tabla__elegir {
    cursor: pointer;
    max-width: 100%;
    padding: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
}

.tabla__elegir:hover {
    color: var(--orange-700);
}

html[data-theme="dark"] .tabla__elegir:hover {
    color: var(--orange-400);
}

.tabla__elegir {
    display: block;
}

@media (min-width: 641px) {
    .tabla__elegir .tabla__nombre {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Mesa con acta en una sola de las dos fuentes (TREP y cómputo oficial). */
.tabla__marca {
    display: block;
    max-width: 100%;
    margin-top: .125rem;
    overflow: hidden;
    color: var(--orange-700);
    font-size: .6875rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme="dark"] .tabla__marca {
    color: var(--orange-400);
}

.tabla__ausente td,
.tabla__ausente .tabla__nombre {
    color: var(--text-muted);
}

/* Fuente aún no publicada: el aviso ocupa el lugar del tablero, con el ancho de lectura de la portada. */
.portal > .estado-vacio {
    width: min(100%, 48rem);
    margin: 2rem auto;
}

.ranking__titulo {
    flex: none;
    margin: 0;
    color: var(--text);
    font-size: .875rem;
    font-weight: 800;
}

.ranking-lista {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 .25rem 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.ranking-lista__boton {
    cursor: pointer;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) minmax(4rem, 30%) 6.5rem;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 2.25rem;
    padding: .25rem .5rem;
    border-radius: .625rem;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .8125rem;
    text-align: left;
}

.ranking-lista__boton:hover {
    background: var(--surface-soft);
}

.ranking-lista__boton[aria-current="true"] {
    background: color-mix(in srgb, var(--orange-500) 12%, transparent);
    font-weight: 800;
}

.ranking-lista__pos {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.ranking-lista__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ranking-lista__barra {
    height: .5rem;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--surface-soft);
}

.ranking-lista__relleno {
    display: block;
    height: 100%;
    border-radius: 9999px;
}

.ranking-lista__valor {
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Separador de la bandeja (tablet y escritorio): se arrastra o se mueve con las flechas. */
.bandeja__separador {
    flex: none;
    position: relative;
    height: .75rem;
    margin: 0 -1rem;
    cursor: row-resize;
    border-radius: 9999px;
    touch-action: none;
}

.bandeja__separador::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: .25rem;
    border-radius: 9999px;
    background: var(--border-strong);
    translate: -50% -50%;
}

.bandeja__separador:hover::before,
.bandeja__separador.es-arrastrando::before {
    background: var(--orange-500);
}

.bandeja__separador:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.hoja__asa {
    display: none;
}

/* --- Escritorio y tablet horizontal (≥ 1024 px): panel (25 %, entre 320 y 420 px) y el mapa en el resto ---------- */

@media (min-width: 1024px) {
    .tablero {
        display: grid;
        grid-template-columns: clamp(320px, 25%, 420px) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
    }

    .tablero__panel {
        border-right: 1px solid var(--border);
    }

    .hoja__asa {
        display: none;
    }
}

/* Pantalla ancha y baja (tablet horizontal): sin la nota de la tabla, para que entren más filas. */
@media (min-width: 1024px) and (max-height: 860px) {
    .tablero__tabla .nota {
        display: none;
    }
}

/* --- Tablet vertical (641 a 1023 px): el mapa a todo el ancho y el panel en un cajón superpuesto -------------- */

@media (min-width: 641px) and (max-width: 1023px) {
    .tablero__mapa {
        position: absolute;
        inset: 0;
    }

    .tablero__panel {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 20;
        width: min(26rem, calc(100% - 3rem));
        border-right: 1px solid var(--border-strong);
        box-shadow: var(--card-shadow);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }

    .tablero__panel.es-abierto {
        transform: none;
        visibility: visible;
        transition: transform .2s ease;
    }

    .hoja__asa {
        display: none;
    }

    .tablero__cerrar-panel {
        display: inline-flex;
    }

    #botonPanel {
        display: inline-flex;
    }
}

@media (min-width: 641px) and (pointer: coarse) {
    .bandeja__separador {
        height: 2.75rem;
        margin-top: -.75rem;
        margin-bottom: -1rem;
    }
}

/* --- Celular (≤ 640 px): mapa a pantalla completa y hoja inferior de tres alturas con las cinco pestañas -------- */

@media (max-width: 640px) {
    .tablero__mapa {
        position: absolute;
        inset: 0;
        background: transparent;
    }

    /* La leyenda va arriba, debajo de las herramientas: abajo la tapa la hoja. */
    .mapa__leyenda--fija,
    .con-bandeja .mapa__leyenda--fija {
        top: 4rem;
        right: auto;
        bottom: auto;
        left: max(.625rem, env(safe-area-inset-left));
        max-width: calc(100% - 5rem);
        max-height: calc(100% - var(--alto-hoja-actual, 10rem) - 6.5rem);
    }

    /* La atribución, justo encima de la hoja. */
    .mapa__atribucion {
        bottom: calc(var(--alto-hoja-actual, 10rem) + .25rem);
    }

    .tablero__panel {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 10;
        height: var(--alto-arrastre, var(--alto-hoja));
        max-height: 100%;
        overflow: hidden;
        border: 1px solid var(--border-strong);
        border-bottom: 0;
        border-radius: 1.25rem 1.25rem 0 0;
        box-shadow: 0 -8px 30px rgba(15, 23, 42, .18);
    }

    .tablero__panel[data-altura="peek"] { --alto-hoja: 10.5rem; }
    .tablero__panel[data-altura="medio"] { --alto-hoja: 56%; }
    .tablero__panel[data-altura="completo"] { --alto-hoja: calc(100% - 3.25rem); }

    .hoja__asa {
        cursor: grab;
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 2.75rem;
        margin-bottom: -.875rem;
        padding: 0;
        background: transparent;
        touch-action: none;
    }

    .hoja__agarre {
        width: 2.75rem;
        height: .3125rem;
        border-radius: 9999px;
        background: var(--border-strong);
    }

    .tablero__barra-pestanas {
        padding: 0 .5rem;
    }

    .tablero__seccion {
        padding: .75rem .875rem 1rem;
    }

    /* La bandeja cubre la hoja: más alta que en pantalla ancha. */
    .tablero__bandeja {
        z-index: 12;
        height: var(--alto-bandeja, 62%);
        padding: 0 .75rem .5rem;
        border-radius: 1.25rem 1.25rem 0 0;
    }

    .con-bandeja .mapa__atribucion {
        bottom: calc(var(--alto-bandeja, 62%) + .25rem);
    }

    .bandeja__separador {
        height: 2.25rem;
        margin: 0 -.75rem -.75rem;
    }

    /* Ficha compacta: el encabezado de la selección ocupa poco y los resultados quedan a la vista. */
    .tablero .panel--totales__cabecera {
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .tablero .panel--totales__cabecera > div:first-child {
        min-width: 0;
    }

    .tablero .panel__eyebrow {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tablero .panel__meta {
        display: -webkit-box;
        margin-bottom: .5rem;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .tablero .panel__acciones .boton-secundario {
        padding: .375rem .75rem;
        font-size: .8125rem;
        white-space: nowrap;
    }

    .ranking-lista__boton {
        grid-template-columns: 2rem minmax(0, 1fr) 5.5rem;
        min-height: 2.75rem;
    }

    .ranking-lista__barra {
        display: none;
    }

    .bandeja__controles {
        flex-wrap: wrap;
    }

    .bandeja__controles .campo-buscar {
        max-width: none;
    }

    .bandeja__cabecera .bandeja__controles {
        flex-basis: 100%;
        order: 1;
    }

    /* La tabla, en un renglón: «Ver por» y el filtro (su rótulo queda para los lectores de pantalla). */
    .bandeja__cabecera .bandeja__controles[data-para="tabla"] {
        flex-wrap: nowrap;
    }

    .bandeja__controles[data-para="tabla"] .campo-buscar {
        flex: 1 1 auto;
        margin-left: 0;
    }

    .bandeja__controles[data-para="tabla"] .campo-buscar > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

@media (pointer: coarse) {
    .capas__opacidad input[type="range"] {
        min-height: 44px;
    }

    .capas__opcion,
    .ruta-geo__paso,
    .tablero__tabla .segmentos button,
    .tablero__ranking .segmentos button,
    .capas__detalle .segmentos button {
        min-height: 44px;
    }

    .filtros__niveles select,
    .capas__detalle select,
    .bandeja__controles select,
    .bandeja__controles input {
        min-height: 44px;
    }

    .ranking-lista__boton {
        min-height: 44px;
    }

    .tabla__elegir {
        min-height: 44px;
    }

    /* La celda del nombre no suma su relleno al del botón: la fila mide 44 px. */
    .tablero .tabla tbody th {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tablero__panel {
        transition: none;
    }
}

/* --- Mapa del país (ADR-022): barra apilada de distritos ganados y de bancas, muestras de color de la tabla -------- */
.pais-apilada {
    display: grid;
    gap: .5rem;
    margin: .75rem 0 1rem;
}

.pais-apilada[hidden] {
    display: none;
}

.pais-apilada__titulo {
    margin: 0;
    color: var(--text-soft);
    font-size: .8125rem;
    font-weight: 700;
}

.pais-apilada__barra {
    display: flex;
    overflow: hidden;
    height: .875rem;
    border-radius: 9999px;
    background: var(--border);
}

.pais-apilada__parte {
    min-width: 2px;
    height: 100%;
}

.pais-apilada__parte + .pais-apilada__parte {
    box-shadow: inset 1px 0 0 var(--surface-solid);
}

.pais-apilada__lista {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .875rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-soft);
    font-size: .8125rem;
}

.pais-apilada__lista li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.pais-apilada__lista strong {
    color: var(--text);
}

.pais-apilada__muestra,
.tabla__muestra {
    display: inline-block;
    flex: none;
    width: .75rem;
    height: .75rem;
    border-radius: .1875rem;
}

.tabla__muestra {
    margin-right: .375rem;
    vertical-align: -.0625rem;
}

.panel--pais .nota,
.panel--pais-bancas .nota {
    margin-top: .75rem;
}

.ficha__listas li {
    display: flex;
    align-items: baseline;
    gap: .25rem;
}