/* Hallmark · genre: modern-minimal · macrostructure: Map / Diagram · theme: custom institucional v2
 * paper-band: light · display-style: grotesk + mono-paired · accent-hue: guinda oklch(40% 0.155 6)
 * enrichment: none (tipografía y datos) · nav/footer: heredados del layout institucional
 * motion: hairline-hover · skeleton-shimmer · lightbox-fade
 * states: default · hover · focus · active · disabled · loading · error · empty
 * nav interno: tab strip (Lista / Filtros) en el panel izquierdo
 * expediente: datos → evidencias → resultados del proyecto (<details> plegable)
 * móvil (≤768px): pila vertical lienzo → panel izquierdo → expediente → pie, scroll de página
 * pre-emit critique: P5 H5 E4 S5 R5 V4
 */

/* ================================ */
/* TOKENS                           */
/* ================================ */

:root {
    /* Superficies: blanco tintado hacia el guinda, nunca #fff puro. */
    --papel: oklch(98.6% 0.004 6);
    --papel-2: oklch(96.4% 0.006 6);
    --papel-3: oklch(93.8% 0.008 6);

    --tinta: oklch(22% 0.02 6);
    --tinta-2: oklch(46% 0.016 6);
    --tinta-3: oklch(63% 0.012 6);

    --regla: oklch(89% 0.008 6);
    --regla-firme: oklch(79% 0.012 6);

    /* Guinda institucional del municipio: rgb(144 12 63). */
    --acento: oklch(40% 0.155 6);
    --acento-oscuro: oklch(33% 0.14 6);
    --acento-tinte: oklch(95.5% 0.022 6);
    --acento-papel: oklch(99% 0 0);
    --foco: oklch(50% 0.2 6);

    /* Verde municipal, exclusivo para señalar estado (evidencias presentes). */
    --senal: oklch(51% 0.09 152);
    --senal-tinte: oklch(95.5% 0.03 152);

    /* Verde de mapa: cúmulos y trazos del filtro geográfico (#1e5c50 en el JS). */
    --trazo: #1e5c50;
    --trazo-tinte: color-mix(in srgb, #1e5c50 18%, white);

    --fuente-display: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --fuente-cuerpo: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
    --fuente-dato: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --espacio-3xs: 0.25rem;
    --espacio-2xs: 0.375rem;
    --espacio-xs: 0.5rem;
    --espacio-sm: 0.75rem;
    --espacio-md: 1rem;
    --espacio-lg: 1.5rem;
    --espacio-xl: 2rem;

    --texto-2xs: 0.6875rem;
    --texto-xs: 0.75rem;
    --texto-sm: 0.8125rem;
    --texto-md: 0.875rem;
    --texto-lg: 1.0625rem;
    --texto-xl: 1.25rem;

    /* Superficie del visor: sobre ella el papel institucional no aplica. */
    --visor-fondo: oklch(18% 0.02 6 / 0.94);
    --visor-tenue: oklch(100% 0 0 / 0.6);
    --visor-borde: oklch(100% 0 0 / 0.25);
    --visor-hover: oklch(100% 0 0 / 0.12);
    --visor-activo: oklch(100% 0 0 / 0.2);

    --radio: 4px;
    --radio-chip: 2px;

    --salida: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-corta: 140ms;
    --dur-media: 220ms;

    --capa-flotante: 20;
    --capa-visor: 60;

    /* Lo calcula el JS a partir del alto real del encabezado institucional. */
    --alto-cromo: 190px;
}

/* ================================ */
/* ARMAZÓN — consola de tres paneles */
/* ================================ */

html,
body {
    overflow-x: clip;
}

.consola {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    height: calc(100dvh - var(--alto-cromo));
    min-height: 34rem;
    background-color: var(--papel);
    border-top: 1px solid var(--regla);
    border-bottom: 1px solid var(--regla);
    color: var(--tinta);
    font-family: var(--fuente-cuerpo);
}

.consola-cuerpo {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr) 23rem;
    min-height: 0;
}

/* Sin actividad seleccionada el expediente se oculta y el mapa gana su espacio. */
.consola-cuerpo.sin-expediente {
    grid-template-columns: 20rem minmax(0, 1fr);
}

.consola-cuerpo.sin-expediente .panel-derecho {
    display: none;
}

.panel {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    background-color: var(--papel);
}

.panel-izquierdo {
    border-right: 1px solid var(--regla);
}

.panel-derecho {
    border-left: 1px solid var(--regla);
    background-color: var(--papel-2);
}

