/* =====================================================================
   incendios-espacios-protegidos.css — Mapa, mini-mapas y gráficos
   del reportaje de incendios en espacios naturales protegidos
   ===================================================================== */

:root {
    --rojo-incendios: #D0021B;
    --azul-ep: #4A90E2;
    --verde-ep: #41853F;
    --gris-incendios: #cececd;
    --texto: #1a1a1a;
    --fuente: 'Encode Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Bloques de título / fuente (comunes a todos los gráficos) ---- */
/* OJO: el CSS del artículo de elDiario mete text-align:center por herencia, así
   que fijamos text-align:left en los bloques raíz (títulos, fuente y todos los
   [id^="cont-"]). Lo que quiera ir centrado declara `center` en su regla,
   que gana al valor heredado. */
.titulo-esprot {
    font-family: var(--fuente);
    color: var(--texto);
    margin: 32px 0 12px;
    text-align: left;
}
.titulo-esprot h2 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 4px 0 8px;
}
.titulo-esprot p {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.45;
    margin: 0;
    color: #333;
}

/* Pie de fuente bajo cada gráfico */
.fuente-esprot {
    font-family: var(--fuente);
    font-size: 12px;
    color: #888;
    margin: 8px 0 40px;
    text-align: left;
}

/* ---- Contenedores de gráfico ---- */
[id^="cont-"] {
    font-family: var(--fuente);
    text-align: left;
}

/* ---- Mapas (MapLibre) ---- */
.mapa-caja-esprot {
    width: 100%;
    height: 560px;                         /* fallback navegadores sin svh */
    height: clamp(560px, 80svh, 750px);    /* min 560 · objetivo 90svh · máx 800 */
    border-radius: 2px;
    overflow: hidden;
}
/* Botón "volver a la posición inicial" (dentro del grupo de zoom de MapLibre) */
.ctrl-volver-esprot {
    background-image: url('https://lab.eldiario.es/elections-maps/elecciones/autonomicas/iconos/volver/zoom_return.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
}

#cont-mapa-esprot { position: relative; }

/* ---- Leyenda: cajita blanca translúcida flotando dentro del mapa ---- */
.leyenda-esprot {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-direction: row;
    gap: 16px;
    font-family: var(--fuente);
    font-size: 12px;
    line-height: 14px;
    color: #333;
    background: rgba(255, 255, 255, 0.82);
    padding: 8px 10px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    pointer-events: none;                 /* no bloquea el arrastre del mapa */
}
.leyenda-item-esprot { display: inline-flex; align-items: center; gap: 6px; }
/* Recuadro relleno + borde del color de la línea del mapa. */
.leyenda-poligono-esprot {
    width: 14px; height: 10px; display: inline-block;
    border: 1px solid; box-sizing: border-box;
}
.leyenda-poligono-esprot.leyenda-fuego-esprot { background: #e26171; border-color: #8a0013; }
.leyenda-poligono-esprot.leyenda-ep-esprot { background: rgba(74, 144, 226, 0.4); border-color: #4A90E2; }

/* ===== Timeline: regla de años superpuesta al pie del mapa ===== */
.timeline-esprot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 34px 26px 12px;
    /* fondo DIFUMINADO: opaco abajo → transparente arriba */
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 35%, rgba(255, 255, 255, 0));
    font-family: var(--fuente);
    pointer-events: none;                          /* el mapa sigue arrastrable... */
}
.timeline-esprot > * { pointer-events: auto; } /* ...salvo botón y regla */

.timeline-pista-esprot { position: relative; height: 40px; }

/* input transparente por encima: solo captura arrastre/teclado */
.timeline-pista-esprot input[type="range"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 40px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.timeline-pista-esprot input[type="range"]::-webkit-slider-runnable-track,
.timeline-pista-esprot input[type="range"]::-moz-range-track { background: transparent; border: none; }
.timeline-pista-esprot input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 40px;
    background: transparent;                        /* thumb invisible: la pastilla la pintamos aparte */
    cursor: pointer;
}
.timeline-pista-esprot input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
}

