/* Control de la capa de presupuesto: los tres botones de medida y la leyenda.
   Sigue el aspecto del control del clima a proposito: son dos capas del mismo
   mapa y cambiar de una a otra no deberia parecer cambiar de aplicacion. */

.presupuesto-capa-control {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font: 400 0.75rem/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #1f1f1f;
}

/* ---- Los botones de medida ---- */

.presupuesto-medidas {
    display: flex;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;

    /* La sombra la ponia .leaflet-bar, que ya no se usa. */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);

    /* Tan ancho como la leyenda que tiene debajo, para que las dos cajas del
       control queden alineadas. Sin esto, la fila la marcaba el texto de los
       botones --"PIM" y "%" no miden lo mismo-- y quedaba un hueco a la
       derecha que parecia un cuarto boton por rellenar. */
    width: 100%;
}

.presupuesto-medidas-btn {
    display: flex;
    align-items: center;

    /* Un tercio cada uno: base 0 para que repartan el ancho por igual y no en
       proporcion a lo que mide su texto. Centrado para que se lea como un boton
       y no como una etiqueta pegada al borde. */
    flex: 1 1 0;
    justify-content: center;
    text-align: center;

    /* 1.85rem, la misma altura que los botones del control del clima: los dos
       controles se apilan en la misma esquina y con alturas distintas se ve que
       son dos cosas cosidas. Y por encima de los 24px que pide un control
       tactil. */
    min-height: 1.85rem;
    padding: 0.25rem 0.4rem;

    font-weight: 500;
    color: var(--tinta-media, #555);
    text-decoration: none;
    white-space: nowrap;
    border-right: 1px solid var(--borde, #ddd);
}

.presupuesto-medidas-btn:last-child { border-right: 0; }

.presupuesto-medidas a.presupuesto-medidas-btn:hover,
.presupuesto-medidas a.presupuesto-medidas-btn:focus {
    background: #f2f2f2;
    color: #111;
}

/* El seleccionado, con el mismo negro pleno que el control del clima.
   Se nombran TODOS los estados --reposo, raton, foco, pulsado-- porque un <a>
   se queda con el foco despues de pulsarlo: sin :focus, el boton recien
   elegido se quedaba del gris del foco y parecia que no se habia seleccionado.
   Y con el selector de elemento delante, para no perder por especificidad
   contra reglas de terceros. */
.presupuesto-medidas a.presupuesto-medidas-btn.on,
.presupuesto-medidas a.presupuesto-medidas-btn.on:hover,
.presupuesto-medidas a.presupuesto-medidas-btn.on:focus,
.presupuesto-medidas a.presupuesto-medidas-btn.on:active {
    background: var(--tinta, #1f1f1f);
    color: #fff;
}

/* El foco del teclado sigue viendose: quitar el gris de :focus no puede
   llevarse por delante la unica pista de por donde va el tabulador. */
.presupuesto-medidas a.presupuesto-medidas-btn:focus-visible {
    outline: 2px solid var(--marca, #b61c1c);
    outline-offset: -2px;
}

/* ---- La leyenda ---- */

.presupuesto-capa-leyenda {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    padding: 0.25rem 0.4rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);

    /* Ancho FIJO y no maximo.
       Con max-width, la caja se ajustaba a su contenido: "S/ 24 M" y "100 %" no
       miden lo mismo, asi que al cambiar de medida la leyenda cambiaba de ancho
       de golpe. Angosta a proposito: tapa mapa, y el mapa es el dato. */
    width: 9.75rem;
    box-sizing: border-box;
}

/* El nombre completo de la medida. Dos lineas como mucho, y el sitio de las
   dos reservado siempre: "Presupuesto Institucional Modificado" ocupa dos y
   "Avance: devengado sobre el PIM" una, y sin reservar, la caja daria un salto
   al cambiar de boton. */
.presupuesto-capa-et {
    display: block;
    font-weight: 600;
    font-size: 0.64rem;
    line-height: 1.2;
    min-height: 2.4em;
}

.presupuesto-capa-barra {
    display: flex;
    height: 7px;
    border-radius: 2px;
    overflow: hidden;
}

.presupuesto-capa-barra i { flex: 1 1 auto; }

.presupuesto-capa-topes {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
    font-size: 0.64rem;
    line-height: 1.25;
    color: #555;
}

.presupuesto-capa-topes span { display: flex; align-items: center; gap: 0.25rem; }

/* El tope de la derecha, en su sitio pase lo que pase: "S/ 1.2 M" y "100 %"
   tienen anchos distintos y sin esto la etiqueta "sin registro" se corria. */
.presupuesto-capa-topes span:last-child {
    justify-content: flex-end;
    white-space: nowrap;
}

/* El gris de "sin registro", ahora en su propia linea.
   Estaba dentro de la fila de topes, y con minimo Y maximo alli ya no cabia:
   los tres juntos se pisaban en 11,5 rem. */
.presupuesto-capa-sindato {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    color: #777;
    line-height: 1.2;
}

.presupuesto-capa-sindato i {
    display: inline-block;
    width: 9px;
    height: 9px;

    /* El borde era mas claro que el relleno y lo desdibujaba. Ahora el
       cuadradito se ve igual que lo pintado en el mapa, que es para lo que
       esta. */
    border: 1px solid #9a9a9a;
    border-radius: 2px;
}

.presupuesto-capa-vacia { font-size: 0.7rem; color: #777; }

/* En pantallas estrechas el control compite con el mapa: se encoge. */
@media (max-width: 480px) {
    /* width, no max-width: arriba la caja tiene ancho fijo y un maximo no la
       encogeria. */
    .presupuesto-capa-leyenda { width: 9rem; }

    /* Aqui se escondia el texto del boton y quedaba solo el icono. Ya no hay
       icono, y esconder el nombre dejaria tres botones identicos: se aprieta el
       relleno y se mantiene el rotulo, que es lo unico que los distingue. */
    .presupuesto-medidas-btn { padding: 0.25rem 0.45rem; font-size: 0.72rem; }
}

/* La fila de tableros, encima de la de medidas. Un punto mas pequeña: es de
   donde se viene, no lo que se esta ajustando. */
.presupuesto-tableros { margin-bottom: 2px; }
.presupuesto-tableros .presupuesto-medidas-btn { min-height: 1.6rem; font-size: 0.66rem; }

/* ---- El territorio que no existe ----

   El multidistrital, dibujado como un distrito inventado y anclado arriba de la
   vista. No es un cuadro: un rectangulo se lee como una etiqueta y esto tiene
   que leerse como TERRITORIO, porque eso es lo que representa -- dinero que se
   gasta en algun sitio de la provincia que el MEF no precisa.

   El contorno va con raya discontinua: es la señal de que ese limite no existe
   en ninguna cartografia. Y el relleno sale de la MISMA escala que los
   distritos de al lado, para poder comparar de un vistazo. */
.presupuesto-isla-icono {
    /* Leaflet centra el icono en su punto; aqui interesa que crezca desde el
       centro sin tamaño fijo, porque la cifra cambia de ancho. */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    white-space: nowrap;
    text-align: center;
    pointer-events: none;
}

.presupuesto-isla-forma {
    position: relative;
    display: inline-block;
    line-height: 0;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.presupuesto-isla-forma svg {
    display: block;
    width: 5.5rem;
    height: auto;
    overflow: visible;
}

/* La raya discontinua va en el SVG y no en un border, porque sigue la silueta
   del poligono en vez de un rectangulo que lo envuelva. */
.presupuesto-isla-forma polygon {
    stroke: var(--tinta, #1f1f1f);
    stroke-width: 2;
    stroke-dasharray: 5 3.5;
    stroke-linejoin: round;
    paint-order: fill;
}

/* La pildora, la MISMA que llevan los territorios de verdad: hereda
   .mapa-etiqueta-dato y solo se centra encima de la forma. */
.presupuesto-isla-pildora {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--tinta, #1f1f1f);
    color: #fff;
}

.presupuesto-isla-et {
    display: block;
    margin-top: 2px;
    font-family: var(--sans);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--tinta, #1f1f1f);
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.95),
                 0 0 6px rgba(255, 255, 255, 0.85);
}

@media (max-width: 480px) {
    .presupuesto-isla-forma svg { width: 4.5rem; }
}