/* TARS Preparados · «Mapa vivo»
   Una sola pantalla: el mapa de tu lugar (trazos de luz sobre noche) y una hoja con TARS. Un efecto firma: el trazo de luz que se escribe.
   Mobile-first, texto grande, poca luz, sin filtros ni sombras pesadas (cuida la batería). Space Grotesk + Hanken Grotesk + DM Mono (OFL, autoalojadas). */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("../fonts/space-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("../fonts/space-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("../fonts/space-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 100 900; font-display: swap; src: url("../fonts/hanken-grotesk.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("../fonts/dm-mono-normal-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../fonts/dm-mono-normal-500.woff2") format("woff2"); }
:root {
  --noche: #060a12; --panel: #0a111c; --linea: #1a2736; --tinta: #e6f1f7; --gris: #8da2b4;
  --luz: #7fe3ff; --luz-texto: #04141a; --alerta: #ffb020; --agua: #4d8dff; --falla: #ff6b4a; --huerta: #9be37a; --rojo: #ff3b30;
  --display: "Space Grotesk", system-ui, sans-serif; --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
.poca-luz { --noche: #000; --panel: #04070b; --linea: #101a24; --tinta: #cfdbe3; --gris: #7d8f9d; --luz: #5fb4cf; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--noche) linear-gradient(rgb(127 227 255 / 0.035) 1px, transparent 1px), linear-gradient(90deg, rgb(127 227 255 / 0.035) 1px, transparent 1px); background-size: auto, 56px 56px, 56px 56px; color: var(--tinta); font: 400 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; overscroll-behavior: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--luz); outline-offset: 3px; }
.mono { margin: 0 0 0.5rem; font: 500 0.72rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gris); }
.mini { font-size: 0.85rem; color: var(--gris); }
.sin-js { position: fixed; inset: auto 1rem 1rem; z-index: 200; background: var(--noche); padding: 1rem; border: 1px solid var(--luz); }

/* ---- mapa ---- */
.mapa { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.mapa.arrastrando { cursor: grabbing; }
.mapa-ctl { position: fixed; z-index: 25; right: 10px; top: 128px; display: grid; gap: 6px; }
.mapa-ctl button { width: 44px; height: 44px; border: 1px solid var(--luz); border-radius: 4px; background: rgb(6 10 18 / 0.85); color: var(--luz); font: 700 1.3rem var(--display); }
.mapa-ctl button:active { background: var(--luz); color: var(--luz-texto); }
.pins { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.pin { position: absolute; left: 0; top: 0; will-change: transform; }
.pin span { position: absolute; left: 12px; top: -26px; padding: 2px 8px; border-radius: 6px; background: rgb(7 9 12 / 0.85); font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.04em; white-space: nowrap; text-transform: uppercase; }
.pin-yo span { color: var(--luz); }
.pin-agua span { color: var(--agua); }
.pin-falla span { color: var(--falla); }
.pin b { position: absolute; left: -16px; top: -16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 4px; border: 2px solid var(--luz); background: var(--noche); color: var(--luz); font: 700 0.95rem var(--display); opacity: 0.55; }
.pin-refugio.activo b { background: var(--luz); color: var(--luz-texto); opacity: 1; }
.capa { transition: opacity 0.5s; }
.capa.apagada { opacity: 0; }
.curva-halo { fill: none; stroke: var(--luz); stroke-width: 6; stroke-linecap: round; opacity: 0.1; vector-effect: non-scaling-stroke; }
.curva { fill: none; stroke: rgb(127 227 255 / 0.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curva.indice { stroke: rgb(127 227 255 / 0.7); stroke-width: 1.4; }
.cauce { fill: none; stroke: var(--agua); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.falla-trazo { fill: none; stroke: var(--falla); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ruta-trazo { fill: none; stroke: var(--luz); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ruta-punto { fill: var(--luz); }
.llano { fill: var(--huerta); opacity: 0.1; }
.yo-punto { fill: var(--luz); }
.yo-anillo { fill: none; stroke: var(--luz); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0.6; transform-box: fill-box; transform-origin: center; animation: latido 2.6s ease-out infinite; }
@keyframes latido { from { transform: scale(0.5); opacity: 0.8; } to { transform: scale(1.8); opacity: 0; } }
.modo-tiembla .capa-relieve, .modo-huerta .capa-agua { opacity: 0.35; }
.modo-agua .cauce { stroke-width: 4; }
.modo-agua .capa-falla, .modo-agua .capa-ruta { opacity: 0.15; }
.modo-huerta .llano { opacity: 0.26; }
.pins.modo-huerta .pin-refugio, .pins.modo-agua .pin-falla { opacity: 0.3; }

/* ---- cabecera ---- */
.cab { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 0.6rem; padding: max(0.7rem, env(safe-area-inset-top)) 0.9rem 0.7rem; pointer-events: none; }
.cab > * { pointer-events: auto; }
.sello-bloque { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sello { flex: none; width: 34px; height: 34px; fill: none; stroke: var(--luz); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.sello circle { fill: var(--luz); stroke: none; }
.sello-txt { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.sello-txt b { font: 700 1.15rem var(--display); letter-spacing: 0.12em; }
.sello-txt span { font: 500 0.58rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.franja { position: fixed; z-index: 29; top: calc(max(0.7rem, env(safe-area-inset-top)) + 50px); left: 0; right: 0; display: flex; gap: 0.9rem; align-items: center; margin: 0; padding: 0.3rem 0.9rem; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); background: rgb(6 10 18 / 0.78); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--gris); pointer-events: none; white-space: nowrap; overflow: hidden; }
.franja span { display: inline-flex; align-items: center; gap: 0.35rem; }
.franja i { width: 6px; height: 6px; border-radius: 50%; background: var(--huerta); }
.franja .sin-red { color: var(--alerta); }
.franja-extra { margin-left: auto; color: var(--luz); }
.retic { position: fixed; z-index: 5; inset: 0; pointer-events: none; }
.retic i { position: absolute; width: 22px; height: 22px; border: 0 solid rgb(127 227 255 / 0.55); }
.retic i:nth-child(1) { left: 10px; top: 104px; border-width: 2px 0 0 2px; } .retic i:nth-child(2) { right: 10px; top: 104px; border-width: 2px 2px 0 0; }
.retic i:nth-child(3) { left: 10px; bottom: 10px; border-width: 0 0 2px 2px; } .retic i:nth-child(4) { right: 10px; bottom: 10px; border-width: 0 2px 2px 0; }
@media (max-width: 899px) { .retic i:nth-child(3), .retic i:nth-child(4) { display: none; } }
.icono { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border-radius: 4px; border: 1px solid var(--linea); background: rgb(7 9 12 / 0.8); }
.icono svg { width: 22px; height: 22px; fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icono[aria-pressed="false"] .onda { display: none; }
.emergencia-fija { min-height: 44px; padding: 0 1rem; border: 2px solid var(--rojo); border-radius: 4px; background: var(--rojo); color: #fff; font: 700 0.74rem var(--display); letter-spacing: 0.08em; text-transform: uppercase; }

/* ---- hoja de TARS ---- */
.hoja { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; max-height: 64svh; display: flex; flex-direction: column; background: rgb(10 17 28 / 0.97); border-top: 1px solid var(--luz); overflow: hidden; }
.hoja::before, .hoja::after { content: ""; position: absolute; top: 0; width: 18px; height: 18px; pointer-events: none; border: 0 solid var(--luz); }
.hoja::before { left: 0; border-width: 3px 0 0 3px; }
.hoja::after { right: 0; border-width: 3px 3px 0 0; }
.tars-linea { display: flex; gap: 0.7rem; align-items: flex-start; padding: 1rem 1.1rem 0.4rem; flex: none; }
.tars-punto { flex: none; width: 10px; height: 10px; margin-top: 0.55rem; border-radius: 50%; background: var(--luz); }
#tars-texto { margin: 0; font: 500 1.05rem/1.4 var(--display); color: var(--luz); }
.vistas { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.4rem 1.1rem 1.2rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--luz) transparent; }
.tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom); background: var(--panel); }
.tabs button { min-height: 52px; border: 0; background: none; font: 500 0.76rem var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); border-top: 3px solid transparent; }
.tabs button[aria-current="true"] { color: var(--luz); border-top-color: var(--luz); }
@media (min-width: 900px) {
  .hoja { top: 0; right: auto; width: 470px; max-height: none; border-top: 0; border-right: 1px solid var(--luz); padding-top: 5.6rem; }
  .hoja::before, .hoja::after { top: 5.2rem; }
}

/* ---- contenido de las vistas ---- */
.titulo-vista { margin: 0.2rem 0 0.8rem; font: 700 clamp(1.7rem, 6vw, 2.2rem)/1.05 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.codigo { margin: 0.6rem 0 0; font: 500 0.7rem/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--luz); }
.codigo::before { content: "// "; color: var(--gris); }
.sub { margin: 1.6rem 0 0.6rem; font: 700 1.2rem var(--display); }
.gran { margin: 0.2rem 0; font: 700 clamp(2.6rem, 11vw, 3.8rem)/1 var(--display); letter-spacing: -0.03em; }
.gran small { font-size: 0.4em; color: var(--gris); font-weight: 500; }
.expl { margin: 0.4rem 0 0.8rem; }
.aviso { margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px solid var(--linea); }
.sep { margin-top: 1.2rem; }
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border: 2px solid var(--tinta); border-radius: 4px; background: transparent; text-transform: uppercase; letter-spacing: 0.06em; font: 700 0.85rem var(--display); text-decoration: none; transition: transform 0.2s var(--ease); }
.boton:active { transform: scale(0.97); }
.boton-luz { background: var(--luz); border-color: var(--luz); color: var(--luz-texto); }
.boton-linea { border-color: var(--linea); }
.boton.grande { min-height: 58px; font-size: 1.1rem; width: 100%; }
.enlace { background: none; border: 0; color: var(--gris); text-decoration: underline; min-height: 44px; }
.zonas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.zona { min-height: 44px; padding: 0 1rem; border: 1px solid var(--linea); border-radius: 4px; background: none; font: 500 0.78rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.zona:hover { border-color: var(--luz); }
.acciones-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 1rem 0; }
.pasos-an { list-style: none; margin: 0.4rem 0; padding: 0; }
.pasos-an li { display: flex; gap: 0.7rem; padding: 0.35rem 0; font-size: 0.98rem; color: var(--gris); }
.pasos-an li span { width: 1.2rem; color: var(--luz); font-family: var(--mono); }
.pasos-an li.ok { color: var(--tinta); }

.nivel { display: flex; flex-direction: column; margin: 0.2rem 0 0.8rem; padding-left: 0.8rem; border-left: 3px solid var(--alerta); }
.nivel strong { font: 700 1.6rem var(--display); }
.nivel.r { border-color: var(--falla); } .nivel.r strong { color: var(--falla); } .nivel.g { border-color: var(--huerta); }
.slides { display: block; margin: 0.4rem 0 0; }
.dato { display: block; margin: 0 0 1rem; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 3px solid var(--linea); cursor: pointer; transition: background 0.3s; }
.dato:hover, .dato.foco { background: rgb(127 227 255 / 0.06); }
.dato:focus-visible { outline-offset: 2px; }
.dato.r { border-color: var(--falla); } .dato.a { border-color: var(--alerta); } .dato.g { border-color: var(--huerta); }
.dato .gran { white-space: normal; font-size: clamp(2.2rem, 9vw, 3rem); }
.puntos { display: flex; gap: 0.4rem; margin: 0.6rem 0 0.2rem; }
.puntos i { width: 18px; height: 4px; border-radius: 2px; background: var(--linea); transition: background 0.3s, width 0.3s; }
.puntos i.on { background: var(--luz); width: 30px; }

.grande-pasos, .lista-pasos { margin: 0.6rem 0; padding: 0; list-style: none; counter-reset: p; }
.grande-pasos li { display: flex; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--linea); }
.grande-pasos .num, .metodos .num { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--luz); color: var(--luz-texto); font: 700 1.1rem var(--display); }
.grande-pasos b { display: block; font: 700 1.5rem/1.1 var(--display); }
.grande-pasos span:not(.num) { display: block; margin-top: 0.2rem; color: var(--gris); }
.lista-pasos li { counter-increment: p; display: flex; gap: 0.7rem; padding: 0.5rem 0; }
.lista-pasos li::before { content: counter(p); flex: none; width: 1.6rem; color: var(--luz); font: 500 0.95rem var(--mono); }
.lista-no { margin: 0.4rem 0; padding: 0; list-style: none; }
.lista-no li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; }
.lista-no li::before { content: "✕"; position: absolute; left: 0; color: var(--falla); }
.cuenta { margin: 0.4rem 0 0; font: 700 3rem var(--display); color: var(--luz); min-height: 1.2em; }
.tiempo { margin: 0.4rem 0 1rem; padding-left: 0.9rem; border-left: 3px solid var(--luz); }
.refs { list-style: none; margin: 0.5rem 0; padding: 0; }
.ref { display: block; width: 100%; text-align: left; padding: 0.8rem 0.9rem; margin-bottom: 0.5rem; border: 1px solid var(--linea); border-radius: 14px; background: none; }
.ref.on { border-color: var(--luz); }
.ref b { font: 700 1.05rem var(--display); }
.ref span { display: block; font-size: 0.88rem; margin-top: 0.15rem; color: var(--gris); }
.ref .ok { color: var(--huerta); } .ref .no { color: var(--falla); }
.tag { display: inline-block !important; margin-left: 0.3rem; padding: 0 0.45rem; border: 1px solid var(--linea); border-radius: 4px; font-family: var(--mono); font-size: 0.68rem !important; text-transform: uppercase; }

.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0.4rem 0; }
.calc label { display: block; font: 500 0.72rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gris); }
.paso-num { display: flex; align-items: center; justify-content: space-between; margin-top: 0.3rem; border: 1px solid var(--linea); border-radius: 999px; }
.paso-num button { width: 48px; height: 48px; border: 0; background: none; font: 700 1.5rem var(--display); color: var(--luz); }
.paso-num output { font: 700 1.4rem var(--display); color: var(--tinta); }
.metodos { list-style: none; margin: 0; padding: 0; }
.metodos details, .acordeon details { border-bottom: 1px solid var(--linea); }
.metodos summary, .acordeon summary { display: flex; align-items: center; gap: 0.8rem; min-height: 56px; padding: 0.5rem 0; cursor: pointer; list-style: none; font: 700 1.1rem var(--display); }
.metodos summary::-webkit-details-marker, .acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; margin-left: auto; color: var(--luz); font: 500 1.5rem var(--mono); }
.acordeon details[open] summary::after { content: "–"; }
.cuerpo { padding: 0 0 1rem; }
.cuerpo h4 { margin: 1rem 0 0.3rem; font: 700 1rem var(--display); color: var(--luz); }
.cuerpo ol, .cuerpo ul { padding-left: 1.2rem; }
.aviso-i { padding: 0.6rem 0.8rem; border-left: 3px solid var(--falla); background: rgb(255 107 74 / 0.08); }
.fuentes { margin: 0.8rem 0; font-size: 0.85rem; color: var(--gris); }
.fuentes summary { cursor: pointer; min-height: 32px; }
.fuentes a { color: var(--agua); }

.anillo { display: block; width: min(300px, 80%); margin: 0.5rem auto; }
.anillo .base { fill: none; stroke: var(--linea); stroke-width: 12; }
.anillo .siembra { fill: none; stroke: var(--luz); stroke-width: 12; }
.anillo .cosecha { fill: none; stroke: var(--huerta); stroke-width: 12; }
.anillo .mes { fill: var(--gris); font: 500 9px var(--mono); }
.anillo .mes.hoy { fill: var(--tinta); font-weight: 700; }
.anillo .centro { fill: var(--tinta); font: 700 12px var(--display); }
.leyenda { display: flex; gap: 1rem; justify-content: center; font-size: 0.82rem; color: var(--gris); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.3rem; }
.l-siembra { background: var(--luz); } .l-cosecha { background: var(--huerta); } .l-hoy { background: var(--tinta); }
.cultivos { list-style: none; margin: 0.6rem 0; padding: 0; }
.cultivo { display: block; width: 100%; text-align: left; padding: 0.7rem 0; border: 0; border-bottom: 1px solid var(--linea); background: none; }
.cultivo.on b { color: var(--luz); }
.cultivo b { font: 700 1.1rem var(--display); }
.cultivo .mini { display: block; }
.barras { display: flex; gap: 4px; margin-top: 0.4rem; }
.barras i { flex: 1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--huerta) calc(var(--v) * 20%), var(--linea) 0); }
.detalle h3 { margin: 0.8rem 0 0.2rem; font: 700 1.2rem var(--display); }
.detalle dl { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.8rem; margin: 0.4rem 0; }
.detalle dt { color: var(--gris); font-size: 0.85rem; } .detalle dd { margin: 0; }

