/* Informe Onivia — hoja de estilo unica.
   Tema oscuro sobrio: el mapa manda, y sobre fondo oscuro la escala de color
   del coropleto se lee mucho mejor que sobre blanco. */

:root {
    --fondo:        #0f141b;
    --fondo-2:      #161d27;
    --fondo-3:      #1e2733;
    --borde:        #2a3543;
    --texto:        #e6edf5;
    --texto-2:      #9aa9bb;
    --acento:       #4da3ff;
    --ok:           #3fb950;
    --aviso:        #d29922;
    --sombra:       0 2px 12px rgba(0,0,0,.45);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; height: 100%;
    background: var(--fondo); color: var(--texto);
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* El cuerpo es una columna flexible: barra, avisos y contenido. Antes el
   contenido tenia la altura fijada con calc(100% - 62px), suponiendo que la
   barra mide siempre 62 px. Con los filtros que se fueron anadiendo, en una
   ventana estrecha la barra se envuelve en varias filas y esa resta se queda
   corta: el mapa acababa midiendo 44x0 pixeles, o sea invisible. Con flex, el
   contenido ocupa lo que sobre, mida lo que mida la barra. */
body { display: flex; flex-direction: column; }

/* ── Barra superior ────────────────────────────────────────────────────── */
/* DOS FILAS FIJAS, no una que envuelve.
   Antes la barra era un solo flex con marca, migas y todos los controles, y
   cada control apilaba su etiqueta encima del selector. Segun fueron entrando
   filtros -- categorias de tarifa, zona, analisis -- la fila envolvia tres
   veces y la cabecera llego a 216 px: un tercio de la ventana, con el mapa y
   el informe empujados hacia abajo.
   Ahora la identidad va arriba y los filtros debajo, con las etiquetas AL LADO
   del control en vez de encima. Cada fila mide una linea, asi que anadir un
   filtro mas ensancha, no alarga. */
.barra {
    flex: none;
    display: flex; flex-direction: column; align-items: stretch; gap: 7px;
    padding: 8px 18px;
    background: var(--fondo-2);
    border-bottom: 1px solid var(--borde);
}
.barra-sup { display: flex; align-items: baseline; gap: 16px; min-width: 0; }

.marca { display: flex; align-items: baseline; gap: 10px; flex: none; min-width: 0; }
.marca strong { font-size: 15px; letter-spacing: .2px; white-space: nowrap; }
/* El subtitulo explica de que va el informe, pero no merece robar una linea:
   va al lado del titulo y desaparece el primero cuando falta sitio. */
.marca .sub { color: var(--texto-2); font-size: 11.5px; white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; }

.migas { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 120px; }
.migas button {
    background: none; border: 0; color: var(--acento); cursor: pointer;
    font: inherit; padding: 2px 4px; border-radius: 4px;
}
.migas button:hover { background: var(--fondo-3); text-decoration: underline; }
.migas .actual { color: var(--texto); font-weight: 600; }
.migas .sep { color: var(--texto-2); }

.controles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; row-gap: 7px; }
.controles label { display: flex; flex-direction: row; align-items: center; gap: 6px;
                   font-size: 11px; color: var(--texto-2); white-space: nowrap; }
/* Sin mapa base el lienzo queda liso; un gris algo mas claro que el fondo del
   panel separa el mapa de la interfaz sin competir con el coropleto. */