/* ticks generados por JS */
.timeline-ticks-esprot { position: absolute; left: 0; right: 0; top: 16px; pointer-events: none; }
.tick-esprot {
    position: absolute;
    top: 0;
    width: 1px;
    background: #b4b4b4;
    transform: translateX(-50%);
}
.tick-esprot.tick-menor-esprot { height: 6px; }
.tick-esprot.tick-mayor-esprot { height: 12px; background: #7a7a7a; }
.tick-esprot .tick-anio-esprot {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #666;
    white-space: nowrap;
}

/* marcador: pastilla roja con el año + piquito hacia abajo */
.timeline-marcador-esprot {
    position: absolute;
    top: -2px;
    transform: translateX(-50%);
    background: var(--rojo-incendios);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}
.timeline-marcador-esprot::after {                         /* piquito */
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--rojo-incendios);
}
.timeline-marcador-esprot.oculto-esprot { display: none; } /* en modo total no hay año concreto */

/* botón "Ver total", arriba a la derecha de la regla */
.btn-total-esprot {
    position: absolute;
    top: 0;
    right: 26px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--texto);
    background: #fff;
    border: 1px solid var(--gris-incendios);
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
}
.btn-total-esprot.activo-esprot {            /* cuando "Total" está encendido */
    background: var(--rojo-incendios);
    border-color: var(--rojo-incendios);
    color: #fff;
}

