/* Helada on the phone.
   A flat sheet with a road-sign verdict: a full-width band carries tonight's answer (red, yellow or green).
   Blue is the working colour (buttons, selection, the ruler); red, yellow and green are kept for the three
   answers. It is read outdoors, on a cheap screen, in the sun: strong contrast, heavy type, 2-3px edges on
   anything that carries meaning. State is never colour alone (shape + words + colour).
   Nunito is bundled (39 KB, OFL): rounded, open letterforms and a plain zero, easy for a hesitant reader.
   Icons are Phosphor (MIT), inlined in movil.js. The page must work with no network. */
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
}
:root {
  --bg: #ffffff; --surface: #ffffff; --wash: #eaf1fd; --ink: #10151c; --muted: #414c58;
  --line: #cdd5df; --field: #5a6675; --focus: #0b57b0;
  --brand: #1f4fbf; --on-brand: #ffffff; --brand-soft: #e6eefc; --brand-ink: #1b46a8;
  --risk: #a3161f; --on-risk: #ffffff; --risk-ink: #a3161f;
  --unsure: #f5c400; --on-unsure: #10151c; --unsure-ink: #6b4300;
  --ok-soft: #dff2e5; --ok-ink: #0f5a33;
  --c-hail: #46566a; --c-sun: #8a5a00; --c-flood: #0b6e75;
  color-scheme: light;
}
/* Dark: the phone's setting, unless the farmer chose with the button (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1319; --surface: #19202a; --wash: #172339; --ink: #f1f4f8; --muted: #adb8c6;
    --line: #364152; --field: #8a97a8; --focus: #8ec2ff;
    --brand: #8fb4ff; --on-brand: #0f1319; --brand-soft: #1b2a47; --brand-ink: #a9c5ff;
    --risk-ink: #ff9aa0; --unsure-ink: #ffcf70; --ok-soft: #12301f; --ok-ink: #7fdcaa;
    --c-hail: #b3c0cf; --c-sun: #ffcf70; --c-flood: #6fd3da;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1319; --surface: #19202a; --wash: #172339; --ink: #f1f4f8; --muted: #adb8c6;
  --line: #364152; --field: #8a97a8; --focus: #8ec2ff;
  --brand: #8fb4ff; --on-brand: #0f1319; --brand-soft: #1b2a47; --brand-ink: #a9c5ff;
  --risk-ink: #ff9aa0; --unsure-ink: #ffcf70; --ok-soft: #12301f; --ok-ink: #7fdcaa;
  --c-hail: #b3c0cf; --c-sun: #ffcf70; --c-flood: #6fd3da;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 500 18px/1.45 "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
h1 { font-size: 26px; line-height: 1.15; font-weight: 900; margin: 0; }
h2 { font-size: 21px; line-height: 1.2; font-weight: 900; margin: 0; }
p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
svg.i { flex: none; display: block; }

/* Header: which plot, signal, language, light or dark */
.top {
  position: sticky; top: 0; z-index: 3; background: var(--bg); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.parcel { background: none; border: 0; text-align: left; padding: 4px 0; display: grid; min-width: 0; min-height: 48px; align-content: center; cursor: pointer; }
.parcel-id { font-weight: 900; font-size: 20px; line-height: 1.15; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.parcel-id > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.parcel-id .i { color: var(--brand-ink); }
.parcel-where { font-size: 15px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-right { flex: none; display: flex; align-items: center; gap: 8px; }
.lang[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.lang { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); background: none; color: var(--brand-ink); font-size: 15px; font-weight: 900; cursor: pointer; display: grid; place-items: center; padding: 0; }
.net { display: flex; align-items: center; gap: 6px; color: var(--ok-ink); font-size: 13px; font-weight: 800; line-height: 1.1; padding: 6px; border-radius: 8px; }
.net .txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.net.off { background: var(--unsure); color: var(--on-unsure); padding: 6px 8px; max-width: 86px; }
.net.off .txt { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }

.notice { background: var(--wash); padding: 10px 16px; font-size: 15px; line-height: 1.4; display: grid; gap: 2px; }
.notice p:first-child { font-weight: 800; color: var(--brand-ink); }

main { max-width: 560px; margin: 0 auto; padding: 16px; }
.loading { padding: 48px 0; color: var(--muted); }

/* Blocks are separated by a rule and air, not boxed. */
.block { padding: 24px 0; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.block.first { border-top: 0; }
.fine { color: var(--muted); font-size: 17px; line-height: 1.4; }
.cap { color: var(--muted); font-size: 15px; line-height: 1.4; }
.err { color: var(--risk-ink); font-weight: 800; }
.with-ico { display: flex; align-items: center; gap: 8px; }
.with-ico .i { color: var(--ok-ink); }

/* Tonight: the verdict band */
.state {
  margin: -16px -16px 0; padding: 20px 16px 18px; border-bottom: 3px solid var(--ink);
  display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center;
}
.state.riesgo { background: var(--risk); color: var(--on-risk); }
.state.no_seguro { background: var(--unsure); color: var(--on-unsure); }
.state.sin_riesgo { background: var(--ok-soft); color: var(--ok-ink); border-bottom-color: var(--ok-ink); }
.state.sin_riesgo .state-night { color: var(--ink); }
.state-title { font-size: clamp(26px, 7.8vw, 32px); line-height: 1.1; font-weight: 900; }
.state-night { font-size: 17px; line-height: 1.3; font-weight: 700; margin-top: 4px; }

.reading { padding: 20px 0 24px; display: grid; gap: 6px; }
.temp { display: flex; align-items: baseline; gap: 6px; margin: -4px 0 2px; }
.num { font-size: 76px; line-height: 1; font-weight: 900; letter-spacing: -0.02em; }
.unit { font-size: 32px; line-height: 1; font-weight: 800; color: var(--muted); }
.ruler { display: block; width: 100%; height: auto; margin: 6px 0 8px; }
.ruler .axis { stroke: var(--field); stroke-width: 2; }
.ruler .tick { stroke: var(--field); stroke-width: 1.5; }
.ruler .lbl { fill: var(--muted); font-size: 13px; font-weight: 700; text-anchor: middle; }
.ruler .warm { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 2; }
.ruler .cold { fill: var(--risk); stroke: var(--ink); stroke-width: 2; }   /* the same red as the band, in both themes */
.ruler .zero { stroke: var(--ink); stroke-width: 3; }
.ruler .zlbl { fill: var(--ink); font-size: 14px; font-weight: 900; text-anchor: middle; }
.ruler .dot { fill: var(--ink); stroke: var(--bg); stroke-width: 3; }

.reasons { list-style: none; margin: 0; padding: 0; }
.reasons li { padding: 14px 0; border-top: 1px solid var(--line); font-weight: 800; }
.reasons li:first-child { border-top: 0; padding-top: 0; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: paso; }
.steps li { counter-increment: paso; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before { content: counter(paso); width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 900; font-size: 17px; line-height: 32px; text-align: center; }
.tag { justify-self: start; font-size: 15px; font-weight: 800; background: var(--unsure); color: var(--on-unsure); border-radius: 6px; padding: 3px 10px; }
.decide { font-weight: 800; }
.call { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; border-radius: 14px; background: var(--brand); color: var(--on-brand); font-size: 23px; font-weight: 900; text-decoration: none; }

.kv { display: grid; grid-template-columns: 1fr auto; margin: 0; font-size: 17px; }
.kv dt, .kv dd { padding: 10px 0; border-top: 1px solid var(--line); margin: 0; }
.kv dt { color: var(--muted); } .kv dd { text-align: right; font-weight: 800; padding-left: 12px; }
.kv .hl { color: var(--brand-ink); font-weight: 900; }
details.block { gap: 0; padding: 0; }
details summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 800; color: var(--brand-ink); cursor: pointer; }
details summary::-webkit-details-marker { display: none; }
details[open] summary svg { transform: rotate(180deg); }
details > .inner { display: grid; gap: 12px; padding-bottom: 24px; }

.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; border-radius: 14px; border: 2px solid var(--brand); background: none; color: var(--brand-ink); padding: 10px 16px; font-weight: 800; line-height: 1.3; cursor: pointer; }
.btn.primary { background: var(--brand); color: var(--on-brand); }
.btn:disabled { border-color: var(--line); color: var(--muted); cursor: default; }

/* Forms */
label, legend { font-weight: 800; line-height: 1.3; padding: 0; }
.q { font-size: 20px; font-weight: 900; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px 0 24px; }
.form > label, .form > fieldset { margin-top: 16px; }
.form > :first-child { margin-top: 0; }
.form > .btn { margin-top: 20px; }
input[type="text"], input[type="date"], textarea {
  width: 100%; min-height: 56px; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--field); background: var(--surface);
}
input:focus, textarea:focus { border-color: var(--brand); }
.temp-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.temp-row input { min-height: 72px; font-size: 40px; font-weight: 900; text-align: right; }
.temp-row .unit { font-size: 28px; }
.sign { min-height: 72px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--field); background: none; font-weight: 800; cursor: pointer; }
.sign[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.sign[aria-pressed="true"]::before { content: "− "; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice { position: relative; min-height: 56px; border-radius: 14px; border: 2px solid var(--field); background: none; font-weight: 800; line-height: 1.2; cursor: pointer; padding: 8px 24px; }
.choice.pic { min-height: 84px; display: grid; gap: 4px; justify-items: center; align-content: center; padding: 10px 8px; }
.choice.c-helada .i { color: var(--brand-ink); } .choice.c-granizo .i { color: var(--c-hail); }
.choice.c-sequia .i { color: var(--c-sun); } .choice.c-inundacion .i { color: var(--c-flood); }
.choice[aria-pressed="true"] { background: var(--brand-soft); border: 3px solid var(--brand); }
.choice[aria-pressed="true"]::after { content: ""; position: absolute; top: 8px; right: 11px; width: 7px; height: 13px; border: solid var(--brand-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }

.stat { font-weight: 800; color: var(--brand-ink); }
.rows { display: grid; }
.item { display: grid; grid-template-columns: 84px 1fr; gap: 0 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.rows .item:first-child { border-top: 0; padding-top: 0; }
.item b { font-size: 24px; line-height: 1.1; font-weight: 900; }
.item.wide { grid-template-columns: 1fr; gap: 4px; }
.item.wide b { font-size: 18px; line-height: 1.3; }
.item .st { display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 1.3; }
.item .st.wait, .item .note { color: var(--unsure-ink); font-weight: 800; }
.item .st.sent { color: var(--ok-ink); font-weight: 800; }
.item .note { grid-column: 1 / -1; font-size: 17px; }

/* Tabs */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs button { position: relative; background: none; border: 0; min-height: 64px; display: grid; gap: 3px; place-content: center; justify-items: center; font-size: 14px; line-height: 1.1; font-weight: 800; color: var(--muted); cursor: pointer; }
.tabs button[aria-current="page"] { color: var(--brand-ink); box-shadow: inset 0 3px 0 var(--brand); }
.badge { position: absolute; top: 6px; left: calc(50% + 8px); min-width: 22px; height: 22px; border-radius: 999px; background: var(--unsure); color: var(--on-unsure); font-size: 13px; font-weight: 900; display: grid; place-items: center; padding: 0 6px; }

/* Plot picker: a bottom sheet */
dialog {
  border: 0; padding: 20px 16px calc(18px + env(safe-area-inset-bottom, 0px)); margin: auto auto 0; width: 100%; max-width: 560px;
  max-height: 86vh; max-height: 86dvh; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink);
}
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog form { display: grid; gap: 14px; }
/* A plain block list: each row is as tall as its three lines. (A grid here squeezed rows to their min-height.) */
.parcel-list { display: block; max-height: 42vh; overflow-y: auto; }
.parcel-opt { position: relative; display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; padding: 12px 40px 12px 0; cursor: pointer; }
.parcel-opt:first-child { border-top: 0; }
.parcel-opt b, .parcel-opt small { display: block; }
.parcel-opt b { font-weight: 800; line-height: 1.3; }
.parcel-opt small { color: var(--muted); font-size: 15px; line-height: 1.4; }
.parcel-opt[aria-pressed="true"] b { font-weight: 900; color: var(--brand-ink); }
.parcel-opt[aria-pressed="true"]::after { content: ""; position: absolute; top: 18px; right: 14px; width: 8px; height: 15px; border: solid var(--brand-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.switch { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-weight: 800; padding-top: 14px; border-top: 1px solid var(--line); }
.switch input { width: 26px; height: 26px; margin: 1px 0 0; accent-color: var(--brand); }

/* Thermometer, demo: the worked example */
.choices.five { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.choices.five .choice { padding: 8px 4px; font-size: 20px; font-weight: 900; }
.choices.five .choice[aria-pressed="true"]::after { display: none; }
.verdict { display: flex; align-items: center; gap: 8px; font-size: 24px; line-height: 1.15; font-weight: 900; }
.verdict.riesgo { color: var(--risk-ink); } .verdict.no_seguro { color: var(--unsure-ink); } .verdict.sin_riesgo { color: var(--ok-ink); }
.ruler .obs { fill: var(--bg); stroke: var(--brand); stroke-width: 3; }

/* Tonight: what the area forecast says, next to what this plot will do */
.vs { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: end; }
.vs .temp { margin: 0; }
.vs-l { font-size: 15px; line-height: 1.25; font-weight: 800; color: var(--muted); margin-bottom: 4px; }
.vs .zone .num { font-size: 40px; color: var(--muted); font-weight: 800; }
.vs .zone .unit { font-size: 20px; }
.vs .plot { border-left: 3px solid var(--ink); padding-left: 16px; }
.vs .plot .vs-l { color: var(--ink); }
.gap { font-weight: 900; font-size: 19px; line-height: 1.3; margin-top: 6px; }

/* Ruler: what each part is, on hover, focus or tap */
.ruler-wrap { position: relative; }
.ruler .hit { fill: transparent; cursor: pointer; }
.ruler .hit:focus-visible { outline: none; stroke: var(--focus); stroke-width: 3; }
.ruler-tip {
  position: absolute; left: 0; bottom: calc(100% - 4px); z-index: 2; width: max-content; max-width: min(100%, 300px);
  background: var(--ink); color: var(--bg); font-size: 15px; line-height: 1.3; font-weight: 800; padding: 8px 12px; border-radius: 10px; pointer-events: none;
}
.ruler-tip::after { content: ""; position: absolute; top: 100%; left: var(--ax, 50%); margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: var(--ink); }

/* Day strip: the last days as cards, most recent first. The chosen one is filled, framed and ticked. */
.days { display: flex; gap: 8px; min-width: 0; overflow-x: auto; margin: 0 -16px; padding: 6px 16px 10px; scroll-snap-type: x proximity; scroll-padding: 0 16px; scrollbar-width: thin; }
.day { position: relative; flex: none; width: 80px; min-height: 96px; border-radius: 14px; border: 2px solid var(--field); background: var(--surface); display: grid; justify-items: center; align-content: center; padding: 8px 4px; cursor: pointer; scroll-snap-align: start; }
.day-wd { font-size: 15px; line-height: 1.2; font-weight: 800; color: var(--muted); }
.day-n { font-size: 32px; line-height: 1.05; font-weight: 900; }
.day-m { font-size: 14px; line-height: 1.2; font-weight: 800; color: var(--muted); }
.day-m.rel { color: var(--brand-ink); font-weight: 900; }
.day-o { font-size: 16px; line-height: 1.2; font-weight: 800; color: var(--brand-ink); }
.day.other { width: 92px; border-style: dashed; }
.day[aria-pressed="true"] { background: var(--brand-soft); border: 3px solid var(--brand); }
.day[aria-pressed="true"]::after { content: ""; position: absolute; top: 5px; right: 9px; width: 5px; height: 10px; border: solid var(--brand-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }

/* The demo that runs by itself: a caption bar above the tabs, and a ring around what it talks about */
.tour {
  position: fixed; left: 0; right: 0; bottom: calc(65px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  background: var(--ink); color: var(--bg); padding: 0 16px 12px; box-shadow: 0 -8px 20px rgba(0, 0, 0, .28);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center;
}
.tour-track { grid-column: 1 / -1; height: 5px; margin: 0 -16px 2px; background: rgba(128, 128, 128, .45); }
.tour-fill { height: 100%; background: var(--unsure); transform-origin: left center; transform: scaleX(0); }
.tour-n { font-size: 14px; line-height: 1.2; font-weight: 900; letter-spacing: .02em; opacity: .8; }
.tour-text { grid-column: 1 / -1; grid-row: 3; font-size: 16px; line-height: 1.35; font-weight: 700; min-height: 4.05em; }
.tour-ctl { display: flex; gap: 6px; }
.tour-ctl button { width: 44px; height: 44px; border-radius: 12px; border: 2px solid currentColor; background: none; color: inherit; display: grid; place-items: center; padding: 0; cursor: pointer; }
.tour-ctl button.main { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.tour-ctl button:disabled { opacity: .35; cursor: default; }
.tour :focus-visible { outline-color: var(--unsure); }
body.touring { padding-bottom: calc(260px + env(safe-area-inset-bottom, 0px)); }
.tour-hl { outline: 4px solid var(--focus); outline-offset: 5px; border-radius: 10px; }
.state.tour-hl { outline-color: currentColor; outline-offset: -9px; border-radius: 0; }
.days.tour-hl { outline-offset: -4px; border-radius: 18px; }
@media (min-width: 600px) { .tour { padding-left: calc(50% - 264px); padding-right: calc(50% - 264px); } .tour-track { margin-left: calc(264px - 50vw); margin-right: calc(264px - 50vw); } }
/* Narrow phones: four controls in the header still leave room for the plot's name */
@media (max-width: 380px) {
  .top { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .top-right { gap: 6px; }
  .lang { width: 40px; height: 40px; }
  .net { padding: 4px; }
  .parcel-id { font-size: 18px; }
}