/* SATheat · Tablero de datos (Fase 1). Se carga después de satheat.css y usa sus mismos tokens. */
.tb__main { max-width: 96rem; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2.5rem) 4rem; }
body.cargando .tk, body.cargando .pan { opacity: .45; transition: opacity .2s; }
.tk, .pan { transition: opacity .3s; }

/* cabecera */
.tb__cab { position: relative; padding: 6.6rem 0 1.4rem; isolation: isolate; }
.tb__fondo { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(50rem 26rem at 80% 0%, rgba(255, 105, 0, .12), transparent 62%), radial-gradient(40rem 26rem at 10% 0%, rgba(59, 130, 246, .14), transparent 62%); }
.sel { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-bottom: 2rem; }
.sel__caja { position: relative; flex: 1; min-width: 16rem; max-width: 40rem; }
.sel__lupa { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.sel__caja input { width: 100%; font: 500 .95rem/1 var(--sans); color: var(--ink); background: var(--glass); border: 1px solid var(--line2); border-radius: 999px; padding: .85rem 1.1rem .85rem 2.7rem; outline: none; transition: border-color .2s, box-shadow .2s; }
.sel__caja input::placeholder { color: var(--muted2); }
.sel__caja input:focus { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(85, 230, 214, .12); }
.sel__lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .45rem); max-height: min(60vh, 28rem); overflow: auto; list-style: none; margin: 0; padding: .4rem;
  background: rgba(6, 18, 34, .97); border: 1px solid var(--line2); border-radius: 1rem; box-shadow: 0 1.5rem 4rem -1rem rgba(0, 0, 0, .8); backdrop-filter: blur(14px); }