/* Título de la página: lo rotula el encabezado institucional, pero el documento
   necesita su encabezado para lectores de pantalla. */
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ================================ */
/* PANEL IZQUIERDO — tabs           */
/* ================================ */

/* Sobre las tabs: la búsqueda queda a mano en cualquiera de las dos. */
.panel-buscador {
    flex-shrink: 0;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.campo-buscador {
    position: relative;
}

.campo-buscador svg {
    position: absolute;
    top: 50%;
    left: 0.625rem;
    translate: 0 -50%;
    color: var(--tinta-3);
    pointer-events: none;
}

.buscador {
    width: 100%;
    padding: 0.4375rem 0.75rem 0.4375rem 2rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta);
    outline: none;
    transition: border-color var(--dur-corta) var(--salida);
}

.buscador::placeholder {
    color: var(--tinta-3);
}

.buscador:hover {
    border-color: var(--tinta-3);
}

.buscador:focus-visible {
    border-color: var(--acento);
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.tab {
    flex: 1;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 2px solid transparent;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-3);
    cursor: pointer;
    transition: color var(--dur-corta) var(--salida),
                border-color var(--dur-corta) var(--salida),
                background-color var(--dur-corta) var(--salida);
}

.tab:hover {
    background-color: var(--papel-3);
    color: var(--tinta-2);
}

.tab:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

.tab:active {
    color: var(--acento-oscuro);
}

.tab[aria-selected='true'] {
    border-bottom-color: var(--acento);
    background-color: var(--papel);
    color: var(--acento);
}

/* Cada tab ocupa el alto libre del panel y administra su propio scroll. */
.tab-cuerpo {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.tab-cuerpo[hidden] {
    display: none;
}

/* ================================ */
/* PANEL IZQUIERDO — filtros        */
/* ================================ */

/* Con scroll propio: si no, el contenido desborda el panel y se monta sobre el
   pie de la página. El precio es que Choices recorta su desplegable al borde
   inferior; por eso los selectores van arriba, donde tienen sitio para abrirse. */
.filtros {
    gap: var(--espacio-md);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-md);
}

.filtros-nota {
    font-size: var(--texto-xs);
    line-height: 1.5;
    color: var(--tinta-3);
}

.campo-etiqueta {
    display: block;
    margin-bottom: var(--espacio-2xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.campo-conteo {
    margin-top: var(--espacio-2xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--trazo);
}

.campo-conteo-error {
    color: var(--acento);
}

.campo-conteo:empty {
    display: none;
}

.capas {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    gap: var(--espacio-3xs);
    padding-top: var(--espacio-xs);
    border-top: 1px solid var(--regla);
}

.capas .campo-etiqueta {
    margin-bottom: var(--espacio-2xs);
    padding: 0;
}

.capas-regla {
    margin: var(--espacio-3xs) 0;
    border: 0;
    border-top: 1px solid var(--regla);
}

.capa {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    margin-left: -0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radio);
    font-size: var(--texto-sm);
    color: var(--tinta-2);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida),
                color var(--dur-corta) var(--salida);
}

.capa:hover {
    background-color: var(--papel-3);
    color: var(--tinta);
}

.capa:has(:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.capa:has(:checked) {
    color: var(--trazo);
    font-weight: 600;
}

.capa:has(:disabled) {
    color: var(--tinta-3);
    cursor: progress;
}

.capa input {
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    accent-color: var(--trazo);
    cursor: inherit;
}

.capa input:focus-visible {
    outline: none;
}

.boton-limpiar {
    align-self: flex-start;
    flex-shrink: 0;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--tinta-2);
    cursor: pointer;
    transition: border-color var(--dur-corta) var(--salida),
                background-color var(--dur-corta) var(--salida),
                color var(--dur-corta) var(--salida);
}

.boton-limpiar:hover:not(:disabled) {
    border-color: var(--acento);
    background-color: var(--acento-tinte);
    color: var(--acento);
}

.boton-limpiar:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.boton-limpiar:active:not(:disabled) {
    color: var(--acento-oscuro);
}

.boton-limpiar:disabled {
    color: var(--tinta-3);
    cursor: not-allowed;
}

/* Filtros geográficos: selectores Choices.js con el lenguaje del buscador. */
.campo-filtro {
    flex-shrink: 0;
}

/* Estado de carga / error: el select nativo antes de montar Choices. */
.campo-filtro select:disabled {
    width: 100%;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel-2);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta-3);
    cursor: not-allowed;
}

.campo-filtro .choices {
    margin-bottom: 0;
}

