/* Cielo Abierto: portal de servicio público al estilo de los servicios meteorológicos federales.
   Noto Sans en tipo de oración, franja pizarra arriba, cabecera blanca con separador, menú con subrayado rojo,
   tarjetas de filete fino y el mapa sobre una sección azul noche. La banda de color al pie sigue diciendo la decisión. */
:root {
  --banco: #f3f5f7;
  --etiqueta: #ffffff;
  --tinta: #1f2937;
  --tinta-2: #4b5563;
  --filete: #d1d5db;
  --linea: #e5e7eb;
  --verde: #0f6b3f;
  --verde-claro: #dcefe4;
  --ambar: #e8a317;
  --ambar-claro: #fcefd0;
  --rojo: #b42318;
  --rojo-claro: #fbe2df;
  --lluvia: #1e40af;
  --lluvia-claro: #d6e0f5;
  --enlace: #006699;
  --marca: #d8232a;
  --pizarra: #2f4356;
  --noche: #1c2834;
  --noche-2: #263645;
  --noche-3: #46596b;
  --sobre-verde: #ffffff;
  --sobre-ambar: #1f2937;
  --sobre-rojo: #ffffff;
  --cond: "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --texto: "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --f-1: 0.875rem;
  --f-2: 1rem;
  --f-3: 1.125rem;
  --f-4: 1.5rem;
  --f-5: 2.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --banco: #111820; --etiqueta: #1a232d; --tinta: #e5e9ee; --tinta-2: #aab4bf; --filete: #364452; --linea: #2a3541;
    --verde: #1f8a52; --verde-claro: #16352a; --ambar: #f0b525; --ambar-claro: #3d3011; --rojo: #e2554a; --rojo-claro: #44201c;
    --lluvia: #7ea2ec; --lluvia-claro: #1d2c48; --enlace: #5fb3e0; --sobre-verde: #ffffff; --sobre-rojo: #111311;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --banco: #111820; --etiqueta: #1a232d; --tinta: #e5e9ee; --tinta-2: #aab4bf; --filete: #364452; --linea: #2a3541;
    --verde: #1f8a52; --verde-claro: #16352a; --ambar: #f0b525; --ambar-claro: #3d3011; --rojo: #e2554a; --rojo-claro: #44201c;
    --lluvia: #7ea2ec; --lluvia-claro: #1d2c48; --enlace: #5fb3e0; --sobre-verde: #ffffff; --sobre-rojo: #111311;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--tinta-2) var(--banco); }
body {
  margin: 0; background: var(--etiqueta); color: var(--tinta);
  font: 400 var(--f-2)/1.5 var(--texto); font-variant-numeric: tabular-nums lining-nums;
  min-height: 100vh; display: flex; flex-direction: column;
}
::selection { background: var(--lluvia-claro); color: var(--tinta); }
input, select, textarea { caret-color: var(--verde); }
h1, h2, h3, p { margin: 0; }
a { color: var(--enlace); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--enlace); outline-offset: 2px; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 16px; top: 8px; background: var(--etiqueta); padding: 8px 12px; z-index: 20; }
[hidden] { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Franja y cabecera ---- */
.franja { background: var(--pizarra); color: #ffffff; font-size: var(--f-1); }
.franja-in, .barra-in, .nav-in { width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 16px; }
.franja-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.franja-enlace { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; color: #ffffff; cursor: pointer; font-size: var(--f-1); }
.franja-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }
.franja-enlace .ico { width: 18px; height: 18px; }
.barra { background: var(--etiqueta); border-bottom: 1px solid var(--filete); }
.barra-in { display: flex; align-items: center; min-height: 104px; }
.barra-der { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 18px; }
.servicio { display: flex; gap: 24px; }
.servicio-enlace { background: none; border: 0; padding: 0; color: var(--tinta); font-size: var(--f-2); text-decoration: none; cursor: pointer; }
.servicio-enlace:hover, .buscar-enlace:hover { color: var(--marca); }
.buscar-enlace { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-size: var(--f-2); }
.boton-icono { display: grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: var(--tinta); cursor: pointer; }
.boton-icono .ico { width: 28px; height: 28px; stroke-width: 1.6; }
.solo-movil { display: none; }
.marca { display: flex; align-items: center; gap: 20px; color: var(--tinta); text-decoration: none; }
.marca img { width: 44px; height: 44px; }
.marca-sep { align-self: stretch; width: 1px; background: var(--filete); margin: -6px 0; }
.marca-txt { display: grid; gap: 2px; font-size: var(--f-3); line-height: 1.35; }
.marca-txt b { font-weight: 700; }
.marca-txt span { color: var(--tinta-2); font-size: var(--f-2); }
.nav { background: var(--etiqueta); border-bottom: 1px solid var(--filete); }
.nav-in { display: flex; gap: 8px; }
.nav a {
  display: flex; align-items: center; gap: 8px; padding: 18px 0 15px; margin-right: 32px; color: var(--tinta); text-decoration: none;
  font-size: var(--f-3); border-bottom: 3px solid transparent;
}
.nav a .ico { display: none; }
.nav-der { margin-left: auto; margin-right: 0 !important; }
.nav a:hover { color: var(--marca); }
.nav a[aria-current] { border-bottom-color: var(--marca); }

/* ---- Botones ---- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 1px;
  font: 700 var(--f-2)/1 var(--texto); text-decoration: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, border-color .15s;
}
.boton-tinta { background: var(--marca); color: #ffffff; }
.boton-tinta:hover { background: #b51d23; }
.boton-linea { background: var(--etiqueta); color: var(--tinta); border-color: var(--filete); }
.boton-linea:hover { border-color: var(--tinta); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton-grande { min-height: 52px; padding: 12px 24px; font-size: var(--f-3); }
.boton-chico { min-height: 36px; padding: 6px 12px; font-size: var(--f-1); }
.boton.ocupado .ico { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.enlace { background: none; border: 0; padding: 0; color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---- Contenido ---- */
main { width: 100%; max-width: 1232px; margin: 0 auto; padding: 48px 16px 72px; flex: 1; outline: none; }
main:focus, main:focus-visible { outline: none; }
.titulo-vista { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 32px; }
.titulo-vista h1 { font: 700 var(--f-5)/1.15 var(--cond); }
.sub { color: var(--tinta-2); margin-top: 8px; }
.acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.volver { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; font: 700 var(--f-2) var(--cond); color: var(--tinta-2); text-decoration: none; }
.volver:hover { color: var(--tinta); }
.volver .ico { width: 18px; height: 18px; }
.selector { display: flex; flex-direction: column; gap: 4px; font: 400 var(--f-1) var(--cond); color: var(--tinta-2); }
.selector select {
  min-height: 44px; min-width: 190px; padding: 8px 36px 8px 12px; border: 1px solid var(--tinta-2); border-radius: 1px;
  background: var(--etiqueta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23474c47' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance: none; font: 600 var(--f-2) var(--texto); text-transform: none; color: var(--tinta);
}
.estado { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--filete); background: var(--etiqueta); }
.estado.error { border-color: var(--rojo); background: var(--rojo-claro); }

/* ---- La etiqueta ---- */
.etiqueta { background: var(--etiqueta); border: 1px solid var(--filete); border-radius: 2px; box-shadow: 0 1px 2px rgba(31, 41, 55, .06), 0 4px 12px -6px rgba(31, 41, 55, .12); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.et-cabeza { display: block; padding: 20px 20px 16px; border-bottom: 1px solid var(--filete); color: inherit; text-decoration: none; }
a.et-cabeza:hover h2 { color: var(--marca); }
.et-cabeza h2, .et-cabeza h1 { font: 700 var(--f-4)/1.2 var(--cond); }
.et-cabeza p { color: var(--tinta-2); margin-top: 6px; }
.et-titulo { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--filete); }
.et-titulo h2 { font: 700 var(--f-3)/1.3 var(--cond); flex: 1; }
.et-titulo .ico { color: var(--tinta-2); }
.et-cuerpo { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.et-nota { color: var(--tinta-2); font-size: var(--f-1); line-height: 1.45; padding: 12px 16px; border-top: 1px solid var(--linea); }
.et-cuerpo .et-nota { padding: 0; border: 0; }
.resp { font: 700 var(--f-3)/1.25 var(--texto); }
.rojo { color: var(--rojo); } .azul { color: var(--lluvia); }

.et-campos { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-bottom: 1px solid var(--filete); }
.et-campos > div { padding: 14px 20px; }
.et-campos > div + div { border-left: 1px solid var(--filete); }
.et-campos dt { font: 400 var(--f-1)/1.2 var(--cond); color: var(--tinta-2); }
.et-campos dd { margin: 0; }
.et-campos .valor { font: 700 var(--f-5)/1.05 var(--cond); margin-top: 6px; }
.et-campos .valor small { font-size: var(--f-3); font-weight: 400; color: var(--tinta-2); }
.et-campos .rango { font-size: var(--f-1); color: var(--tinta-2); margin-top: 2px; }
.hueco { height: 52px; margin-top: 6px !important; background: var(--banco); }

/* Tira de 7 días: columnas de probabilidad en azul lluvia, misma escala en todas las etiquetas */
.et-tira { padding: 14px 20px 16px; }
.et-rotulo { font: 400 var(--f-1)/1.2 var(--cond); color: var(--tinta-2); margin-bottom: 10px; }
.et-dias { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.et-dias li { display: grid; grid-template-rows: auto 56px auto; gap: 4px; text-align: center; }
.et-dias .dn { font: 400 var(--f-1)/1 var(--cond); color: var(--tinta-2); }
.et-dias .col { position: relative; background: var(--banco); border-radius: 1px; }
.et-dias .col i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--lluvia); }
.et-dias .dp { font: 700 .8125rem/1.1 var(--cond); white-space: nowrap; }
.et-dias .dp small { font-size: var(--f-1); font-weight: 600; }
.et-dias .dq { font: 600 var(--f-1)/1 var(--cond); color: var(--lluvia); }
.hueco-dias { height: 128px; }
.et-registro { margin: 0; padding: 8px 20px; font: 400 .8125rem/1.4 var(--cond); color: var(--tinta-2); border-top: 1px solid var(--filete); }
.etiqueta-blanca { border-style: dashed; box-shadow: none; background: var(--banco); }
.etiqueta-blanca .et-cabeza { border-bottom-style: dashed; }
.etiqueta-blanca .et-acciones { border-bottom: 0; margin-top: auto; }
.pie-detalle { margin-top: 24px; }

/* La banda de decisión: firma del sistema */
.banda {
  display: flex; align-items: center; gap: 10px; margin: 0; margin-top: auto; padding: 14px 20px; min-height: 56px;
  font: 700 var(--f-3)/1.25 var(--cond);
}
.banda .ico { width: 24px; height: 24px; }
.banda-bueno { background: var(--verde); color: var(--sobre-verde); }
.banda-precaucion { background: var(--ambar); color: var(--sobre-ambar); }
.banda-no { background: var(--rojo); color: var(--sobre-rojo); }
.banda-espera { background: var(--banco); color: var(--tinta-2); font-weight: 400; border-top: 1px solid var(--linea); }
.banda-error { background: var(--rojo-claro); color: var(--tinta); }
.estampa { animation: estampa .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes estampa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.aplicar-et > .banda { margin-top: 0; border-bottom: 1px solid var(--filete); }

/* ---- Mis lotes ---- */
.rejilla-lotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.vacio { max-width: 680px; }
.etiqueta-grande .et-cabeza h1 { font-size: var(--f-5); }
.etiqueta-grande .et-cabeza p { font-size: var(--f-3); color: var(--tinta); }
.et-acciones { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px; border-bottom: 1px solid var(--filete); }
.et-promesas { list-style: none; margin: 0; padding: 4px 16px; }
.et-promesas li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.et-promesas li + li { border-top: 1px solid var(--linea); }
.et-promesas .ico { color: var(--lluvia); margin-top: 1px; }

/* ---- Buscar ---- */
.buscador { display: flex; flex-wrap: wrap; gap: 12px; max-width: 880px; }
.campo { position: relative; flex: 1 1 320px; }
.campo-ico { position: absolute; left: 14px; top: 17px; color: var(--tinta-2); pointer-events: none; }
.campo input { width: 100%; min-height: 56px; padding: 12px 16px 12px 46px; border: 1px solid var(--tinta-2); border-radius: 1px; background: var(--etiqueta); font: 400 var(--f-3) var(--texto); }
.campo input::placeholder { color: var(--tinta-2); }
.campo input:focus { outline: 3px solid var(--enlace); outline-offset: 0; }
#sugerencias { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 0; padding: 0; list-style: none; background: var(--etiqueta); border: 1px solid var(--filete); border-top: 0; box-shadow: 0 12px 24px -12px rgba(17, 19, 17, .35); }
#sugerencias li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; }
#sugerencias li + li { border-top: 1px solid var(--linea); }
#sugerencias li b { font: 700 var(--f-2) var(--cond); }
#sugerencias li span { color: var(--tinta-2); }
#sugerencias li[aria-selected="true"], #sugerencias li[data-i]:hover { background: var(--banco); }
#sugerencias li.sin { cursor: default; color: var(--tinta-2); }
.buscador + .estado { margin-top: 16px; max-width: 880px; }

/* ---- Detalle ---- */
.detalle { display: grid; gap: 20px; }
.semana-et .et-cabeza h2 { font-size: var(--f-5); }
.semana-et .et-cabeza p { font-size: var(--f-3); color: var(--tinta); max-width: 62ch; margin-top: 10px; }
.semana-et .et-dias li { grid-template-rows: auto 96px auto auto; }
.semana-et .et-dias .dp { font-size: var(--f-3); }
.tono-humedo .et-cabeza h2 { color: var(--lluvia); }
.tono-seco .et-cabeza h2 { color: var(--tinta); }
.recuadros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }

.pestanas { display: flex; gap: 28px; box-shadow: inset 0 -1px 0 var(--filete); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.pestanas button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0 12px; background: none; border: 0; border-bottom: 3px solid transparent; cursor: pointer; text-align: left; white-space: nowrap; }
.pestanas button b { font: 400 var(--f-3)/1.2 var(--cond); }
.pestanas button span { font-size: var(--f-1); color: var(--tinta-2); }
.pestanas button:hover b { color: var(--marca); }
.pestanas button[aria-selected="true"] { border-bottom-color: var(--marca); }
.pestanas button[aria-selected="true"] b { color: var(--marca); }

/* La banda partida por horas */
.banda-horas { list-style: none; margin: 0; padding: 0; display: flex; border-radius: 2px; overflow: hidden; }
.banda-horas li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; min-height: 64px; padding: 6px 0; }
.banda-horas li + li { border-left: 1px solid rgba(255, 255, 255, .55); }
.banda-horas b { font: 700 var(--f-2)/1 var(--cond); }
.banda-horas small { font: 400 11px/1.2 var(--cond); }
.banda-horas .n-bueno { background: var(--verde); color: var(--sobre-verde); }
.banda-horas .n-precaucion { background: var(--ambar); color: var(--sobre-ambar); }
.banda-horas .n-no { background: var(--rojo); color: var(--sobre-rojo); }
.panel-dia { display: grid; gap: 12px; }
.panel-dia .horas-periodos { margin-bottom: -12px; }
.horas-periodos { display: flex; font: 400 var(--f-1)/1 var(--cond); color: var(--tinta-2); }
.horas-periodos span { padding: 0 0 6px 6px; border-left: 1px solid var(--tinta-2); }
.desliza-aviso { display: none; font: 400 var(--f-1)/1 var(--cond); color: var(--tinta-2); margin-bottom: -6px; }
.desliza-aviso::after { content: " \2192"; }


.tabla-desliza { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--f-2); }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--linea); white-space: nowrap; }
thead th { font: 700 var(--f-1)/1.3 var(--cond); color: var(--tinta); border-bottom: 2px solid var(--tinta); vertical-align: bottom; }
tbody th { font-weight: 600; }
.num { text-align: right; }
.factores td { text-align: center; font-weight: 600; }
.factores thead th:not(:first-child) { text-align: center; }
.factores tbody th { position: sticky; left: 0; background: var(--etiqueta); }
.factores .n-bueno { background: var(--verde-claro); }
.factores .n-precaucion { background: var(--ambar-claro); }
.factores .n-no { background: var(--rojo-claro); }
.criterios summary { cursor: pointer; font: 400 var(--f-2) var(--cond); color: var(--enlace); padding: 4px 0; }
.criterios p { font-size: var(--f-1); color: var(--tinta-2); margin-top: 8px; max-width: 75ch; }
.criterios td { white-space: normal; }