.check { list-style: none; margin: 0; padding: 0; }
.check li label { display: flex; gap: 0.8rem; align-items: flex-start; min-height: 48px; padding: 0.55rem 0; cursor: pointer; }
.check input { position: absolute; opacity: 0; }
.check .caja { flex: none; width: 28px; height: 28px; margin-top: 0.1rem; border: 2px solid var(--gris); border-radius: 8px; transition: background 0.2s, border-color 0.2s; }
.check input:checked + .caja { background: var(--luz); border-color: var(--luz); }
.check input:checked + .caja::after { content: ""; display: block; width: 6px; height: 12px; margin: 3px 0 0 8px; border: solid var(--luz-texto); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.check input:focus-visible + .caja { outline: 3px solid var(--luz); outline-offset: 2px; }
.progreso { font: 500 0.95rem var(--mono); color: var(--luz); }
.solo-imprimir { display: none; }
.numeros { list-style: none; margin: 0; padding: 0; }
.numeros a { display: flex; align-items: baseline; gap: 1rem; min-height: 56px; padding: 0.5rem 0; border-bottom: 1px solid var(--linea); text-decoration: none; }
.numeros b { min-width: 3.5rem; font: 700 1.8rem var(--display); color: var(--luz); }
.ajustes { display: grid; gap: 0.6rem; }

/* ---- arranque ---- */
.arranque { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--noche); }
.arr-curvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.arr-curva { fill: none; stroke: var(--luz); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0.35; stroke-dasharray: 1; stroke-dashoffset: 0; }
.arr-centro { position: relative; z-index: 1; width: min(560px, 90%); text-align: center; }
.arr-nota { margin: -0.4rem 0 1rem; font-size: 0.64rem; letter-spacing: 0.1em; }
.arr-titulo { margin: 0.4rem 0 1rem; font: 700 clamp(2.4rem, 11vw, 4.4rem)/1 var(--display); letter-spacing: 0.02em; }
.arr-sub { min-height: 4.6em; margin: 0 0 1.4rem; font: 500 1.15rem/1.45 var(--display); color: var(--luz); }