.campo-filtro .choices__inner {
    min-height: 0;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta);
    transition: border-color var(--dur-corta) var(--salida);
}

.campo-filtro .choices:hover .choices__inner {
    border-color: var(--tinta-3);
}

.campo-filtro .choices.is-focused .choices__inner,
.campo-filtro .choices.is-open .choices__inner {
    border-color: var(--acento);
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.campo-filtro .choices__placeholder {
    color: var(--tinta-3);
    opacity: 1;
}

.campo-filtro .choices__list--dropdown,
.campo-filtro .choices__list[aria-expanded] {
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    z-index: var(--capa-flotante);
}

.campo-filtro .choices__input {
    background-color: var(--papel);
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-md);
    color: var(--tinta);
}

.campo-filtro .choices__list--dropdown .choices__item {
    font-size: var(--texto-sm);
    color: var(--tinta);
}

.campo-filtro .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--acento-tinte);
    color: var(--acento);
}

/* ================================ */
/* PANEL IZQUIERDO — navegador      */
/* ================================ */

.nav-cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-xs);
    min-height: 2.75rem;
    padding: 0 var(--espacio-md);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel);
}

.nav-titulo {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-conteo {
    margin-left: auto;
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-3);
    white-space: nowrap;
}

.boton-volver {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3xs);
    margin-left: -0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radio);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--acento);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.boton-volver:hover {
    background-color: var(--acento-tinte);
}

.boton-volver:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.boton-volver:active {
    color: var(--acento-oscuro);
}

/* Descripción del proyecto seleccionado, sobre sus actividades. */

.descripcion-proyecto {
    flex-shrink: 0;
    max-height: 40%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-sm) var(--espacio-md);
    border-bottom: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.descripcion-etiqueta {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acento);
}

.descripcion-texto {
    margin-top: var(--espacio-2xs);
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}

.descripcion-texto.plegada {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.descripcion-alternar {
    margin-top: var(--espacio-2xs);
    margin-left: -0.375rem;
    padding: 0.25rem 0.375rem;
    border-radius: var(--radio);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--acento);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.descripcion-alternar:hover {
    background-color: var(--acento-tinte);
}

.descripcion-alternar:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 1px;
}

.descripcion-alternar:active {
    color: var(--acento-oscuro);
}

.lista {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fila {
    display: grid;
    grid-template-columns: 0.375rem minmax(0, 1fr);
    gap: var(--espacio-sm);
    padding: var(--espacio-sm) var(--espacio-md);
    border-bottom: 1px solid var(--regla);
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.fila::before {
    content: '';
    width: 0.375rem;
    height: 0.375rem;
    margin-top: 0.375rem;
    border-radius: var(--radio-chip);
    background-color: var(--regla-firme);
    transition: background-color var(--dur-corta) var(--salida);
}

.fila:hover {
    background-color: var(--papel-2);
}

.fila:hover::before {
    background-color: var(--tinta-3);
}

.fila:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

.fila:active {
    background-color: var(--papel-3);
}

.fila.activa {
    background-color: var(--acento-tinte);
}

.fila.activa::before {
    background-color: var(--acento);
}

.fila.activa .fila-titulo {
    color: var(--acento);
}

.fila-titulo {
    font-size: var(--texto-sm);
    font-weight: 600;
    line-height: 1.35;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.fila-datos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2xs);
    margin-top: var(--espacio-2xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-3);
}

.marca {
    display: inline-flex;
    align-items: center;
    padding: 0.0625rem 0.3125rem;
    border: 1px solid var(--regla);
    border-radius: var(--radio-chip);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-2);
    white-space: nowrap;
}

.marca-senal {
    border-color: var(--senal);
    background-color: var(--senal-tinte);
    color: var(--senal);
}

/* Estados vacío y error del panel izquierdo. */

.aviso {
    padding: var(--espacio-xl) var(--espacio-md);
    text-align: center;
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-3);
}

.aviso-error {
    color: var(--acento);
}

.aviso small {
    display: block;
    margin-top: var(--espacio-xs);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    color: var(--tinta-3);
    overflow-wrap: anywhere;
}

/* Estado de carga. */

.esqueleto {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-xs);
    padding: var(--espacio-sm) var(--espacio-md);
    border-bottom: 1px solid var(--regla);
}

.hueso {
    display: block;
    height: 0.625rem;
    border-radius: var(--radio-chip);
    background-image: linear-gradient(90deg, var(--papel-3) 25%, var(--papel-2) 45%, var(--papel-3) 65%);
    background-size: 300% 100%;
    animation: brillo 1.4s ease-in-out infinite;
}