#mapa { background: #131a24; }
.controles select, .controles button {
    background: var(--fondo-3); color: var(--texto);
    border: 1px solid var(--borde); border-radius: 6px;
    padding: 6px 9px; font: inherit; font-size: 13px;
}
.controles button { cursor: pointer; border-color: var(--acento); color: var(--acento); }
.controles button:hover { background: #1b2a3d; }
.controles button:disabled { opacity: .5; cursor: progress; }

/* ── Aviso de vista estimada ───────────────────────────────────────────── */
.aviso {
    flex: none;
    padding: 7px 18px; font-size: 12.5px;
    background: #2b2411; color: #f0c674;
    border-bottom: 1px solid #4a3c14;
}

/* ── Cuerpo ────────────────────────────────────────────────────────────── */
/* 35 % mapa, 65 % informe. El mapa es para situarse y navegar; el trabajo de
   verdad se hace leyendo las cifras, asi que el espacio va donde estan. En
   fracciones y no en px para que acompane a cualquier tamano de ventana. */
main {
    display: grid; grid-template-columns: 35fr 65fr;
    flex: 1; min-height: 0;   /* min-height:0 deja que el panel haga scroll */
}
.mapa-zona { position: relative; min-width: 0; }
#mapa { width: 100%; height: 100%; background: var(--fondo); }

.subir {
    position: absolute; top: 12px; left: 56px; z-index: 500;
    background: var(--fondo-2); color: var(--texto);
    border: 1px solid var(--borde); border-radius: 6px;
    padding: 7px 12px; font: inherit; font-size: 13px; cursor: pointer;
    box-shadow: var(--sombra);
}
.subir:hover { border-color: var(--acento); color: var(--acento); }

.leyenda {
    position: absolute; bottom: 18px; left: 12px; z-index: 500;
    background: rgba(22,29,39,.94); border: 1px solid var(--borde);
    border-radius: 8px; padding: 9px 11px; font-size: 11.5px;
    box-shadow: var(--sombra); max-width: 230px;
}
.leyenda .titulo { color: var(--texto-2); margin-bottom: 6px; }
.leyenda .tramo { display: flex; align-items: center; gap: 7px; margin: 2px 0; }
.leyenda .caja { width: 15px; height: 11px; border-radius: 2px; flex: none; }

/* ── Panel derecho ─────────────────────────────────────────────────────── */
.panel {
    overflow-y: auto; padding: 18px 22px 48px; min-width: 0;
    background: var(--fondo-2); border-left: 1px solid var(--borde);
}
.cargando { color: var(--texto-2); padding: 20px 0; }

.panel h2 { font-size: 17px; margin: 0 0 2px; }
.panel h2 .lugar-tipo { color: var(--texto-2); font-weight: 400; font-size: 12px; display: block; }
.panel h3 {
    font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--texto-2); margin: 24px 0 8px;
    border-bottom: 1px solid var(--borde); padding-bottom: 5px;
}
.panel h3:first-of-type { margin-top: 18px; }

.cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.cifra { background: var(--fondo-3); border: 1px solid var(--borde); border-radius: 7px; padding: 8px 10px; }
.cifra .v { font-size: 17px; font-weight: 600; }
.cifra .e { font-size: 10.5px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .4px; }