.medidor { display: grid; gap: 8px; margin: 0; }
.medidor div { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; }
.medidor dt { font: 400 var(--f-1) var(--cond); color: var(--tinta-2); }
.medidor dd { margin: 0; display: grid; grid-template-columns: 1fr 64px; gap: 10px; align-items: center; }
.medidor dd b { text-align: right; font: 700 var(--f-3) var(--cond); }
.pista { position: relative; display: block; height: 14px; background: var(--banco); }
.pista i { position: absolute; top: 0; bottom: 0; left: 0; }
.pista .consumo { background: var(--tinta); }
.pista .util { background: var(--lluvia); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border: 1px solid var(--filete); border-radius: 2px; }
.cifras div { padding: 8px 12px; }
.cifras div + div { border-left: 1px solid var(--filete); }
.cifras dt { font: 400 var(--f-1) var(--cond); color: var(--tinta-2); }
.cifras dd { margin: 0; font: 700 var(--f-4)/1.1 var(--cond); }

.medidos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.medidos li { display: grid; grid-template-rows: auto 80px auto; gap: 4px; text-align: center; }
.medidos .v { font: 700 var(--f-2) var(--cond); }
.medidos .col { position: relative; background: var(--banco); }
.medidos .col i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--lluvia); min-height: 2px; }
.medidos .incompleto .col i { background: repeating-linear-gradient(-45deg, var(--lluvia) 0 4px, var(--lluvia-claro) 4px 8px); }
.medidos .dn { font: 400 var(--f-1) var(--cond); color: var(--tinta-2); }

