/* Singularity · visor de reportes. Paleta de The Monkey Digital (noche, naranja, tinta). Sin dependencias externas. */
@font-face { font-family: "Inter"; src: url("../fonts/inter-variable-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-variable-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
    --noche: #0a0e17;
    --noche-2: #111827;
    --panel: #151c2b;
    --borde: #263147;
    --tinta: #f7f7f2;
    --tenue: #a7b0c0;
    --naranja: #f35004;
    --naranja-suave: #ff7a3d;
    --verde: #3ccf91;
    --ambar: #f5b942;
    --rojo: #ff5c6c;
    --radio: 14px;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--noche) radial-gradient(1200px 600px at 80% -10%, #1b2440 0%, var(--noche) 55%) no-repeat; color: var(--tinta); font: 16px/1.55 "Inter", system-ui, sans-serif; }
a { color: var(--naranja-suave); }
a:hover, a:focus { color: #fff; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 2px; }
.salto { position: absolute; left: -9999px; }
.salto:focus { left: 1rem; top: 1rem; background: var(--naranja); color: #fff; padding: .5rem 1rem; z-index: 10; }
.envoltura { max-width: 1180px; margin: 0 auto; padding: 0 1.25rem; }

.cabecera { border-bottom: 1px solid var(--borde); background: rgba(10, 14, 23, .85); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(8px); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .8rem; padding-bottom: .8rem; }
.marca { display: flex; align-items: center; gap: .6rem; color: var(--tinta); text-decoration: none; font-weight: 800; letter-spacing: .12em; }
.marca span { color: var(--naranja); }
.marca small { display: block; font-weight: 500; letter-spacing: .02em; color: var(--tenue); font-size: .75rem; }
.nav { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: .95rem; }
.nav a { color: var(--tenue); text-decoration: none; }
.nav a:hover, .nav a:focus { color: var(--tinta); }

main { padding: 2rem 0 4rem; }
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; margin: .2rem 0 .8rem; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 0 0 1rem; }
h3 { font-size: 1rem; margin: 0 0 .6rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.antetitulo { color: var(--naranja); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; margin: 0; }
.tenue { color: var(--tenue); }
.pequeno { font-size: .85rem; }

.rejilla { display: grid; gap: 1.25rem; }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rejilla-3, .rejilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rejilla-2, .rejilla-3, .rejilla-4 { grid-template-columns: 1fr; } }

.panel { background: linear-gradient(180deg, var(--panel), var(--noche-2)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1.25rem; }
.seccion { margin-top: 2.5rem; }
.seccion > .titulo-seccion { display: flex; align-items: baseline; gap: .75rem; border-bottom: 1px solid var(--borde); padding-bottom: .6rem; margin-bottom: 1.25rem; }
.titulo-seccion b { color: var(--naranja); font-size: .9rem; }

.cifra { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.cifra small { font-size: 1rem; color: var(--tenue); font-weight: 600; }
.procedencia { display: block; margin-top: .35rem; font-size: .75rem; color: var(--tenue); }
.procedencia::before { content: "◆ "; color: var(--naranja); }

.abstencion { display: inline-flex; align-items: center; gap: .4rem; border: 1px dashed var(--ambar); color: var(--ambar); border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.no-aplica { display: inline-flex; border: 1px dashed var(--tenue); color: var(--tenue); border-radius: 999px; padding: .15rem .7rem; font-size: .8rem; font-weight: 700; }
.razon { display: block; font-size: .8rem; color: var(--tenue); margin-top: .3rem; }
.etiqueta { display: inline-block; border: 1px solid var(--borde); border-radius: 999px; padding: .1rem .65rem; font-size: .78rem; color: var(--tenue); }
.etiqueta-ok { border-color: var(--verde); color: var(--verde); }

.barra { height: 8px; background: #0d1320; border-radius: 99px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: linear-gradient(90deg, var(--naranja), var(--naranja-suave)); border-radius: 99px; }
.fila-barra { display: grid; grid-template-columns: 9rem 1fr 3rem; gap: .75rem; align-items: center; padding: .35rem 0; }
.capas .fila-barra { grid-template-columns: minmax(12rem, 22rem) 1fr 3rem; }
@media (max-width: 640px) { .capas .fila-barra { grid-template-columns: 1fr 3rem; } .capas .fila-barra .barra { grid-column: 1 / -1; grid-row: 2; } }
.fila-barra .numero { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--tenue); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.numero { text-align: right; font-variant-numeric: tabular-nums; }

.aviso { border-left: 4px solid var(--ambar); background: rgba(245, 185, 66, .08); padding: .9rem 1rem; border-radius: 8px; }
.aviso-ok { border-left-color: var(--verde); background: rgba(60, 207, 145, .08); }
.aviso-error { border-left-color: var(--rojo); background: rgba(255, 92, 108, .08); }

.boton { display: inline-flex; align-items: center; gap: .4rem; background: var(--naranja); color: #fff; border: 0; border-radius: 999px; padding: .65rem 1.3rem; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.boton:hover, .boton:focus { background: var(--naranja-suave); color: #fff; }
.boton-borde { background: transparent; border: 1px solid var(--borde); color: var(--tinta); }
.boton-enlace { background: none; border: 0; color: var(--naranja-suave); padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.peligro { color: var(--rojo); }

label { display: block; font-weight: 600; margin-bottom: .35rem; }
input[type="text"], input[type="password"], input[type="search"], input[type="file"] { width: 100%; background: var(--noche); color: var(--tinta); border: 1px solid var(--borde); border-radius: 10px; padding: .65rem .8rem; font: inherit; }
.campo { margin-bottom: 1rem; }

.grafico { width: 100%; height: auto; display: block; }
.grafico text { fill: var(--tenue); font: 600 11px "Inter", sans-serif; }
.leyenda-cuadrante { fill: var(--tenue); font: 700 11px "Inter", sans-serif; letter-spacing: .08em; }

.pie { border-top: 1px solid var(--borde); padding: 1.5rem 0 2.5rem; color: var(--tenue); font-size: .85rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }