/* TermoNido — app móvil (PWA). Oscura tipo "sala de control", cálida (foco) y fría (ventilador). */
:root {
  --bg: #0d1117; --s1: #141a22; --s2: #1b232d; --s3: #232d39; --line: #2a3441;
  --tx: #e9eef4; --mu: #9aa7b5; --mu2: #6f7d8c;
  --calor: #ff9f1c; --calor2: #ff5d2e; --frio: #38b6ff; --ok: #4ade80; --warn: #facc15; --mal: #f87171; --teal: #59f0d0;
  --led: #ff3b1f;
  --top: 3.4rem; --tab: 4.2rem; --r: 1rem;
  --h-esc: 56%;
  --f-tit: 'Barlow Condensed', 'Arial Narrow', sans-serif; --f-tx: 'Source Sans 3', system-ui, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--tx); overflow: hidden; }
body { font: 400 1rem/1.45 var(--f-tx); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--calor); outline-offset: 2px; border-radius: .4rem; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
a { color: var(--frio); }

/* ---------------------------------------------------------------- estructura */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; height: 100dvh; }
.top { flex: 0 0 calc(var(--top) + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .75rem; padding-top: env(safe-area-inset-top); background: var(--bg); border-bottom: 1px solid var(--line); z-index: 5; }
.escena { position: relative; flex: 0 0 var(--h-esc); min-height: 0; background: #9cc3e4; overflow: hidden; transition: flex-basis .35s ease; touch-action: none; }
.escena canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
.panel { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; background: var(--s1); border-radius: 1.2rem 1.2rem 0 0; margin-top: -1rem; z-index: 3; padding: 1.1rem 1rem 2rem; -webkit-overflow-scrolling: touch; box-shadow: 0 -8px 24px rgba(0,0,0,.35); }
.tabs { flex: 0 0 var(--tab); display: flex; background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; box-sizing: content-box; }
.tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; background: none; border: 0; color: var(--mu); font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .3rem 0; position: relative; }
.tabs button svg { width: 1.5rem; height: 1.5rem; }
.tabs button[aria-selected="true"] { color: var(--calor); }
.tabs button[aria-selected="true"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--calor); }
.app[data-tab="galpon"] { --h-esc: 56%; }
.app[data-tab="sensor"] { --h-esc: 52%; }
.app[data-tab="control"] { --h-esc: 37%; }
.app[data-tab="sensores"] { --h-esc: 39%; }
.app.expandido .escena { flex-basis: 100%; }
.app.expandido .panel { flex-basis: 0; padding: 0; overflow: hidden; margin: 0; }
.pane[hidden] { display: none; }