.quince .pr { font: 700 var(--f-3) var(--cond); color: var(--lluvia); }
.quince tbody th b { font: 700 var(--f-3) var(--cond); margin-right: 4px; }
.quince tr.corte > * { border-top: 2px dashed var(--tinta-2); }
.rango-mm, .rango-t { display: grid; align-items: center; gap: 10px; min-width: 200px; }
.rango-mm { grid-template-columns: 1fr 64px; }
.rango-mm b { text-align: right; font: 700 var(--f-3) var(--cond); }
.rango-t { grid-template-columns: 34px 1fr 34px; min-width: 180px; }
.rango-t span:first-child { text-align: right; color: var(--tinta-2); }
.rango-t b { font: 700 var(--f-3) var(--cond); }
.rango-mm .pista, .rango-t .pista { height: 10px; }
.rango-mm .r { background: var(--lluvia-claro); min-width: 4px; }
.rango-mm .m { width: 4px; margin-left: -2px; top: -5px; bottom: -5px; background: var(--lluvia); }
.rango-t .pista i { background: var(--tinta-2); min-width: 6px; }
.conf { display: inline-flex; align-items: flex-end; gap: 3px; }
.conf i { width: 6px; background: var(--linea); }
.conf i:nth-child(1) { height: 8px; } .conf i:nth-child(2) { height: 13px; } .conf i:nth-child(3) { height: 18px; }
.conf.c1 i:nth-child(1), .conf.c2 i:nth-child(-n+2), .conf.c3 i { background: var(--tinta); }
.conf span { margin-left: 8px; font-size: var(--f-1); color: var(--tinta-2); }