.hueso-corto {
    height: 0.5rem;
}

@keyframes brillo {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

/* ================================ */
/* PANEL CENTRAL — mapa             */
/* ================================ */

.lienzo {
    position: relative;
    min-width: 0;
    min-height: 0;
}

#mapa {
    width: 100%;
    height: 100%;
    background-color: var(--papel-3);
}

.leyenda {
    position: absolute;
    bottom: var(--espacio-md);
    left: var(--espacio-md);
    z-index: var(--capa-flotante);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-sm);
    padding: 0.375rem var(--espacio-sm);
    border: 1px solid var(--regla-firme);
    border-radius: var(--radio);
    background-color: var(--papel);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    letter-spacing: 0.02em;
    color: var(--tinta-2);
}

.leyenda-clave {
    display: flex;
    align-items: center;
    gap: var(--espacio-3xs);
    white-space: nowrap;
}

.leyenda-pin,
.leyenda-cumulo {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--acento);
}

.leyenda-cumulo {
    background-color: var(--trazo);
    box-shadow: 0 0 0 3px var(--trazo-tinte);
}

/* ================================ */
/* PANEL DERECHO — expediente       */
/* ================================ */

.expediente {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--espacio-lg);
}

.expediente-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-sm);
    margin-top: 20%;
    padding: 0 var(--espacio-md);
    text-align: center;
    font-size: var(--texto-sm);
    line-height: 1.5;
    color: var(--tinta-3);
}

.expediente-vacio svg {
    color: var(--regla-firme);
}

.expediente-proyecto {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--acento);
    overflow-wrap: anywhere;
}

.expediente-titulo {
    margin-top: var(--espacio-2xs);
    font-family: var(--fuente-display);
    font-size: var(--texto-xl);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.expediente-datos {
    margin-top: var(--espacio-lg);
    border-top: 1px solid var(--regla);
}

.expediente-datos > div {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: var(--espacio-sm);
    padding: var(--espacio-xs) 0;
    border-bottom: 1px solid var(--regla);
}

.expediente-datos dt {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-3);
    padding-top: 0.125rem;
}

.expediente-datos dd {
    font-size: var(--texto-sm);
    line-height: 1.45;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.expediente-datos dd.dato {
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    font-variant-numeric: tabular-nums;
}

.expediente-seccion {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-xs);
    margin-top: var(--espacio-lg);
    margin-bottom: var(--espacio-sm);
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tinta-2);
}

.expediente-seccion b {
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

.evidencias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-xs);
}

.evidencia-imagen {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel-3);
    cursor: zoom-in;
    transition: border-color var(--dur-corta) var(--salida);
}

.evidencia-imagen:hover {
    border-color: var(--acento);
}

.evidencia-imagen:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
}

.evidencia-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Resultados de las variables de eficiencia del proyecto. */

.variables-nota {
    margin-top: calc(var(--espacio-sm) * -1 + var(--espacio-3xs));
    margin-bottom: var(--espacio-sm);
    font-size: var(--texto-xs);
    line-height: 1.45;
    color: var(--tinta-3);
}

.variables {
    display: flex;
    flex-direction: column;
    gap: var(--espacio-3xs);
}

.variable {
    border: 1px solid var(--regla);
    border-radius: var(--radio);
    background-color: var(--papel);
}

.variable[open] {
    border-color: var(--regla-firme);
}

.variable-cabecera {
    display: flex;
    align-items: baseline;
    gap: var(--espacio-xs);
    padding: var(--espacio-xs) var(--espacio-sm);
    font-size: var(--texto-sm);
    line-height: 1.35;
    color: var(--tinta);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--dur-corta) var(--salida);
}

/* Safari dibuja su propio triángulo por fuera de list-style. */
.variable-cabecera::-webkit-details-marker {
    display: none;
}

.variable-cabecera:hover {
    background-color: var(--papel-3);
}

.variable-cabecera:focus-visible {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
}

.variable-cabecera:active {
    background-color: var(--papel-3);
}

.variable-nombre {
    flex: 1;
    min-width: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Cifra más reciente: visible con la variable plegada. */
.variable-ultimo {
    flex-shrink: 0;
    font-family: var(--fuente-dato);
    font-size: var(--texto-md);
    font-variant-numeric: tabular-nums;
    color: var(--acento);
}

.capturas {
    border-top: 1px solid var(--regla);
    background-color: var(--papel-2);
}

.captura {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--espacio-sm);
    padding: var(--espacio-xs) var(--espacio-sm);
    border-bottom: 1px solid var(--regla);
}