.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--borde); }
th { color: var(--texto-2); font-weight: 500; font-size: 11px; text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
tbody tr:hover { background: var(--fondo-3); }
td.nulo { color: #5b6878; }

.nota {
    font-size: 11.5px; color: var(--texto-2); margin: 7px 0 0;
    border-left: 2px solid var(--borde); padding-left: 9px;
}

.barra-prop { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--fondo-3); margin-top: 3px; }
.barra-prop i { display: block; height: 100%; }

.vacio { color: var(--texto-2); font-size: 12.5px; padding: 6px 0; }

/* Leaflet sobre fondo oscuro */
.leaflet-container { background: var(--fondo); }
.leaflet-tooltip {
    background: var(--fondo-2); color: var(--texto);
    border: 1px solid var(--borde); box-shadow: var(--sombra);
    font: 12px/1.45 system-ui, sans-serif;
}
.leaflet-tooltip strong { color: #fff; }
.leaflet-tooltip::before { display: none; }
.leaflet-control-zoom a { background: var(--fondo-2); color: var(--texto); border-color: var(--borde); }
.leaflet-control-zoom a:hover { background: var(--fondo-3); }
.leaflet-control-attribution { background: rgba(22,29,39,.8) !important; color: var(--texto-2) !important; }
.leaflet-control-attribution a { color: var(--texto-2) !important; }

@media (max-width: 1100px) {
    main { grid-template-columns: 1fr; flex: none; }
    .mapa-zona { height: 56vh; min-height: 320px; }
    .panel { border-left: 0; border-top: 1px solid var(--borde); }
}


/* ── Aviso del mapa base ────────────────────────────────────────────────── */
.aviso-base { background: #2b1f11; color: #f0b874; border-bottom-color: #4a3414; }

/* ── Graficos ───────────────────────────────────────────────────────────── */
/* Dos graficos por fila cuando hay sitio: con el 65 % del ancho, uno solo por
   fila deja una barra de 900 px para un valor de tres cifras. */
.g-par { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }

.grafico {
    background: var(--fondo-3); border: 1px solid var(--borde);
    border-radius: 8px; padding: 12px 14px; margin: 10px 0;
}
.g-titulo {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--texto-2); margin-bottom: 10px;
}

/* Etiqueta | barra | valor. La etiqueta a ancho fijo para que todas las barras
   arranquen en la misma vertical: si no, comparar longitudes es imposible. */
.g-fila { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; margin: 5px 0; }
.g-et {
    font-size: 11.5px; color: var(--texto-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-pista { height: 13px; background: #16202c; border-radius: 4px; overflow: hidden; }
/* Extremo redondeado de 4 px solo en el lado del dato; el origen queda a
   escuadra, anclado a la linea base. */
.g-barra { display: block; height: 100%; background: #3987e5; border-radius: 0 4px 4px 0; }
.g-val { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Apiladas: 2 px de hueco entre segmentos, del color de la superficie, para que
   el limite se vea sin necesidad de un borde. */
.g-apilada { display: flex; gap: 2px; background: transparent; }
.g-apilada i { display: block; height: 100%; border-radius: 2px; }

.g-leyenda { display: flex; gap: 14px; font-size: 11.5px; color: var(--texto-2); margin-bottom: 10px; }
.g-leyenda span { display: flex; align-items: center; gap: 5px; }
.g-leyenda i { width: 11px; height: 11px; border-radius: 3px; display: block; }

.g-var { font-size: 11px; font-weight: 600; }
.g-igual { color: var(--texto-2); font-weight: 400; }
.g-resto { font-size: 11px; color: var(--texto-2); margin-top: 8px; }

.g-destacado {
    background: var(--fondo-3); border: 1px solid var(--borde);
    border-radius: 8px; padding: 14px 16px; margin: 10px 0;
}
.g-destacado-v { font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -.5px; }
.g-destacado-e { font-size: 12px; color: var(--texto-2); margin-top: 3px; }
.g-destacado-d { font-size: 11.5px; color: var(--texto-2); opacity: .75; margin-top: 5px; }

/* ── Detalle plegable ───────────────────────────────────────────────────── */
.detalle { margin: 10px 0 4px; }
.detalle > summary {
    cursor: pointer; font-size: 12px; color: var(--acento);
    padding: 5px 0; list-style: none; user-select: none;
}
.detalle > summary::-webkit-details-marker { display: none; }
.detalle > summary::before { content: '▸ '; display: inline-block; transition: transform .12s; }
.detalle[open] > summary::before { content: '▾ '; }
.detalle > summary:hover { text-decoration: underline; }

/* La cifra principal del ambito, un punto por encima del resto. */
.cifra.destacada { border-color: #2f4a68; }
.cifra.destacada .v { color: #7fbfff; }

.nota.agrupado { border-left-color: var(--acento); margin: 14px 0 0; }

/* La leyenda del mapa crece con la entrada de contexto; se le deja sitio. */
.leyenda { max-height: 46vh; overflow-y: auto; }

/* Aviso sobre una limitacion del dato, no sobre la interfaz. */
.nota.aviso-dato { border-left-color: var(--aviso); color: #d8c89a; }

/* Aviso permanente de alcance del informe. */
.nota.alcance { border-left-color: var(--acento); margin: 14px 0 0; }


/* ── Desglose de paquetes por operador ──────────────────────────────────── */
/* La fila del operador es un boton: se pulsa para abrir sus tarifas. */
.fila-op .abrir-op {
    background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
    color: var(--acento); text-align: left;
}
.fila-op .abrir-op::before { content: '▸ '; display: inline-block; }
.fila-op.abierta .abrir-op::before { content: '▾ '; }
.fila-op .abrir-op:hover { text-decoration: underline; }
.fila-op.abierta { background: var(--fondo-3); }

.fila-desglose > td { padding: 0; background: #131a24; }
.desglose { padding: 10px 12px 14px; }
.desglose-tit {
    font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--texto-2); margin-bottom: 8px;
}
.desglose table { font-size: 12px; }
.desglose td.tarifa { max-width: 340px; }

/* Marcas de contenido del paquete: mas legibles que columnas de SI/NO. */
.marcas { display: inline-flex; gap: 4px; margin-left: 7px; vertical-align: middle; }
.marcas i {
    font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .3px;
    padding: 1px 5px; border-radius: 3px;
    background: #22344a; color: #8fc4ff; border: 1px solid #2d4763;
}

/* Barras que abren desglose. */
.g-fila.g-clicable { cursor: pointer; border-radius: 4px; }
.g-fila.g-clicable:hover { background: #22303f; }


/* ── Filtro de categoria de tarifa ──────────────────────────────────────── */
.categorias { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.cat-titulo { white-space: nowrap; }
.cat-titulo { font-size: 11px; color: var(--texto-2); }
.cat-lista { display: flex; gap: 6px; flex-wrap: wrap; }
.cat {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--fondo-3); border: 1px solid var(--borde);
    border-radius: 6px; padding: 5px 9px; cursor: pointer;
    font-size: 12px; color: var(--texto-2); user-select: none;
}
.cat input { margin: 0; accent-color: var(--acento); cursor: pointer; }
.cat:hover { border-color: #3d4c60; }
.cat:has(input:checked) { border-color: var(--acento); color: var(--texto); }


/* La barra agrupada se distingue de las de verdad. */
.g-fila.g-resto-fila .g-et { font-style: italic; opacity: .8; }
.g-fila.g-resto-fila .g-barra { background: #46586e; }

.ilim { font-size: 10px; color: #8fc4ff; white-space: nowrap; }
.fila-resto td { color: var(--texto-2); }


/* ── Alcance del informe ────────────────────────────────────────────────── */
.alcance {
    background: #1a2536; border: 1px solid #2d4763;
    border-radius: 8px; padding: 11px 14px; margin: 14px 0 4px;
}
.alc-cabecera { font-size: 12.5px; color: #cfe0f5; }
.alc-cabecera strong { color: #8fc4ff; }
.alc-detalle { margin: 8px 0 0; }
.alc-detalle > summary { color: #8fc4ff; font-size: 11.5px; }

.alc-bloque { margin: 12px 0 0; }
.alc-titulo {
    font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
    color: var(--texto-2); margin-bottom: 5px;
    border-bottom: 1px solid var(--borde); padding-bottom: 3px;
}
.alc-bloque dl {
    margin: 0; display: grid; grid-template-columns: 190px 1fr;
    gap: 3px 12px; font-size: 11.5px;
}
.alc-bloque dt { color: var(--texto-2); }
.alc-bloque dd { margin: 0; color: var(--texto); opacity: .9; }

@media (max-width: 900px) {
    .alc-bloque dl { grid-template-columns: 1fr; }
    .alc-bloque dt { margin-top: 6px; font-weight: 600; }
}

/* ── Seleccion de zona ──────────────────────────────────────────────────────
   Un recorte dibujado a mano cambia TODAS las cifras del informe, asi que se
   marca en ambar y no en el azul del resto: tiene que cantar que lo que se
   esta mirando no es el ambito completo. Es el mismo codigo de color que usa
   el trazo sobre el mapa. */
.zona-ctrl { display: flex; align-items: center; gap: 4px; }
.zona-ctrl button {
    background: var(--fondo-3); border: 1px solid var(--borde);
    color: var(--texto); border-radius: 6px; padding: 6px 10px;
    font: inherit; font-size: 12px; cursor: pointer;
}
.zona-ctrl button:hover { background: #24303f; }

#zona-modo { padding: 6px 8px; font-size: 14px; line-height: 1; }
#zona-limpiar { padding: 6px 9px; color: var(--texto-2); }
#zona-limpiar:hover { color: var(--texto); }

#zona.zona-activa,
#zona.dibujando {
    border-color: #ffd166; color: #ffd166; background: rgba(255, 209, 102, .10);
}
#zona.dibujando { animation: zona-late 1.1s ease-in-out infinite; }
@keyframes zona-late { 50% { background: rgba(255, 209, 102, .22); } }

/* La capa de dibujo tapa el mapa entero mientras se selecciona. z-index por
   encima de los paneles de Leaflet (400) y por debajo de sus controles (1000),
   para que el zoom siga alcanzable. */
.sel-capa {
    position: absolute; inset: 0; z-index: 600;
    cursor: crosshair; background: rgba(15, 20, 27, .18);
}
.sel-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sel-caja {
    position: absolute;
    border: 1.5px dashed #ffd166; background: rgba(255, 209, 102, .10);
    pointer-events: none;
}
.sel-pista {
    position: absolute; z-index: 601; left: 50%; bottom: 14px;
    transform: translateX(-50%);
    background: rgba(15, 20, 27, .92); border: 1px solid #ffd166;
    color: #ffd166; border-radius: 6px; padding: 6px 12px;
    font-size: 12px; white-space: nowrap; pointer-events: none;
    box-shadow: var(--sombra);
}


/* ── Acciones de la cabecera ────────────────────────────────────────────────
   Exportar y analizar no son filtros: no cambian lo que se mira, hacen algo
   con ello. Por eso van arriba, junto a las migas, y no en la fila de filtros,
   donde ademas obligaban a la barra a envolver una vez mas. */
.acciones { display: flex; align-items: center; gap: 8px; flex: none; }
.acciones button {
    background: var(--fondo-3); color: var(--acento);
    border: 1px solid var(--acento); border-radius: 6px;
    padding: 6px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
    white-space: nowrap;
}
.acciones button:hover { background: #1b2a3d; }
.acciones button:disabled { opacity: .55; cursor: progress; }

#analizar { border-color: #a97bff; color: #c4a2ff; }
#analizar:hover { background: #241b38; }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal {
    position: fixed; inset: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 11, 16, .72); padding: 24px;
}
.modal[hidden] { display: none; }
.modal-caja {
    background: var(--fondo-2); border: 1px solid var(--borde);
    border-radius: 10px; box-shadow: var(--sombra);
    width: min(760px, 100%); max-height: min(82vh, 900px);
    display: flex; flex-direction: column;
}
.modal-cab {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 13px 18px; border-bottom: 1px solid var(--borde);
}
.modal-cab strong { font-size: 14.5px; }
.modal-sub { display: block; color: var(--texto-2); font-size: 12px; margin-top: 2px; }
.modal-cab button {
    background: none; border: 0; color: var(--texto-2);
    font-size: 16px; cursor: pointer; line-height: 1; padding: 2px 4px;
}
.modal-cab button:hover { color: var(--texto); }

.modal-cuerpo { padding: 16px 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.62; }
.modal-cuerpo p { margin: 0 0 11px; }
.modal-cuerpo strong { color: #c4a2ff; }
.modal-cuerpo ul { margin: 0 0 11px; padding-left: 19px; }
.modal-cuerpo li { margin: 3px 0; }
.modal-cuerpo h4 { margin: 16px 0 7px; font-size: 13px; color: #c4a2ff; }
.modal-cuerpo h4:first-child { margin-top: 0; }

.modal-pie {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 18px; border-top: 1px solid var(--borde);
    color: var(--texto-2); font-size: 11.5px;
}
.modal-pie button {
    background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde);
    border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.modal-pie button:hover { border-color: var(--acento); color: var(--acento); }

/* El aviso de que esto lo ha escrito un modelo va DENTRO del texto y arriba,
   no en una nota al pie que nadie lee: quien copie esto a un correo tiene que
   arrastrar el aviso consigo. */
.ia-aviso {
    background: #241b38; border: 1px solid #45356b; color: #c4a2ff;
    border-radius: 6px; padding: 8px 11px; font-size: 12px; margin-bottom: 14px;
}
.ia-cargando { color: var(--texto-2); padding: 8px 0; }
.ia-error { color: #f0a0a0; }

#salir { border-color: var(--borde); color: var(--texto-2); }
#salir:hover { border-color: #6b3f3f; color: #f0a0a0; background: #2a1c1c; }