/* ---- Vista técnica ---- */
.matriz-et { margin-bottom: 20px; }
.matriz { font-size: var(--f-1); }
.matriz th, .matriz td { padding: 8px; }
.matriz tbody th { position: sticky; left: 0; background: var(--etiqueta); z-index: 1; min-width: 200px; white-space: normal; }
.matriz tbody th small { display: block; color: var(--tinta-2); font-weight: 500; }
.matriz .dia { min-width: 40px; }
.matriz th, .matriz td { padding: 8px 6px; }
.matriz .celda { background: color-mix(in srgb, var(--lluvia) calc(var(--a) * 85%), var(--etiqueta)); font-weight: 600; }
.matriz .celda.osc { color: #ffffff; }
.matriz tbody th .ap { display: flex; align-items: center; margin-top: 4px; font-weight: 600; color: var(--tinta); }
.matriz tbody th .ap .punto { margin-right: 6px; }
.punto { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; }
.punto.n-bueno { background: var(--verde); } .punto.n-precaucion { background: var(--ambar); } .punto.n-no { background: var(--rojo); }
.enlace-fila { background: none; border: 0; padding: 0; font: 700 var(--f-2) var(--texto); color: var(--enlace); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.tecnica { font-size: var(--f-1); }

/* ---- Pie y diálogo ---- */
.pie { background: var(--pizarra); padding: 32px max(16px, calc((100vw - 1200px) / 2)) 40px; font-size: var(--f-1); line-height: 1.6; color: #d1d5db; display: grid; gap: 8px; }
.pie strong { color: #ffffff; }
.pie a, .pie .enlace { color: #ffffff; }
dialog { max-width: 560px; border: 1px solid var(--filete); border-radius: 2px; padding: 0; background: var(--etiqueta); color: var(--tinta); box-shadow: 0 24px 48px -16px rgba(17, 19, 17, .45); }
dialog::backdrop { background: rgba(14, 16, 14, .55); }
dialog h2 { font: 700 var(--f-4) var(--cond); padding: 18px 20px; border-bottom: 1px solid var(--filete); }
dialog p, dialog .opcion { padding: 12px 20px 0; }
dialog form { padding: 20px; }
.opcion { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.opcion input { width: 20px; height: 20px; accent-color: var(--verde); }

/* ---- Celular: navegación abajo, un lote por fila ---- */
@media (max-width: 720px) {
  .franja-in { min-height: 36px; }
  .franja-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .barra-in { min-height: 68px; }
  .marca { gap: 12px; }
  .marca img { width: 34px; height: 34px; }
  .marca-txt { font-size: var(--f-2); }
  .marca-txt span { display: none; }
  .barra-der { flex-direction: row; align-items: center; gap: 4px; margin-right: -10px; }
  .servicio, .buscar-enlace { display: none; }
  .solo-movil { display: grid; }
  .nav { display: none; }
  .nav.abierta { display: block; box-shadow: 0 12px 20px -12px rgba(31, 41, 55, .35); }
  .nav-in { flex-direction: column; gap: 0; }
  .nav a { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--linea); border-left: 0; }
  .nav a .ico { display: block; color: var(--tinta-2); }
  .nav-der { margin-left: 0; }
  .nav a[aria-current] { border-bottom-color: var(--linea); color: var(--marca); box-shadow: inset 3px 0 0 var(--marca); padding-left: 12px; }
  main { padding-top: 28px; }
  .titulo-vista h1 { font-size: 2rem; }
  .acciones { width: 100%; }
  .acciones .boton, .acciones .selector { flex: 1 1 auto; }
  .selector select { width: 100%; min-width: 0; }
  .et-campos .valor { font-size: 2.25rem; }
  .semana-et .et-cabeza h2 { font-size: 2.25rem; }
  .semana-et .et-dias li { grid-template-rows: auto 72px auto auto; }
  .et-dias .dp small { display: block; }
  .pestanas { gap: 20px; }
  .banda-horas b { font-size: var(--f-2); }
  .banda-horas small { display: none; }
  .desliza-aviso { display: block; }
  .tabla-desliza.con-borde { box-shadow: inset -16px 0 12px -12px rgba(17, 19, 17, .25); }
  .banda-horas li { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Mapa: sección azul noche ---- */
body[data-vista="mapa"] { background: var(--noche); }
body[data-vista="mapa"] main { color: #ffffff; --mapa-tierra: #34495c; --mapa-borde: #c7d0da; }
body[data-vista="mapa"] .titulo-vista h1 { color: #ffffff; }
body[data-vista="mapa"] .sub { color: #d1d5db; }
.segmentado { display: inline-flex; gap: 2px; }
.segmentado button { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 1px; background: var(--noche-2); color: #ffffff; cursor: pointer; font: 400 var(--f-2)/1 var(--cond); }
.segmentado button:hover { background: var(--noche-3); }
.segmentado button[aria-checked="true"] { background: var(--noche-3); box-shadow: inset 0 -3px 0 #ffffff; }
.mapa-et { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.mapa-caja { position: relative; height: min(76vh, 820px); min-height: 420px; background: #16202a; border-radius: 2px; overflow: hidden; }
.mapa-caja canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-x pan-y; cursor: crosshair; }
.mapa-etiquetas { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute; top: 0; left: 0; pointer-events: auto; display: flex; align-items: center; gap: 0; overflow: hidden;
  border-radius: 999px; background: var(--noche-2); color: #ffffff; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35); font-size: .8125rem; line-height: 1;
}
.pin b { font-weight: 400; padding: 6px 8px 6px 12px; }
.pin span { font-weight: 700; padding: 6px 12px 6px 8px; background: var(--lluvia); align-self: stretch; display: flex; align-items: center; }
.pin:hover b { text-decoration: underline; text-underline-offset: 2px; }
.pin-lote { background: #ffffff; color: var(--tinta); }
.pin-lote span { background: var(--tinta); color: #ffffff; }
.mapa-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 2px; }
.mapa-zoom button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 1px; background: var(--noche-2); color: #ffffff; cursor: pointer; }
.mapa-zoom button:hover { background: var(--noche-3); }
.mapa-aviso { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 14px; background: rgba(0, 0, 0, .6); color: #ffffff; font: 400 var(--f-3) var(--cond); pointer-events: none; }
.mapa-ficha { position: absolute; z-index: 3; display: grid; gap: 4px; min-width: 200px; padding: 14px 40px 14px 14px; background: var(--etiqueta); color: var(--tinta); border-radius: 2px; box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .55); }
.mapa-ficha b { font: 700 var(--f-3)/1.2 var(--cond); }
.mapa-ficha span { font-size: var(--f-1); color: var(--tinta-2); }
.mapa-ficha strong { font: 700 var(--f-4)/1.2 var(--cond); }
.mapa-ficha .boton { margin-top: 6px; }
.mapa-ficha .cerrar { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; color: var(--tinta); cursor: pointer; }
.mapa-cargando { position: absolute; left: 0; right: 0; bottom: 0; }
.leyenda-mapa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 14px 0 6px; font-size: var(--f-1); color: #e5e7eb; }
.ley-tit { font: 700 var(--f-1) var(--cond); color: #ffffff; }
.ley-caja { display: inline-flex; align-items: center; gap: 6px; }
.ley-caja i { width: 22px; height: 14px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.dias-mapa { display: flex; gap: 4px; overflow-x: auto; padding-top: 12px; }
.dias-mapa button { flex: 1 0 104px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px 6px; border: 0; border-radius: 0; border-top: 4px solid var(--noche-3); background: none; color: #dfe4e9; cursor: pointer; }
.dias-mapa button b { font: 400 var(--f-3)/1.2 var(--cond); }
.dias-mapa button span { font-size: var(--f-1); color: #9ca3af; }
.dias-mapa button:hover { border-top-color: #9ca3af; }
.dias-mapa button[aria-selected="true"] { border-top-color: #ffffff; color: #ffffff; }
.dias-mapa button[aria-selected="true"] b { font-weight: 700; }
.nota-mapa { margin-top: 14px; font-size: var(--f-1); color: #c3cad2; max-width: 80ch; }
body[data-vista="mapa"] .estado { background: var(--noche-2); color: #ffffff; border-color: var(--noche-3); }
@media (max-width: 720px) {
  .mapa-caja { height: 72vh; min-height: 380px; }
  .segmentado { width: 100%; }
  .segmentado button { flex: 1; padding: 10px 8px; font-size: var(--f-1); }
}

/* ---- Inicio: banda azul noche, como la portada de los servicios meteorológicos ---- */
body[data-vista="inicio"] main { max-width: none; padding: 0; color: #ffffff; --mapa-tierra: #34495c; --mapa-borde: #c7d0da; }
body[data-vista="inicio"] { padding-bottom: 56px; }
.contenedor { width: 100%; max-width: 1232px; margin: 0 auto; padding: 0 16px; }
.portada { background: var(--noche); }
.portada-arriba { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px 40px; padding-top: 40px; padding-bottom: 32px; }
.portada-rotulo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: #d1d5db; font-size: var(--f-3); }
.info { display: inline-flex; color: #d1d5db; cursor: help; }
.info .ico { width: 18px; height: 18px; stroke-width: 1.6; }
.campo-oscuro { flex: none; }
.campo-oscuro .campo-ico { color: #d1d5db; top: 12px; }
.campo-oscuro input { min-height: 48px; border: 0; border-radius: 1px; background: var(--noche-3); color: #ffffff; font-size: var(--f-2); padding-left: 46px; }
.campo-oscuro input::placeholder { color: #d1d5db; }
.campo-oscuro #sugerencias { color: var(--tinta); }
.enlace-claro { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; background: none; border: 0; color: #ffffff; font-size: var(--f-1); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.enlace-claro .ico { width: 18px; height: 18px; }
.pastillas { display: flex; gap: 28px; overflow-x: auto; padding: 18px 4px 14px 20px; margin: -14px 0 0 -4px; scrollbar-width: none; }
.pastilla {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 8px 0 40px; border-radius: 22px;
  background: linear-gradient(90deg, #2563eb, #1d4ed8); color: #ffffff; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.pastilla:hover { background: linear-gradient(90deg, #3b74f0, #2563eb); }
.pastilla > .tiempo { position: absolute; left: -20px; top: -16px; width: 58px; height: 50px; }
.pastilla b { font-weight: 400; font-size: var(--f-3); }
.cajas { display: inline-flex; gap: 2px; }
.cajas i { font-style: normal; background: #1e3a8a; padding: 3px 8px; line-height: 1.3; }
.pastilla-mas { background: none; box-shadow: inset 0 0 0 1px #9ca3af; padding: 0 18px 0 14px; gap: 8px; }
.pastilla-mas:hover { background: var(--noche-2); }
.pastilla-mas .ico { width: 20px; height: 20px; }
.portada-centro { padding: 32px 0 64px; }
.rejilla-portada { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px 40px; align-items: start; }
.portada h1 { font: 700 var(--f-5)/1.2 var(--texto); color: #ffffff; margin-bottom: 28px; }
.pestanas-oscuras { display: inline-flex; gap: 2px; margin-bottom: 20px; }
.pestanas-oscuras button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: 1px; background: var(--noche-2); color: #ffffff; font: 400 var(--f-2)/1 var(--texto); cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); }
.pestanas-oscuras button:hover { background: #33475a; }
.pestanas-oscuras button[aria-selected="true"] { background: var(--noche-3); }
.panel-mapa { position: relative; background: var(--noche-2); border-radius: 2px; overflow: hidden; }
.panel-titulo { padding: 14px 16px 0; font-weight: 700; color: #ffffff; }
.panel-mapa .mapa-caja { background: var(--noche-2); border-radius: 0; height: min(72vh, 760px); }
.panel-mapa .leyenda-mapa { padding: 10px 16px 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
.portada .dias-mapa { padding-top: 16px; }
.portada .dias-mapa button { flex: 1 0 96px; }
.actualizado { margin-top: 10px; font-size: .8125rem; color: #d1d5db; }
.pin-rico { overflow: visible; border-radius: 17px; height: 34px; padding: 0 5px 0 30px; gap: 8px; background: linear-gradient(90deg, #2563eb, #1d4ed8); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.pin-rico b { padding: 0; font-weight: 400; }
.pin-rico .cajas i { padding: 2px 6px; font-weight: 400; }
.pin-rico.pin-lote { background: linear-gradient(90deg, #059669, #047857); color: #ffffff; }
.pin-rico.pin-lote .cajas i { background: #064e3b; }
.pin-rico > .tiempo-pin { position: absolute; left: -14px; top: -12px; width: 42px; height: 36px; }
.tiempo-tabla { display: block; width: 52px; height: 44px; margin: 0 auto 4px; }
.lateral { display: grid; gap: 24px; }
.tarjeta-osc { background: var(--noche-2); border-radius: 2px; overflow: hidden; color: #ffffff; box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.mapa-caja.mini { height: 220px; min-height: 0; border-radius: 0; background: #16202a; }
.mapa-caja.mini .mapa-zoom, .mapa-caja.mini .mapa-aviso { display: none; }
.mapa-caja.mini canvas { cursor: pointer; }
.tarjeta-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; color: #ffffff; text-decoration: none; }
.tarjeta-pie b { font-weight: 400; }
.tarjeta-pie:hover b { text-decoration: underline; text-underline-offset: 3px; }
.flecha { display: grid; place-items: center; width: 32px; height: 32px; box-shadow: inset 0 0 0 1px #9ca3af; flex: none; }
.flecha .ico { width: 18px; height: 18px; }
.tarjeta-cifra { display: flex; align-items: baseline; gap: 10px; padding: 18px 16px 10px; background: linear-gradient(135deg, #7c2d12, #b45309); }
.tarjeta-cifra span { font-size: var(--f-1); color: #fde68a; }
.tarjeta-cifra b { font-size: 2.25rem; line-height: 1; }
.tarjeta-cifra small { margin-left: auto; color: #fde68a; }
.tarjeta-cuerpo { padding: 14px 16px 18px; display: grid; gap: 6px; }
.tarjeta-cuerpo p { color: #d1d5db; font-size: var(--f-1); }
.destacados { padding: 18px 16px 8px; }
.destacados h2 { font: 700 var(--f-4)/1.2 var(--texto); margin-bottom: 14px; }
.destacados ul { list-style: none; margin: 0; padding: 0; }
.destacados li { border-top: 1px solid #46596b; }
.destacados li a, .destacados li button { display: block; width: 100%; padding: 12px 8px; background: none; border: 0; color: #ffffff; text-align: left; text-decoration: none; font-size: var(--f-2); line-height: 1.4; cursor: pointer; }
.destacados li a:hover, .destacados li button:hover { background: rgba(255, 255, 255, .06); text-decoration: underline; text-underline-offset: 3px; }
.resumen8 { color: #ffffff; font-size: var(--f-1); }
.resumen8 th, .resumen8 td { border-bottom: 1px solid #33475a; padding: 12px 8px; }
.resumen8 thead th { color: #ffffff; border-bottom: 1px solid #46596b; text-align: center; font-weight: 400; }
.resumen8 thead th:first-child, .resumen8 tbody th { text-align: left; }
.resumen8 tbody th { font-weight: 400; font-size: var(--f-2); }
.resumen8 tbody th small { display: block; color: #9ca3af; font-size: var(--f-1); }
.resumen8 td { text-align: center; }
.resumen8 .cajas i { background: var(--noche-3); }
.portada .nota-mapa { color: #c3cad2; }
.seccion-blanca { background: var(--etiqueta); color: var(--tinta); padding: 56px 0 72px; }
.seccion-blanca .titulo-vista h2, .vacio .et-cabeza h2 { font: 700 var(--f-5)/1.15 var(--texto); }
.anclas { position: fixed; left: 0; right: 0; bottom: 0; z-index: 12; display: flex; align-items: stretch; background: var(--etiqueta); box-shadow: 0 -4px 8px rgba(0, 0, 0, .12); }
.anclas-lista { flex: 1; display: flex; overflow-x: auto; scrollbar-width: none; }
.anclas-lista button { flex: none; min-height: 52px; padding: 0 16px; background: none; border: 0; color: var(--tinta); font: 400 var(--f-2) var(--texto); cursor: pointer; white-space: nowrap; }
.anclas-lista button:hover { color: var(--marca); }
.anclas-lista button[aria-current] { background: var(--marca); color: #ffffff; }
.anclas-arriba { flex: none; width: 52px; display: grid; place-items: center; background: var(--etiqueta); border: 0; color: var(--marca); cursor: pointer; }
.anclas-arriba .ico { width: 26px; height: 26px; padding: 3px; box-shadow: inset 0 0 0 1px var(--marca); }
@media (max-width: 960px) {
  .rejilla-portada { grid-template-columns: minmax(0, 1fr); }
  .lateral { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
}
@media (max-width: 720px) {
  .portada-arriba { grid-template-columns: minmax(0, 1fr); padding-top: 28px; }
  .portada h1 { font-size: 2rem; }
  .portada-centro { padding-top: 24px; }
  .panel-mapa .mapa-caja { height: 68vh; }
  .pestanas-oscuras { display: flex; }
  .pestanas-oscuras button { flex: 1; padding: 10px 8px; font-size: var(--f-1); }
  .seccion-blanca { padding-top: 40px; }
  .seccion-blanca .titulo-vista h2, .vacio .et-cabeza h2 { font-size: 2rem; }
}

/* ---- ¿Qué tan acertado es? ---- */
body[data-vista="acierto"] main { display: grid; gap: 24px; align-content: start; }
body[data-vista="acierto"] .titulo-vista { margin-bottom: 0; }
.cifras-acierto { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.cifra-grande { font: 700 var(--f-5)/1.1 var(--texto); margin-top: 6px; }
.cifra-grande small { font-size: var(--f-3); font-weight: 400; color: var(--tinta-2); }
.tabla-acierto th[colspan] { text-align: center; }
.tabla-acierto td.mejor { color: var(--verde); font-weight: 700; }
.tabla-acierto tbody th { white-space: normal; min-width: 200px; }
.texto-largo { max-width: 78ch; }
.texto-largo p + p { margin-top: 4px; }

/* ---- Reportes de la gente ---- */
.reportar-portada { margin-top: 16px; width: 100%; }
.reportes-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 16px 14px; font-size: var(--f-1); color: #e5e7eb; }
.mapa-et .reportes-linea { padding: 12px 0 4px; }
.punto-reporte { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 3px #f59e0b; }
.mapa-marcas { position: absolute; inset: 0; pointer-events: none; }
.pin-reporte {
  position: absolute; top: 0; left: 0; pointer-events: auto; width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 0; background: #ffffff; box-shadow: 0 0 0 3px #f59e0b, 0 4px 10px rgba(0, 0, 0, .45); cursor: pointer;
}
.pin-reporte .tiempo { width: 32px; height: 28px; }
.pin-reporte i { position: absolute; right: -6px; top: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--marca); color: #ffffff; font: 700 11px/18px var(--texto); font-style: normal; }
.pin-reporte-viejo { opacity: .6; box-shadow: 0 0 0 2px #9ca3af, 0 2px 6px rgba(0, 0, 0, .35); }
.ficha-nota { font-size: .75rem !important; font-style: italic; }
.dialogo-reporte { width: min(560px, calc(100vw - 24px)); }
.dlg-sub { color: var(--tinta-2); font-size: var(--f-1); }
.opciones-tiempo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 20px 0; }
.opciones-tiempo button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--filete); border-radius: 2px; background: var(--etiqueta); cursor: pointer; font-size: var(--f-1); }
.opciones-tiempo button .tiempo { width: 52px; height: 44px; }
.opciones-tiempo button:hover { border-color: var(--tinta); }
.opciones-tiempo button[aria-checked="true"] { border-color: var(--marca); box-shadow: inset 0 0 0 2px var(--marca); font-weight: 700; }
.eventos-rep { border: 0; margin: 0; padding: 16px 20px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eventos-rep legend { padding: 0 0 8px; font-size: var(--f-1); color: var(--tinta-2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--filete); border-radius: 999px; font-size: var(--f-1); cursor: pointer; }
.chip:has(input:checked) { border-color: var(--tinta); background: var(--banco); font-weight: 700; }
.chip input { accent-color: var(--marca); }
.aviso-123 { margin: 14px 20px 0; padding: 10px 12px !important; background: var(--rojo-claro); border-radius: 2px; }
.dlg-estado { min-height: 1.5em; font-size: var(--f-1); }
.dlg-acciones { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 20px 20px; }
.ayer-et { margin-bottom: 20px; background: color-mix(in srgb, var(--enlace) 7%, var(--etiqueta)); }
.ayer-et h2 { font: 700 var(--f-4)/1.2 var(--texto); }
.opciones-ayer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ayer-mas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ayer-mas summary { cursor: pointer; color: var(--enlace); }
.pluvio { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 8px; }
.pluvio label { display: grid; gap: 4px; font-size: var(--f-1); color: var(--tinta-2); }
.pluvio input { width: 140px; min-height: 40px; padding: 6px 10px; border: 1px solid var(--tinta-2); border-radius: 1px; font: inherit; }
.gracias { margin-bottom: 20px; border-color: transparent; background: var(--verde-claro); }
@media (max-width: 720px) {
  .opciones-tiempo { grid-template-columns: repeat(2, 1fr); }
  .opciones-ayer .boton { flex: 1 1 40%; }
}

/* ---- Cabecera fija: se compacta al bajar ---- */
.cabecera { position: sticky; top: 0; z-index: 30; background: var(--etiqueta); transition: box-shadow .2s; }
.marca img { transition: width .2s, height .2s; }
body.compacta .cabecera { box-shadow: 0 2px 12px rgba(31, 41, 55, .16); }
body.compacta .franja, body.compacta .servicio, body.compacta .marca-txt span { display: none; }
body.compacta .barra-in { min-height: 60px; }
body.compacta .barra-der { flex-direction: row; align-items: center; }
body.compacta .marca img { width: 34px; height: 34px; }
body.compacta .marca-sep { margin: 4px 0; }
body.compacta .nav a { padding: 12px 0 9px; }
[id^="sec-"], #pie, .etiqueta[id] { scroll-margin-top: 130px; }
@media (max-width: 720px) {
  body.compacta .barra-in { min-height: 56px; }
  .nav.abierta { max-height: calc(100vh - 110px); overflow-y: auto; }
}

/* ---- Páginas para buscadores (municipios, método, acierto) ---- */
main.pagina { display: grid; gap: 24px; align-content: start; }
main.pagina .titulo-vista { margin-bottom: 0; }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: var(--f-1); color: var(--tinta-2); }
.migas li + li::before { content: "›"; margin-right: 8px; }
.migas a { color: var(--tinta-2); }
.respuesta-grande { display: flex; align-items: center; gap: 16px; font: 700 var(--f-5)/1.1 var(--texto); margin: 6px 0 10px; }
.respuesta-grande .tiempo { width: 84px; height: 72px; margin: 0; }
.respuesta-grande small { display: block; font-size: var(--f-2); font-weight: 400; color: var(--tinta-2); margin-top: 6px; }
.tabla-8 th small { display: block; font-weight: 400; color: var(--tinta-2); }
.tabla-8 td, .tabla-8 th { vertical-align: middle; }
.tabla-8 .tiempo-tabla { width: 44px; height: 38px; margin: 0; }
.cta-et { background: color-mix(in srgb, var(--enlace) 6%, var(--etiqueta)); }
.cta-et h2 { font: 700 var(--f-4)/1.2 var(--texto); }
.lista-cta { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.faq h2, .faq h3 { font: 700 var(--f-3)/1.3 var(--texto); margin-top: 8px; }
.faq p { max-width: 78ch; }
.lista-municipios { list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: 24px; }
.lista-municipios li { padding: 3px 0; break-inside: avoid; }
.lista-municipios small { color: var(--tinta-2); }
.indice-deptos .et-cuerpo { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; }
@media (max-width: 720px) {
  .respuesta-grande { font-size: 2rem; }
  .respuesta-grande .tiempo { width: 64px; height: 56px; }
}
@media (max-width: 720px) {
  .nav.nav-pagina { display: block; }
  .nav-pagina .nav-in { flex-direction: row; overflow-x: auto; gap: 20px; scrollbar-width: none; }
  .nav-pagina a { border: 0; padding: 12px 0 10px; white-space: nowrap; }
  .nav-pagina a .ico { display: none; }
}

/* ---- Calor ---- */
.cajas .caja-calor { background: #9a3412; }
.pin-rico .cajas .caja-calor { background: #9a3412; }
.resumen8 .cajas .caja-calor { background: #7c2d12; }
.calor-medido { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.calor-medido li { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 10px; }
.calor-medido .dn { font-size: var(--f-1); color: var(--tinta-2); }
.calor-medido .pista i { background: #f59e0b; min-width: 6px; }
.calor-medido .pista i.alto { background: #ea580c; }
.calor-medido .pista i.muy { background: #b91c1c; }
.segmentado { flex-wrap: wrap; }
@media (max-width: 720px) { .segmentado button { flex: 1 1 45%; } }