.captura:last-child {
    border-bottom: 0;
}

.captura-cifra {
    font-family: var(--fuente-dato);
    font-size: var(--texto-sm);
    font-variant-numeric: tabular-nums;
    color: var(--tinta);
    overflow-wrap: anywhere;
}

.captura-fecha {
    font-family: var(--fuente-dato);
    font-size: var(--texto-2xs);
    font-variant-numeric: tabular-nums;
    color: var(--tinta-3);
}

.captura-observaciones {
    margin-top: var(--espacio-3xs);
    font-size: var(--texto-xs);
    line-height: 1.45;
    color: var(--tinta-2);
    overflow-wrap: anywhere;
}

.capturas .aviso {
    padding: var(--espacio-sm);
}

/* ================================ */
/* VISOR DE EVIDENCIAS              */
/* ================================ */

.visor[hidden] {
    display: none;
}

.visor {
    position: fixed;
    inset: 0;
    z-index: var(--capa-visor);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background-color: var(--visor-fondo);
    animation: aparecer var(--dur-media) var(--salida);
}

@keyframes aparecer {
    from { opacity: 0; }
    to { opacity: 1; }
}

.visor-barra {
    display: flex;
    align-items: center;
    gap: var(--espacio-md);
    padding: var(--espacio-sm) var(--espacio-md);
    color: var(--acento-papel);
}

.visor-nombre {
    min-width: 0;
    flex: 1;
    font-size: var(--texto-sm);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.visor-indice {
    font-family: var(--fuente-dato);
    font-size: var(--texto-xs);
    font-variant-numeric: tabular-nums;
    color: var(--visor-tenue);
    white-space: nowrap;
}

.visor-figura {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 var(--espacio-md);
}

.visor-figura img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.visor-pie {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    padding: var(--espacio-md);
}

.visor-boton {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-3xs);
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--visor-borde);
    border-radius: var(--radio);
    background-color: transparent;
    font-family: var(--fuente-cuerpo);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--acento-papel);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-corta) var(--salida);
}

.visor-boton:hover:not(:disabled) {
    background-color: var(--visor-hover);
}

.visor-boton:focus-visible {
    outline: 2px solid var(--acento-papel);
    outline-offset: 2px;
}

.visor-boton:active:not(:disabled) {
    background-color: var(--visor-activo);
}

.visor-boton:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.visor-boton-cerrar {
    border-color: transparent;
}

/* ================================ */
/* ADAPTACIÓN A PANTALLAS ESTRECHAS */
/* ================================ */

@media (max-width: 1180px) {
    .consola-cuerpo {
        grid-template-columns: 17rem minmax(0, 1fr) 19rem;
    }

    .consola-cuerpo.sin-expediente {
        grid-template-columns: 17rem minmax(0, 1fr);
    }

    .expediente {
        padding: var(--espacio-md);
    }
}

@media (max-width: 1023px) {
    /* Tabletas conservan los paneles laterales; solo se estrechan las columnas. */
    .consola-cuerpo {
        grid-template-columns: 15rem minmax(0, 1fr) 17rem;
    }

    .consola-cuerpo.sin-expediente {
        grid-template-columns: 15rem minmax(0, 1fr);
    }

    .expediente {
        padding: var(--espacio-md);
    }
}

@media (max-width: 768px) {
    /* En móvil la consola se apila: primero el lienzo, debajo el panel izquierdo
       y, con actividad seleccionada, el expediente al final. Sin altura fija:
       la página recupera su scroll natural y el pie cierra la pila. */
    .consola {
        height: auto;
        min-height: 0;
    }

    .consola-cuerpo,
    .consola-cuerpo.sin-expediente {
        grid-template-columns: minmax(0, 1fr);
    }

    .lienzo {
        order: -1;
        height: 60vh;
        min-height: 20rem;
        border-bottom: 1px solid var(--regla);
    }

    .panel-izquierdo,
    .panel-derecho {
        border-left: 0;
        border-right: 0;
        border-bottom: 1px solid var(--regla);
    }

    .panel-izquierdo .lista {
        max-height: 21rem;
    }

    .expediente-vacio {
        margin-top: var(--espacio-lg);
        margin-bottom: var(--espacio-lg);
    }
}

@media (max-width: 420px) {
    .expediente-datos > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-3xs);
    }

    .evidencias {
        grid-template-columns: minmax(0, 1fr);
    }

    .captura {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--espacio-3xs);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hueso {
        animation: none;
    }

    .visor {
        animation-duration: 1ms;
    }
}