/* ---------------------------------------------------------------- cabecera */
.marca { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1 1 auto; }
.marca > div { min-width: 0; }
.marca b { display: block; font: 700 1.25rem/1 var(--f-tit); letter-spacing: .02em; }
.marca small { display: block; color: var(--mu); font-size: .7rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-der { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.chip-sim { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .6rem; border: 1px solid rgba(250,204,21,.5); color: var(--warn); border-radius: 2rem; font: 600 .68rem var(--f-tx); letter-spacing: .06em; text-transform: uppercase; background: rgba(250,204,21,.07); }
.chip-sim i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--warn); animation: latido 1.6s ease-in-out infinite; }
.btn-ico { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--s2); display: grid; place-items: center; padding: 0; color: var(--tx); }
.btn-ico svg { width: 1.2rem; height: 1.2rem; }
.btn-ico.oscuro { background: rgba(13,17,23,.72); border-color: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.btn-ico.claro { background: var(--s3); }
.btn-ico[aria-pressed="true"] { background: var(--calor); color: #1a1000; border-color: var(--calor); }
.btn-ico:active { transform: scale(.94); }

/* ---------------------------------------------------------------- escena: capas encima */
.cargando { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: linear-gradient(#1a2430, #0d1117); transition: opacity .5s; }
.cargando.fuera { opacity: 0; pointer-events: none; }
.cargando-caja { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; padding: 1rem; }
.cargando-caja b { font: 600 1.15rem var(--f-tit); letter-spacing: .03em; }
.cargando-caja small { color: var(--mu); }
.barra { width: 12rem; height: .4rem; background: var(--s3); border-radius: .4rem; overflow: hidden; }
.barra i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--calor), var(--calor2)); transition: width .2s; }
.pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; width: 1.7rem; height: 1.7rem; margin: -.85rem 0 0 -.85rem; border-radius: 50%; border: 2px solid #fff; background: var(--calor2); color: #fff; display: grid; place-items: center; padding: 0; box-shadow: 0 2px 8px rgba(0,0,0,.45); will-change: transform; transition: opacity .2s; }
.pin svg { width: .95rem; height: .95rem; stroke-width: 2.2; }
.pin.frio { background: #1a8fd8; } .pin.teal { background: #14a88d; }
.pin.act { background: #fff; color: var(--calor2); box-shadow: 0 0 0 4px rgba(255,159,28,.55), 0 2px 8px rgba(0,0,0,.4); z-index: 3; }
.pin.fuera { opacity: 0; pointer-events: none; }
.pin .etq { position: absolute; left: 50%; top: 100%; transform: translate(-50%, .3rem); white-space: nowrap; background: rgba(13,17,23,.9); color: #fff; font: 600 .68rem var(--f-tx); padding: .12rem .45rem; border-radius: .4rem; pointer-events: none; opacity: 0; transition: opacity .2s; }
.pin.act .etq, .pin.grande .etq { opacity: 1; }
.pin.faro { width: 2.1rem; height: 2.1rem; margin: -1.05rem 0 0 -1.05rem; }
.pin.faro::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--calor); animation: onda 1.8s ease-out infinite; }
.live { position: absolute; left: .6rem; bottom: 1.5rem; z-index: 3; display: flex; gap: .4rem; align-items: center; background: rgba(13,17,23,.78); border: 1px solid rgba(255,255,255,.14); border-radius: 2rem; padding: .3rem .7rem .3rem .45rem; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 500 .8rem var(--f-mono); pointer-events: none; }
.live b { font: 700 1.05rem var(--f-tit); letter-spacing: .02em; }
.live .pt { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mu2); }
.live .pt.c { background: var(--calor); box-shadow: 0 0 8px var(--calor); } .live .pt.f { background: var(--frio); box-shadow: 0 0 8px var(--frio); }
.botones-escena { position: absolute; right: .6rem; top: .6rem; z-index: 3; display: flex; flex-direction: column; gap: .45rem; }
.subtitulo { position: absolute; left: .7rem; right: 4rem; bottom: 1.5rem; z-index: 4; background: rgba(13,17,23,.86); border: 1px solid rgba(255,255,255,.16); border-left: 3px solid var(--calor); border-radius: .8rem; padding: .6rem .8rem; font-size: .95rem; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: .3s; pointer-events: none; }
.subtitulo.v { opacity: 1; transform: none; }
.ctl-tour { position: absolute; left: .6rem; top: .6rem; z-index: 4; display: flex; gap: .4rem; }
.ctl-tour[hidden] { display: none; }
.app[data-tab="control"] #btnTecho, .app[data-tab="sensores"] #btnTecho { display: none; }
.app[data-tab="galpon"] #btnCalor { display: none; }
.app[data-tab="galpon"] .live { display: none; }
.app.expandido .live { display: flex !important; }

/* ---------------------------------------------------------------- tipografía del panel */
.panel h1 { font: 700 1.7rem/1.05 var(--f-tit); margin: .1rem 0 .35rem; letter-spacing: .01em; }
.panel h2 { font: 700 1.2rem/1.1 var(--f-tit); margin: 1.4rem 0 .6rem; letter-spacing: .02em; text-transform: uppercase; color: #cfd8e2; }
.card h2 { margin-top: 0; }
.panel h2 small { font: 400 .8rem var(--f-tx); text-transform: none; color: var(--mu); letter-spacing: 0; }
.lead { color: #c3ccd6; margin: 0 0 .9rem; font-size: 1.02rem; }
.nota { color: var(--mu); font-size: .85rem; margin: .5rem 0; }
.card { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem; margin: .8rem 0; }
.card > p { margin: .4rem 0; }
.aviso-sim { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--warn); background: rgba(250,204,21,.07); border: 1px solid rgba(250,204,21,.28); border-radius: .7rem; padding: .45rem .7rem; margin-bottom: .7rem; }
.aviso-sim i { flex: 0 0 .5rem; height: .5rem; border-radius: 50%; background: var(--warn); }

/* ---------------------------------------------------------------- chips / botones */
.chips { display: flex; gap: .45rem; overflow-x: auto; padding: .1rem 0 .5rem; margin: 0 -1rem; padding-inline: 1rem; scrollbar-width: none; scroll-snap-type: x proximity; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; scroll-snap-align: start; min-height: 2.5rem; padding: 0 .95rem; border-radius: 2rem; border: 1px solid var(--line); background: var(--s2); color: var(--tx); font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .4rem; }
.chip svg { width: 1.05rem; height: 1.05rem; }
.chip[aria-pressed="true"], .chip.on { background: var(--calor); border-color: var(--calor); color: #1a1000; }
.chip.estrella { border-color: rgba(255,159,28,.6); color: var(--calor); }
.cta { width: 100%; display: flex; align-items: center; gap: .8rem; text-align: left; padding: .85rem 1rem; margin: .5rem 0 .8rem; border-radius: var(--r); border: 1px solid rgba(255,159,28,.5); background: linear-gradient(135deg, rgba(255,159,28,.16), rgba(255,93,46,.08)); }
.cta b { display: block; font: 700 1.15rem/1.1 var(--f-tit); letter-spacing: .02em; }
.cta small { display: block; color: var(--mu); font-size: .82rem; line-height: 1.25; margin-top: .15rem; }
.cta svg { width: 1.4rem; height: 1.4rem; margin-left: auto; flex: 0 0 auto; color: var(--calor); }
.cta > span:nth-child(2) { flex: 1; min-width: 0; }
.pulso { flex: 0 0 .9rem; height: .9rem; border-radius: 50%; background: var(--calor); position: relative; }
.pulso::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--calor); animation: onda 1.8s ease-out infinite; }
.pulso.frio { background: var(--frio); } .pulso.frio::after { border-color: var(--frio); }
.btn-sec { flex: 1; min-height: 2.9rem; border-radius: .8rem; border: 1px solid var(--line); background: var(--s3); font-weight: 600; font-size: .88rem; padding: .3rem .6rem; line-height: 1.15; }
.btn-sec small { display: block; color: var(--mu); font-weight: 400; font-size: .74rem; }
.fila { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; }

/* ---------------------------------------------------------------- galpón */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: .6rem 0; }
.stat { background: var(--s2); border: 1px solid var(--line); border-radius: .8rem; padding: .6rem .5rem; text-align: center; }
.stat b { display: block; font: 700 1.35rem/1 var(--f-tit); color: var(--calor); }
.stat span { display: block; font-size: .72rem; color: var(--mu); margin-top: .2rem; line-height: 1.15; }
details.card summary, details.supuestos summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details summary::-webkit-details-marker { display: none; }
details.card summary::after, details.supuestos summary::after { content: "＋"; color: var(--mu); }
details[open] > summary::after { content: "－"; }
.switches { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; margin-top: .7rem; }
.strip { display: flex; gap: .6rem; overflow-x: auto; margin: 0 -1rem; padding: 0 1rem .5rem; scroll-snap-type: x mandatory; }
.strip button { flex: 0 0 72%; max-width: 22rem; scroll-snap-align: start; padding: 0; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; background: var(--s2); position: relative; aspect-ratio: 16 / 9; }
.strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.strip span { position: absolute; left: 0; right: 0; bottom: 0; padding: .9rem .6rem .35rem; text-align: left; font-size: .78rem; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.75)); }