/* ---- Tooltip único (compartido por mapas y gráficos D3) ---- */
#tooltip-esprot {
    position: absolute;
    z-index: 5;
    visibility: hidden;
    pointer-events: none;          /* CLAVE: si no, parpadea al robar el hover */
    max-width: 240px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
    padding: 8px 10px;
    font-family: var(--fuente);
    font-size: 13px;
    line-height: 1.35;
    color: var(--texto);
}
.tt-title-esprot { font-weight: 700; display: block; color: var(--rojo-incendios); margin-bottom: 4px; }
.tt-meta-esprot { color: #333; }
.tt-nota-esprot { color: #888; font-size: 11px; margin-top: 2px; }
/* Tipo de espacio en el tooltip del scatter: pegado al nombre, separado del dato */
.tt-tipo-esprot { display: block; font-size: 11px; color: #888; margin: -2px 0 7px; }
/* Bloque "Espacios protegidos afectados" del tooltip */
.tt-ep-titulo-esprot { font-weight: 600; font-size: 12px; color: #666; margin-top: 6px;  }
.tt-ep-lista-esprot { font-size: 12px; color: #666; line-height: 1.4; margin-top: 2px; }

/* ===== Mini-mapas de perímetros (incendio + espacios protegidos) ===== */
#cont-minis-esprot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
    container-type: inline-size;   /* nº de columnas según el ancho del CONTENEDOR */
}
/* Columnas fijas según el ancho del contenedor: <600 → 1, >=600 → 2, >=900 → 3 */
.minimapa-esprot { flex: 0 0 100%; }
@container (min-width: 600px) {
    .minimapa-esprot { flex: 0 0 calc(50% - 7px); }
}
@container (min-width: 900px) {
    .minimapa-esprot { flex: 0 0 calc(33.333% - 10px); }
}
.minimapa-titulo-esprot {
    font-family: var(--fuente);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--texto);
    /* Alto FIJO de 2 líneas y el texto pegado ABAJO: así, tenga el título 1 o 2
       líneas, todos los mapas de una fila arrancan a la misma altura. */
    min-height: 2.4em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0 0 1px;
}
.minimapa-subtitulo-esprot {
    font-family: var(--fuente);
    font-size: 12px;
    line-height: 1.35;
    min-height: 2.7em;             /* 2 líneas fijas (leyenda), para no descuadrar el alto */
    color: #666;
    margin: 0 0 6px;
}
/* Claves de color del subtítulo-leyenda: "superficie quemada" (rojo) y
   "áreas protegidas" (fondo azul), a juego con los colores del mini-mapa. */
.ley-rojo-esprot { color: var(--rojo-incendios); font-weight: 700; }
.ley-azul-esprot {
    background: var(--azul-ep);
    color: #fff;
    font-weight: 600;
    padding: 0 4px;
    border-radius: 2px;
}
.minimapa-caja-esprot {
    width: 100%;
    height: 380px;                 /* CLAVE: sin altura, MapLibre no se ve */
    border-radius: 2px;
    overflow: hidden;
    position: relative;            /* para que el spinner de carga se coloque bien */
}
/* Si hay UN solo mini-mapa: ancho completo y más grande (como mapa de sección) */
.minimapa-esprot:only-child { flex: 0 0 100%; }
.minimapa-esprot:only-child .minimapa-caja-esprot { height: 480px; }
.minimapa-esprot:only-child .minimapa-titulo-esprot {
    font-size: 24px;
    min-height: 0;                 /* solo, no hay fila que alinear */
    display: block;
    margin: 4px 0 6px;
}
.minimapa-esprot:only-child .minimapa-subtitulo-esprot {
    font-size: 15px;
    line-height: 1.45;
    min-height: 0;
    color: #333;
    margin: 0 0 10px;
}

/* ===== Gráficos D3 (A evolución, B ranking, C scatter) ===== */
.grafico-esprot svg { display: block; width: 100%; height: auto; }
.eje-esprot text { font-family: var(--fuente); font-size: 13px; fill: #939393; }
.eje-esprot line { stroke: #c5c5c5; stroke-dasharray: 3; stroke-width: 0.5; }
.eje-esprot path { stroke-width: 0; }
.eje-titulo-esprot { font-family: var(--fuente); font-size: 12px; fill: #939393; }

/* ---- Tabla ranking (gráfico B): compacta y limpia ---- */
.tabla-esprot { width: 100%; border-collapse: collapse; font-family: var(--fuente); font-size: 13px; }
.tabla-esprot thead th {
    text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.03em; color: #999; border-bottom: 1px solid #ddd; padding: 5px 8px;
}
.tabla-esprot thead th.th-sup-esprot { text-align: left; }
.tabla-esprot tbody tr { border-bottom: 1px solid #f0f0f0; }
.tabla-esprot td { padding: 6px 8px; vertical-align: middle; }
.td-lugar-esprot { line-height: 1.15; }
.td-lugar-esprot .td-muni-esprot { font-weight: 600; color: var(--texto); }
.td-lugar-esprot .td-prov-esprot { display: block; font-size: 10px; color: #aaa; text-transform: uppercase; }
/* Superficie: nº a la izquierda + barra gruesa en un carril que ocupa el resto. */
.td-sup-esprot { width: 60%; }
.sup-wrap-esprot { display: flex; align-items: center; gap: 10px; }
.sup-wrap-esprot .sup-valor-esprot { flex: 0 0 auto; min-width: 72px; font-weight: 600; color: var(--texto); }
.sup-wrap-esprot .barra-track-esprot { flex: 1 1 auto; }
.sup-wrap-esprot .barra-sup-esprot { display: block; height: 16px; min-width: 2px; border-radius: 3px; opacity: 0.9; }
/* Nº de incendios, debajo de las hectáreas quemadas */
.sup-num-esprot { display: block; font-size: 10px; color: #aaa; text-transform: uppercase; letter-spacing: 0.02em; margin-top: 3px; }
.tabla-esprot tr.fila-oculta-esprot { display: none; }
.mostrar-mas-esprot {
    display: block; margin: 14px auto 0; background: none; border: 0;
    color: #888; font-family: var(--fuente); font-size: 12px; cursor: pointer;
    text-align: center;
}
.mostrar-mas-esprot:hover { color: var(--rojo-incendios); }

/* ---- Spinner de carga ---- */
.cargando-esprot {
    position: absolute;
    inset: 0;
    min-height: 300px;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    transition: opacity 0.5s ease;
}
.cargando-spinner-esprot {
    width: 50px;
    height: 50px;
    border: 4px solid #c5c5c5;
    border-top: 4px solid var(--rojo-incendios);
    border-radius: 50%;
    animation: girar-esprot 1s linear infinite;
}
@keyframes girar-esprot {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .titulo-esprot h2 { font-size: 20px; }
}