/* ---- emergencia ---- */
.emergencia { position: fixed; inset: 0; z-index: 150; display: flex; flex-direction: column; padding: max(1rem, env(safe-area-inset-top)) 1.2rem 1.2rem; background: #000; color: #fff1e8; overflow-y: auto; }
.em-cerrar { align-self: flex-end; min-height: 48px; padding: 0 1rem; border: 2px solid #fff1e8; border-radius: 999px; background: none; font-weight: 700; }
.em-cuerpo { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem; max-width: 640px; margin: 0 auto; width: 100%; }
.em-cuerpo h2 { margin: 0; font: 700 2.2rem var(--display); }
.em-opciones { display: grid; gap: 0.8rem; }
.em-op, .em-btn { min-height: 72px; padding: 0 1.2rem; border: 2px solid #ff5a36; border-radius: 16px; background: none; font: 700 1.5rem var(--display); color: #fff1e8; text-align: left; }
.em-btn { min-height: 64px; text-align: center; flex: 1; } .em-btn[disabled] { opacity: 0.3; }
.em-sig { background: #ff5a36; color: #000; }
.em-n { margin: 0; font: 500 0.85rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #ff9b84; }
.em-paso { margin: 0; font: 700 clamp(1.8rem, 7vw, 2.4rem)/1.2 var(--display); }
.em-cuenta { margin: 0; font: 700 5rem var(--display); color: #ff5a36; }
.em-nav { display: flex; gap: 0.8rem; margin-top: 0.6rem; }
.em-tel { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; font-size: 1.1rem; }
.em-tel a { text-decoration: none; } .em-tel b { color: #ff5a36; font-size: 1.4rem; }
body.em-abierta .hoja, body.em-abierta .cab { visibility: hidden; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; } }
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; font-size: 12pt; }
  .mapa, .pins, .cab, .franja, .retic, .mapa-ctl, .tabs, .tars-linea, .arranque, .emergencia, .acciones-dos, .puntos, .fuentes { display: none !important; }
  .hoja { position: static !important; display: block !important; width: auto !important; height: auto !important; max-height: none !important; padding: 0 !important; overflow: visible !important; background: #fff !important; border: 0 !important; }
  .hoja::before, .hoja::after { display: none !important; }
  .vistas { display: block !important; height: auto !important; overflow: visible !important; padding: 0 !important; }
  .solo-imprimir { display: block !important; margin: 0 0 8mm; padding-bottom: 4mm; border-bottom: 2px solid #000; }
  .solo-imprimir h1 { margin: 0; font: 700 20pt var(--display); text-transform: uppercase; }
  .solo-imprimir p { margin: 1mm 0 0; font: 400 10pt var(--mono); }
  .titulo-vista { display: none; }
  .codigo, .sub, .mono, .mini, .aviso, .progreso { color: #000 !important; }
  .sub { margin: 6mm 0 2mm; font-size: 13pt; }
  .check li { break-inside: avoid; }
  .check li label { min-height: 0; padding: 1.2mm 0; }
  .check .caja { width: 5mm; height: 5mm; border: 1.5px solid #000; border-radius: 1mm; margin-top: 0.6mm; }
  .check input:checked + .caja { background: #000; border-color: #000; }
  .check input:checked + .caja::after { width: 1.4mm; height: 2.6mm; margin: 0.4mm 0 0 1.2mm; border-color: #fff; border-width: 0 0.5mm 0.5mm 0; }
  .nivel-plan { break-inside: auto; }
  a { color: #000; text-decoration: none; }
}


/* ---- banco de semillas: filas que se abren ---- */
.como { margin: 0.6rem 0 1rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--luz); background: rgb(127 227 255 / 0.06); font-size: 0.95rem; }
.como b { color: var(--luz); } .como ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }
.orden { display: flex; gap: 0.5rem; margin: 0.4rem 0 0.8rem; }
.orden button { flex: 1; min-height: 44px; border: 1px solid var(--linea); border-radius: 4px; background: none; font: 500 0.78rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gris); }
.orden button.on { border-color: var(--luz); color: var(--luz); }
.cultivos { list-style: none; margin: 0.4rem 0; padding: 0; }
.cult { border-bottom: 1px solid var(--linea); }
.cult > button { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.2rem 1rem; width: 100%; min-height: 64px; padding: 0.7rem 0; border: 0; background: none; text-align: left; color: var(--tinta); }
.cult .nom { font: 700 1.15rem var(--display); }
.cult .kc { grid-row: span 2; grid-column: 2; text-align: right; font: 700 1.5rem var(--display); color: var(--luz); line-height: 1; }
.cult .kc small { display: block; margin-top: 0.2rem; font: 500 0.62rem var(--mono); letter-spacing: 0.08em; color: var(--gris); }
.cult .res { font-size: 0.85rem; color: var(--gris); }
.cult[data-abierto="true"] .nom { color: var(--luz); }
.cult-det { padding: 0 0 1rem; }
.cult-det[hidden] { display: none; }
.meses { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: 0.4rem 0 0.2rem; }
.meses i { display: grid; place-items: center; height: 30px; border-radius: 3px; background: var(--linea); font: 500 0.62rem var(--mono); font-style: normal; color: var(--gris); }
.meses i.s { background: var(--luz); color: var(--luz-texto); } .meses i.c { background: var(--huerta); color: #0b1a07; } .meses i.sc { background: linear-gradient(135deg, var(--luz) 50%, var(--huerta) 50%); color: #0b1a07; }
.meses i.h { outline: 2px solid var(--tinta); outline-offset: 1px; }
.cult-det dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.9rem; margin: 0.6rem 0; }
.cult-det dt { color: var(--gris); font-size: 0.85rem; } .cult-det dd { margin: 0; }

/* ---- mapa instrumento: retícula, anillos de alcance, radar, mira y telemetría ---- */
.rej-fina { fill: none; stroke: rgb(127 227 255 / 0.1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rej-gruesa { fill: none; stroke: rgb(127 227 255 / 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.anillo-alcance { fill: none; stroke: var(--luz); stroke-width: 1.2; stroke-dasharray: 6 10; vector-effect: non-scaling-stroke; opacity: 0.55; transform-box: fill-box; transform-origin: center; animation: giro 160s linear infinite; }
.mira { stroke: var(--luz); stroke-width: 1; stroke-dasharray: 2 8; vector-effect: non-scaling-stroke; opacity: 0.5; }
.radar-giro { transform-box: view-box; transform-origin: 0 0; animation: giro 7s linear infinite; }
.radar-linea { stroke: var(--luz); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0.7; }
@keyframes giro { to { transform: rotate(360deg); } }
.pin-rango span { left: 6px; top: -18px; padding: 0 4px; background: none; color: var(--luz); opacity: 0.8; font-size: 0.64rem; }
.flujo { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 3 14; animation: marcha 1.4s linear infinite; pointer-events: none; }
.falla-flujo { stroke: #fff; stroke-width: 3; opacity: 0.9; }
.ruta-flujo { stroke: #fff; stroke-width: 2.5; }
@keyframes marcha { to { stroke-dashoffset: -17; } }
.tele { position: fixed; z-index: 24; left: 12px; bottom: calc(64svh + 12px); display: grid; gap: 1px; padding: 6px 8px; border-left: 2px solid var(--luz); background: rgb(6 10 18 / 0.7); font-size: 0.62rem; letter-spacing: 0.08em; color: var(--luz); pointer-events: none; }
.tele-escala { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tele-escala i { display: block; height: 6px; border: 1px solid var(--luz); border-top: 0; min-width: 4px; }
.tele-escala b { font-weight: 500; color: var(--tinta); }
.norte { position: fixed; z-index: 24; right: 62px; top: 134px; display: grid; justify-items: center; gap: 2px; font-size: 0.7rem; color: var(--luz); pointer-events: none; }
.norte i { width: 0; height: 0; border: 7px solid transparent; border-bottom: 14px solid var(--luz); border-top: 0; }
@media (min-width: 900px) { .tele { left: 490px; bottom: 14px; } .norte { right: 64px; top: 112px; } .mapa-ctl { top: 106px; } }
@media (prefers-reduced-motion: reduce) { .radar-giro, .anillo-alcance, .falla-trazo, .ruta-trazo { animation: none !important; } }
@media print { .tele, .norte { display: none !important; } }