/* interruptores */
.sw { display: flex; align-items: center; gap: .55rem; font-size: .9rem; cursor: pointer; min-height: 2.4rem; }
.sw.suelto { margin: .4rem 0; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw span { flex: 0 0 2.5rem; height: 1.4rem; border-radius: 1rem; background: var(--s3); border: 1px solid var(--line); position: relative; transition: .2s; }
.sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; border-radius: 50%; background: var(--mu); transition: .2s; }
.sw input:checked + span { background: rgba(255,159,28,.28); border-color: var(--calor); }
.sw input:checked + span::after { left: calc(100% - 1.15rem); background: var(--calor); }
.sw input:focus-visible + span { outline: 2px solid var(--calor); outline-offset: 2px; }
.tag { font-style: normal; font-size: .68rem; padding: .05rem .4rem; border-radius: .4rem; background: rgba(56,182,255,.14); color: var(--frio); margin-left: .25rem; }

/* ---------------------------------------------------------------- sensor */
.hs h3 { font: 700 1.3rem/1.1 var(--f-tit); margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; }
.hs h3 svg { width: 1.4rem; height: 1.4rem; color: var(--calor); }
.hs dl { margin: 0; display: grid; gap: .5rem; }
.hs dt { font: 700 .72rem var(--f-tx); text-transform: uppercase; letter-spacing: .08em; color: var(--calor); }
.hs dd { margin: 0; color: #d3dbe4; }
.hs .estado { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; padding: .25rem .7rem; border-radius: 2rem; font: 600 .78rem var(--f-mono); background: var(--s3); border: 1px solid var(--line); }
.hs .estado i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--mu2); }
.hs .estado.c i { background: var(--calor); box-shadow: 0 0 8px var(--calor); } .hs .estado.f i { background: var(--frio); box-shadow: 0 0 8px var(--frio); }
.hs .fte { display: block; margin-top: .6rem; font-size: .78rem; color: var(--mu); }
.flujo svg { width: 100%; height: auto; display: block; stroke-width: 1.6; }
.flujo text { fill: var(--tx); stroke: none; font-family: var(--f-tx); }
.pasos { margin: .6rem 0 1rem; padding-left: 1.3rem; color: #c3ccd6; }
.pasos li { margin: .35rem 0; }
.foto { margin: .8rem 0; }
.foto img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); display: block; background: var(--s2); }
.foto figcaption { color: var(--mu); font-size: .82rem; margin-top: .4rem; }