.sel__g { font: 600 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--aqua); padding: .8rem .7rem .4rem; }
.sel__o { display: grid; grid-template-columns: .7rem 1fr auto 3rem; gap: .65rem; align-items: center; padding: .55rem .7rem; border-radius: .6rem; cursor: pointer; font-size: .9rem; color: var(--ink2); }
.sel__o i { width: .7rem; height: .7rem; border-radius: .2rem; }
.sel__o .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel__o .m { font: 500 .68rem/1 var(--mono); color: var(--muted2); white-space: nowrap; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.sel__o b { font: 600 .78rem/1 var(--mono); color: #ffd27a; text-align: right; }
.sel__o:hover, .sel__o.foco { background: rgba(85, 230, 214, .1); color: var(--ink); }
.sel__o.on { box-shadow: inset 2px 0 0 var(--cyan); color: var(--ink); }
.sel__vacio { padding: 1rem; color: var(--muted); font-size: .9rem; }

.reg { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.reg__tipo { font: 600 .74rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 .6rem; }
.reg h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); max-width: 60rem; }
.reg__meta { margin: .8rem 0 0; color: var(--ink2); font-size: .95rem; }
.reg__fecha { display: grid; gap: .25rem; text-align: right; padding: .8rem 1rem; border-radius: .9rem; border: 1px solid var(--line); background: var(--glass); }
.reg__fecha span { font: 600 .62rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.reg__fecha b { font: 600 1.15rem/1 var(--mono); color: var(--ink); }
.reg__fecha small { font: 500 .66rem/1.2 var(--mono); color: #ffd98c; letter-spacing: .06em; }

.tk { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: .9rem; }
.tk__c { position: relative; padding: 1.15rem 1.25rem 1.05rem; border-radius: var(--r); background: var(--glass); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; }
.tk__c::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--calor); opacity: .75; }
.tk__c dt { font: 600 .66rem/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tk__c dd { margin: .5rem 0 .4rem; display: flex; align-items: baseline; gap: .35rem; }
.tk__c dd b { font: 500 clamp(2rem, 3vw, 2.9rem)/1 var(--serif); color: #ffd27a; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tk__c dd u { text-decoration: none; color: var(--ink2); }
.tk__c small { font: 500 .7rem/1.45 var(--mono); color: var(--muted2); margin-top: auto; }
.tk__c small b.sube, b.sube, dd.sube { color: #ff9a5c; }
.tk__c .cat { display: inline-flex; align-items: center; gap: .55rem; }
.tk__c .cat i { width: 1.1rem; height: 1.1rem; border-radius: .3rem; border: 1px solid rgba(255, 255, 255, .25); }
.tk__barra { display: flex; height: .45rem; border-radius: .3rem; background: rgba(140, 200, 255, .08); overflow: hidden; margin: .1rem 0 .55rem; }
.tk__barra i { display: block; height: 100%; }

/* paneles */
.pan { margin-top: 1rem; padding: 1.35rem 1.45rem 1.15rem; border-radius: var(--r); border: 1px solid var(--line); background: rgba(6, 20, 38, .55); min-width: 0; }
.pan__fila { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; }
.pan__fila > .pan { margin-top: 1rem; }
.pan__cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pan__tit { font: 500 1.55rem/1.15 var(--serif); }
.pan__sub { margin: .45rem 0 0; color: var(--ink2); font-size: .9rem; max-width: 48rem; }
.pan__ctl { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.pan select, .anios select { font: 600 .8rem/1 var(--sans); color: var(--ink); background: var(--glass); border: 1px solid var(--line2); border-radius: 999px; padding: .6rem 2rem .6rem .9rem; cursor: pointer;
  appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 1rem) 55%, calc(100% - .7rem) 55%; background-size: .3rem .3rem; background-repeat: no-repeat; }
.pan select option { background: #061426; }
.graf { position: relative; }
.graf svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.tip { position: absolute; z-index: 5; pointer-events: none; transform: translate(.9rem, 0); padding: .55rem .7rem; border-radius: .6rem; background: rgba(3, 10, 23, .93);
  border: 1px solid var(--line2); font: 500 .72rem/1.45 var(--mono); color: var(--ink2); display: grid; gap: .1rem; white-space: nowrap; box-shadow: 0 .8rem 2rem -.6rem rgba(0, 0, 0, .8); }
.tip.izq { transform: translate(calc(-100% - .9rem), 0); }
#calTip, #indTip { transform: translate(.9rem, -50%); } #calTip.izq, #indTip.izq { transform: translate(calc(-100% - .9rem), -50%); }
.tip b { color: var(--ink); font-weight: 600; margin-bottom: .15rem; }
.tip span { display: flex; align-items: center; gap: .45rem; }
.tip span i { width: .6rem; height: .2rem; border-radius: 2px; }
.tip span em { font-style: normal; color: var(--ink); margin-left: auto; padding-left: 1rem; }
.tip .cl i { background: #6fd0ff; } .tip .cl2 { color: var(--muted2); font-size: .66rem; }

.anios { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; }
.anios__et { font: 600 .68rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.anios__chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chipa { display: inline-flex; align-items: center; gap: .45rem; font: 600 .78rem/1 var(--mono); color: var(--ink); background: var(--glass); border: 1px solid var(--line2); border-radius: 999px; padding: .45rem .7rem; cursor: pointer; }
.chipa i { width: .75rem; height: .22rem; border-radius: 2px; }
.chipa span { color: var(--muted); font-size: .85rem; margin-left: .1rem; }
.chipa:hover { border-color: #ff8fb1; } .chipa:hover span { color: #ff8fb1; }

/* calendario */
.cal { display: grid; grid-template-columns: 2.8rem 1fr; grid-template-rows: auto 1.3rem; }
.cal__y { position: relative; font: 500 .64rem/1 var(--mono); color: var(--muted2); }
.cal__y span { position: absolute; right: .55rem; transform: translateY(-50%); }
.cal__y span.on { color: #ffd27a; }
.cal__lienzo { position: relative; }
.cal__lienzo canvas { width: 100%; image-rendering: pixelated; border-radius: .3rem; cursor: crosshair; }
.cal__x { grid-column: 2; position: relative; font: 500 .64rem/1 var(--mono); color: var(--muted2); margin-top: .45rem; }
.cal__x span { position: absolute; transform: translateX(-50%); }

/* comparación */
.rk { position: relative; list-style: none; margin: 0; padding: 0 .3rem 0 0; display: grid; gap: .2rem; max-height: 21rem; overflow: auto; }
.rk li { display: grid; grid-template-columns: 1.6rem minmax(6rem, 11rem) 1fr 3.4rem; gap: .6rem; align-items: center; padding: .38rem .5rem; border-radius: .55rem; cursor: pointer; font-size: .85rem; color: var(--ink2); }
.rk li:hover, .rk li:focus-visible { background: rgba(85, 230, 214, .08); }
.rk li.on { background: rgba(255, 179, 71, .1); box-shadow: inset 2px 0 0 #ffb347; color: var(--ink); }
.rk .p { font: 600 .7rem/1 var(--mono); color: var(--muted2); text-align: right; }
.rk .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk .b { height: .55rem; border-radius: .3rem; background: rgba(140, 200, 255, .07); overflow: hidden; }
.rk .b i { display: block; height: 100%; border-radius: .3rem; }
.rk b { font: 600 .78rem/1 var(--mono); color: #ffd27a; text-align: right; }

/* profundidad */
.niv { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem; }
.niv__c { padding: 1.05rem 1.1rem; border-radius: 1rem; background: var(--glass); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; }
.niv__c header { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.niv__c h3 { font: 500 1.25rem/1 var(--serif); }
.chip--ok { border-color: rgba(85, 230, 214, .5); color: var(--cyan); }
.niv__prof { margin: 0; font: 500 .7rem/1 var(--mono); color: var(--muted2); }
.niv__hoy { display: flex; align-items: baseline; gap: .5rem; }
.niv__hoy b { font: 500 2rem/1 var(--serif); color: #ffd27a; white-space: nowrap; }
.niv__hoy span { font-size: .78rem; color: var(--muted); }
.niv__spark { width: 100%; height: 3.4rem; }
.niv__c dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin: 0; }
.niv__c dl div { padding: .45rem .5rem; border-radius: .55rem; background: rgba(3, 10, 23, .4); border: 1px solid var(--line); }
.niv__c dt { font: 600 .58rem/1 var(--mono); letter-spacing: .08em; color: var(--muted2); }
.niv__c dd { margin: .3rem 0 0; font: 600 .95rem/1 var(--mono); color: var(--ink); }
.niv__nota { margin: 0; font: 500 .62rem/1.3 var(--mono); color: var(--muted2); }
.niv__pron { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: .2rem; }
.niv__pron i { height: .8rem; border-radius: 2px; }

/* descargas */
.desc { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.desc__b { display: grid; gap: .35rem; text-align: left; padding: 1rem 1.1rem; border-radius: 1rem; border: 1px solid var(--line2); background: var(--glass); color: var(--ink); cursor: pointer; font: inherit; transition: border-color .2s, transform .2s var(--ease); }
.desc__b:hover { border-color: var(--cyan); transform: translateY(-2px); }
.desc__b b { font: 600 .98rem/1.2 var(--sans); }
.desc__b span { font: 500 .7rem/1.35 var(--mono); color: var(--muted); }
.desc__nota { margin: 1rem 0 0; font: 500 .72rem/1.55 var(--mono); color: var(--muted2); max-width: 70rem; }

/* responsivo */
@media (max-width: 1240px) { .tk { grid-template-columns: repeat(3, 1fr); } .tk__c--ola { grid-column: span 3; } .pan__fila { grid-template-columns: 1fr; } .desc { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .tb__cab { padding-top: 5.4rem; }
  .tk { grid-template-columns: 1fr 1fr; gap: .6rem; } .tk__c--ola { grid-column: span 2; } .tk__c { padding: .95rem; }
  .reg__fecha { text-align: left; }
  .pan { padding: 1.05rem .9rem .9rem; }
  .cal { grid-template-columns: 2.2rem 1fr; }
  .desc { grid-template-columns: 1fr; }
  .sel__o { grid-template-columns: .7rem 1fr 3rem; } .sel__o .m { display: none; }
  .rk li { grid-template-columns: 1.4rem minmax(5rem, 8rem) 1fr 3rem; }
}

/* profundidad: el año por nivel y la columna de agua */
.prof__fila { display: grid; grid-template-columns: 3fr 2fr; gap: 1rem; margin-top: 1rem; }
.prof__anio, .prof__col { padding: 1rem 1.1rem .9rem; border-radius: 1rem; background: var(--glass); border: 1px solid var(--line); min-width: 0; }
.prof__anio .h3, .prof__col .h3 { margin: 0 0 .7rem; }
.prof__cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: .7rem; }
.prof__cifras div { padding: .55rem .6rem; border-radius: .6rem; background: rgba(3, 10, 23, .4); border: 1px solid var(--line); border-left: 3px solid #ff8a3d; }
.prof__cifras div.v { border-left-color: #9a78ff; }
.prof__cifras b { display: block; font: 500 1.55rem/1 var(--serif); color: #ffd27a; }
.prof__cifras .v b { color: #c9b8ff; }
.prof__cifras span { display: block; font: 500 .64rem/1.35 var(--mono); color: var(--muted); margin-top: .3rem; }
.prof__colsvg { width: 100%; height: auto; aspect-ratio: 400 / 150; }
#profTip { transform: translate(.9rem, 0); } #profTip.izq { transform: translate(calc(-100% - .9rem), 0); }
@media (max-width: 1240px) { .prof__fila { grid-template-columns: 1fr; } }

/* ampliar un panel */
.amp { display: inline-flex; align-items: center; gap: .4rem; font: 600 .74rem/1 var(--mono); color: var(--cyan); background: rgba(85, 230, 214, .06); border: 1px solid var(--line2); border-radius: 999px; padding: .5rem .8rem; cursor: pointer; }
.amp:hover { border-color: var(--cyan); background: rgba(85, 230, 214, .12); }
.amp svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-velo { position: fixed; inset: 0; z-index: 1590; background: rgba(2, 8, 16, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.pan.pan--max { position: fixed; inset: 2.5vh 2.5vw; z-index: 1600; margin: 0; overflow: auto; background: #061426; box-shadow: 0 2rem 6rem rgba(0, 0, 0, .7); padding: 1.4rem 1.8rem; }
.pan--max .rk { max-height: none; }
@media (max-width: 620px) { .pan.pan--max { inset: 0; border-radius: 0; padding: 1rem; } .amp span { display: none; } }

/* mapa de referencia de la región (2026-10-21) */
.reg__der { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.reg__mapa { margin: 0; display: grid; gap: .3rem; justify-items: end; }
.reg__mapimg { width: clamp(9rem, 16vw, 13rem); aspect-ratio: 4 / 3; border-radius: .8rem; overflow: hidden; border: 1px solid var(--line2); background: #0d1c2e; display: flex; align-items: center; justify-content: center; }
.reg__mapimg img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.reg__mapa figcaption { font: 500 .6rem/1.2 var(--mono); color: var(--muted2); white-space: nowrap; }
@media (max-width: 620px) { .reg__der { width: 100%; justify-content: space-between; } .reg__mapimg { width: 10rem; } }

/* ¿qué tan firmes son los datos? (2026-10-21) */
.calidad:empty { display: none; }
.calidad { margin: 1rem 0; padding: 1rem 1.2rem; border-radius: .9rem; border: 1px solid var(--line2); background: rgba(6, 20, 38, .5); color: var(--ink2); font-size: .9rem; line-height: 1.55; }
.calidad .cal__t { margin: 0 0 .5rem; font: 600 1rem/1.3 var(--sans); color: var(--ink); }
.calidad p { margin: 0 0 .5rem; }
.calidad p:last-child { margin-bottom: 0; }
.calidad ul { margin: 0 0 .6rem; padding-left: 1.2rem; display: grid; gap: .35rem; }
.calidad b { color: var(--ink); }