/* ---------------------------------------------------------------- control */
.termostato { padding: 1rem; background: linear-gradient(180deg, #202832, #171e26); }
.lcd-marco { position: relative; background: #050203; border: 2px solid #2b323b; border-radius: .7rem; padding: .3rem; box-shadow: inset 0 0 18px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06); }
.lcd-marco canvas { display: block; width: 100%; height: auto; aspect-ratio: 360 / 150; border-radius: .4rem; }
.lcd-etq { position: absolute; left: .7rem; top: .5rem; font: 500 .62rem var(--f-mono); color: rgba(255,120,90,.7); letter-spacing: .12em; text-transform: uppercase; }
.botonera { display: flex; gap: .5rem; margin: .7rem 0; }
.tbtn { flex: 1; min-height: 2.6rem; border-radius: .6rem; background: #2b333d; border: 1px solid #3b4553; font: 700 .85rem var(--f-mono); letter-spacing: .08em; box-shadow: 0 2px 0 #171c22; }
.tbtn:active { transform: translateY(2px); box-shadow: none; }
.salidas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.salida { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem .6rem; padding: .6rem .7rem; border-radius: .8rem; background: var(--s3); border: 1px solid var(--line); transition: .25s; }
.salida .led { width: 1rem; height: 1rem; border-radius: 50%; background: #3a2a22; grid-row: 1 / 3; transition: .25s; }
.salida.frio .led { background: #1f2f3d; }
.salida div { min-width: 0; }
.salida b { display: block; font-size: .88rem; line-height: 1.1; }
.salida small { display: block; color: var(--mu); font-size: .74rem; line-height: 1.1; margin-top: .1rem; }
.salida em { grid-column: 1 / 3; font: 600 .74rem var(--f-mono); font-style: normal; color: var(--mu2); letter-spacing: .06em; margin-top: .25rem; }
.salida.on.calor { border-color: var(--calor); background: rgba(255,159,28,.13); box-shadow: 0 0 16px rgba(255,159,28,.25); }
.salida.on.calor .led { background: var(--calor); box-shadow: 0 0 12px var(--calor); } .salida.on.calor em { color: var(--calor); }
.salida.on.frio { border-color: var(--frio); background: rgba(56,182,255,.12); box-shadow: 0 0 16px rgba(56,182,255,.25); }
.salida.on.frio .led { background: var(--frio); box-shadow: 0 0 12px var(--frio); } .salida.on.frio em { color: var(--frio); }
.salida.sin .led { background: var(--mal); box-shadow: 0 0 12px var(--mal); } .salida.sin em { color: var(--mal); }
.banda { margin: .7rem 0 .2rem; height: 1.6rem; border-radius: .5rem; position: relative; background: linear-gradient(90deg, rgba(56,182,255,.35), rgba(74,222,128,.35) 45%, rgba(74,222,128,.35) 55%, rgba(255,93,46,.4)); overflow: hidden; }
.banda .zona { position: absolute; top: 0; bottom: 0; background: rgba(74,222,128,.28); border-inline: 1px dashed rgba(74,222,128,.9); }
.banda .aguja { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px #fff; transition: left .15s linear; }
.banda .et { position: absolute; top: 2px; font: 500 .6rem var(--f-mono); color: rgba(255,255,255,.75); transform: translateX(-50%); }
.alarma { margin-top: .6rem; font-size: .84rem; padding: .4rem .7rem; border-radius: .6rem; border: 1px solid var(--line); background: var(--s3); color: var(--mu); display: flex; align-items: center; gap: .5rem; }
.alarma::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.alarma.nv-aviso { color: var(--warn); border-color: rgba(250,204,21,.4); } .alarma.nv-aviso::before { background: var(--warn); }
.alarma.nv-alarma { color: #ffd0d0; border-color: rgba(248,113,113,.6); background: rgba(248,113,113,.12); } .alarma.nv-alarma::before { background: var(--mal); animation: latido 1s infinite; }
.ctl { margin: .3rem 0 .9rem; }
.ctl label { display: flex; justify-content: space-between; font-weight: 600; font-size: .92rem; }
.ctl output { font: 600 .9rem var(--f-mono); color: var(--calor); }
.ctl small { color: var(--mu); font-size: .78rem; display: block; margin-top: .1rem; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2.2rem; background: transparent; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: .4rem; border-radius: .4rem; background: linear-gradient(90deg, #2a6ea8, #4ade80 40%, #facc15 65%, #ff5d2e); }
input[type="range"]::-moz-range-track { height: .4rem; border-radius: .4rem; background: linear-gradient(90deg, #2a6ea8, #4ade80 40%, #facc15 65%, #ff5d2e); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; border: 3px solid var(--calor); margin-top: -.6rem; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
input[type="range"]::-moz-range-thumb { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; border: 3px solid var(--calor); }
input[type="range"]:disabled { opacity: .45; }
#rDia { --x: 0; }
#rDia::-webkit-slider-runnable-track { background: linear-gradient(90deg, #f3d35e, #f3a53c); }
#rDia::-moz-range-track { background: linear-gradient(90deg, #f3d35e, #f3a53c); }
.param { display: grid; gap: .5rem; }
.pr { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 600; font-size: .92rem; }
.pr i { font: 500 .7rem var(--f-mono); color: var(--mu); font-style: normal; margin-left: .3rem; }
.step { display: flex; align-items: center; background: var(--s3); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.step button { width: 2.6rem; height: 2.6rem; background: none; border: 0; font-size: 1.3rem; font-weight: 700; }
.step button:active { background: var(--s1); }
.step output { min-width: 3.4rem; text-align: center; font: 600 1.05rem var(--f-mono); color: var(--calor); }
.limites { font-size: .88rem; color: #cfd8e2; background: var(--s3); border-radius: .7rem; padding: .5rem .7rem; margin: .7rem 0; }
.limites b.c { color: var(--calor); } .limites b.f { color: var(--frio); }
.vel { justify-content: space-between; }
.seg { display: flex; background: var(--s3); border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; }
.seg button { min-width: 3.1rem; min-height: 2.5rem; background: none; border: 0; font: 600 .85rem var(--f-mono); color: var(--mu); }
.seg button.on { background: var(--calor); color: #1a1000; }
.reloj { font: 500 .8rem var(--f-mono); color: var(--mu); margin-top: .2rem; }
.grafico { width: 100%; height: 11rem; display: block; }
.leyenda { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .75rem; color: var(--mu); margin-top: .3rem; }
.leyenda span::before { content: ""; display: inline-block; width: 1.1rem; height: 3px; margin-right: .35rem; vertical-align: middle; border-radius: 2px; }
.leyenda .l1::before { background: var(--calor); } .leyenda .l2::before { background: var(--mu); } .leyenda .l3::before { background: rgba(74,222,128,.7); height: 8px; }
.metricas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.met { background: var(--s3); border: 1px solid var(--line); border-radius: .8rem; padding: .55rem .7rem; }
.met b { display: block; font: 700 1.5rem/1.05 var(--f-tit); }
.met span { font-size: .74rem; color: var(--mu); line-height: 1.2; display: block; }
.met.ok b { color: var(--ok); } .met.ca b { color: var(--calor); } .met.fr b { color: var(--frio); }
details.supuestos { margin-top: .8rem; }
.eventos { list-style: none; margin: 0; padding: 0; max-height: 14rem; overflow-y: auto; font-size: .84rem; }
.eventos li { display: grid; grid-template-columns: 3.1rem 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line); color: #cfd8e2; }
.eventos time { font: 500 .74rem var(--f-mono); color: var(--mu); padding-top: .1rem; }
.eventos li.calor { border-left: 3px solid var(--calor); padding-left: .5rem; } .eventos li.frio { border-left: 3px solid var(--frio); padding-left: .5rem; }
.eventos li.alarma { border-left: 3px solid var(--mal); padding-left: .5rem; color: #ffd0d0; }
.eventos li.vacio { color: var(--mu); grid-template-columns: 1fr; }

/* ---------------------------------------------------------------- sensores+ */
.lecturas { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.lec { background: var(--s3); border: 1px solid var(--line); border-radius: .8rem; padding: .55rem .7rem; position: relative; overflow: hidden; }
.lec span { font-size: .74rem; color: var(--mu); display: flex; align-items: center; justify-content: space-between; }
.lec b { font: 700 1.6rem/1.1 var(--f-tit); }
.lec small { font: 500 .7rem var(--f-mono); color: var(--mu); }
.lec .bar { height: .28rem; border-radius: .2rem; background: rgba(255,255,255,.08); margin-top: .35rem; overflow: hidden; }
.lec .bar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .3s, background .3s; }
.lec.atencion b { color: var(--warn); } .lec.atencion .bar i { background: var(--warn); }
.lec.alerta b, .lec.critico b { color: var(--mal); } .lec.alerta .bar i, .lec.critico .bar i { background: var(--mal); }
.lec.ok b { color: var(--tx); }
.toggles { margin-top: .6rem; }
.riesgo .cab { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.riesgo .cab b { font: 700 1.5rem var(--f-tit); text-transform: uppercase; letter-spacing: .04em; }
.riesgo .medidor { height: .9rem; border-radius: .5rem; background: linear-gradient(90deg, #22c55e, #facc15 50%, #ef4444); position: relative; margin: .6rem 0; }
.riesgo .medidor i { position: absolute; top: -.25rem; bottom: -.25rem; width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.6); transition: left .3s; }
.riesgo ul { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: #cfd8e2; }
.riesgo .med { margin-top: .6rem; padding: .55rem .7rem; border-radius: .7rem; background: rgba(250,204,21,.08); border: 1px solid rgba(250,204,21,.3); font-size: .86rem; }
.catalogo { display: grid; gap: .5rem; }
.sen { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sen > button { width: 100%; text-align: left; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; background: none; border: 0; }
.sen .ic { flex: 0 0 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--s3); display: grid; place-items: center; color: var(--teal); }
.sen .ic svg { width: 1.3rem; height: 1.3rem; }
.sen b { display: block; font-size: .98rem; line-height: 1.15; }
.sen small { color: var(--mu); font-size: .78rem; }
.sen .est { margin-left: auto; font: 600 .62rem var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border-radius: 1rem; white-space: nowrap; }
.est.existente { background: rgba(74,222,128,.15); color: var(--ok); } .est.propuesto { background: rgba(89,240,208,.13); color: var(--teal); } .est.investigacion { background: rgba(250,204,21,.13); color: var(--warn); }
.sen .det { padding: 0 .8rem .8rem; font-size: .88rem; color: #cfd8e2; display: none; }
.sen.abierto .det { display: block; }
.sen.abierto { border-color: rgba(89,240,208,.5); }
.sen .det p { margin: .35rem 0; }
.sen .det b { display: inline; font-size: inherit; color: var(--calor); font-weight: 700; }
.sen .det .btn-sec { flex: none; width: 100%; margin-top: .5rem; }
.arq svg { width: 100%; height: auto; display: block; stroke-width: 1.5; }
.arq text { fill: var(--tx); stroke: none; font-family: var(--f-tx); }
.arq ul { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .88rem; color: #cfd8e2; }
.evidencia p { font-size: .92rem; color: #cfd8e2; }

/* ---------------------------------------------------------------- diálogo y lightbox */
dialog { width: min(92vw, 34rem); max-height: 88dvh; background: var(--s1); color: var(--tx); border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.2rem; overflow: auto; }
dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
dialog .cerrar { position: sticky; top: 0; float: right; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--s2); }
dialog h2 { font: 700 1.5rem var(--f-tit); margin: 0 0 .5rem; text-transform: none; color: var(--tx); }
dialog h3 { font: 700 1rem var(--f-tit); text-transform: uppercase; letter-spacing: .05em; color: var(--calor); margin: 1.1rem 0 .3rem; }
dialog p, dialog li { font-size: .92rem; color: #cfd8e2; }
dialog ul { padding-left: 1.1rem; }
dialog .fuentes li { margin: .4rem 0; }
dialog .fuentes small { display: block; color: var(--mu); }
dialog img.qr { width: 9rem; height: 9rem; border-radius: .6rem; background: #fff; padding: .3rem; float: right; margin: 0 0 .5rem .8rem; }
dialog .btn-sec { width: 100%; flex: none; margin-top: .4rem; }
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 92dvh; border-radius: .6rem; }
.lightbox button { position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1px solid #555; background: #222; color: #fff; }

/* ---------------------------------------------------------------- animaciones */
@keyframes latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }
@keyframes onda { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } }

/* ---------------------------------------------------------------- pantallas anchas (proyector / computador) */
@media (min-width: 980px) {
  html { font-size: 17px; }
  .app { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; grid-template-rows: var(--top) minmax(0, 1fr) calc(var(--tab) + env(safe-area-inset-bottom)); grid-template-areas: "top top" "escena panel" "escena tabs"; }
  .top { grid-area: top; padding-inline: 1.2rem; }
  .escena { grid-area: escena; flex: none; }
  .panel { grid-area: panel; margin-top: 0; border-radius: 0; border-left: 1px solid var(--line); box-shadow: none; padding: 1.2rem 1.3rem 2rem; }
  .tabs { grid-area: tabs; border-left: 1px solid var(--line); }
  .app.expandido { grid-template-columns: minmax(0, 1fr) 0; }
  .app.expandido .panel, .app.expandido .tabs { display: none; }
  .live { bottom: 1rem; }
  .subtitulo { bottom: 1rem; right: 5rem; font-size: 1.05rem; }
}
@media (min-width: 1500px) { html { font-size: 19px; } .app { grid-template-columns: minmax(0, 1fr) 32rem; } }
@media (max-height: 520px) and (orientation: landscape) and (max-width: 979px) {
  .app { display: grid; grid-template-columns: 1fr 22rem; grid-template-rows: var(--top) minmax(0, 1fr) var(--tab); grid-template-areas: "top top" "escena panel" "escena tabs"; }
  .top { grid-area: top; } .escena { grid-area: escena; flex: none; } .panel { grid-area: panel; margin-top: 0; border-radius: 0; } .tabs { grid-area: tabs; }
}