:root{
  --cream:#f8ecdc;
  --cream-05:rgba(248,236,220,.05);
  --cream-08:rgba(248,236,220,.08);
  --cream-13:rgba(248,236,220,.13);
  --cream-16:rgba(248,236,220,.16);
  --cream-3:rgba(248,236,220,.3);
  --cream-4:rgba(248,236,220,.4);
  --cream-45:rgba(248,236,220,.45);
  --cream-5:rgba(248,236,220,.5);
  --cream-6:rgba(248,236,220,.6);
  --orange:#ff8a3a;
  --orange-hover:#ffa25c;
  --orange-dark:#e0491f;
  --orange-text:#20120a;
  --teal:#5fd6c6;
  --teal-bg:rgba(53,194,177,.14);
  --teal-border:rgba(53,194,177,.4);
  --bg-1:#241509;
  --bg-2:#110a07;
  --font-head:'Alfa Slab One',serif;
  --font-body:'Schibsted Grotesk',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:#0d0907;
  font-family:var(--font-body);
  color:var(--cream);
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit}
input{font:inherit}
.hidden{display:none!important}

/* `width:100%` no es decorativo: a partir de 560px el body pasa a flex y, como
   TODO el contenido de #app son .screen posicionadas en absolute, su tamaño de
   contenido es 0 — sin un ancho explícito el flex item se encogía a los 18px
   de sus propios bordes y en una tablet la app se veía como una pantalla
   negra. */
#app{position:relative;height:100vh;height:100dvh;width:100%;max-width:520px;margin:0 auto;overflow:hidden;background:var(--bg-2)}
@media (min-width:560px){
  body{display:flex;justify-content:center;align-items:center}
  #app{flex:0 0 auto}
}
/* El marco de "móvil de escritorio" solo tiene sentido con ratón: en una
   tablet el dispositivo YA es táctil, así que ahí la app ocupa la pantalla
   entera (acotada a su ancho de columna) en vez de dibujar un móvil dentro
   de otro. */
@media (min-width:560px) and (hover:hover) and (pointer:fine){
  body{padding:20px 0}
  #app{height:min(844px, calc(100dvh - 40px));border-radius:36px;box-shadow:0 30px 70px rgba(0,0,0,.6);border:9px solid #0a0605}
}

.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  opacity:1;transform:scale(1);transition:opacity .16s ease,transform .16s ease;
}
.screen.screen-entering{opacity:0;transform:scale(.98)}
.screen.bg-plain{background:linear-gradient(180deg,var(--bg-1),var(--bg-2))}
.screen.bg-glow{background:radial-gradient(120% 55% at 50% -6%, rgba(255,138,58,.30), rgba(255,138,58,0) 62%),linear-gradient(180deg,#2a1a12,#150e0a 46%,#110a07)}
.screen.bg-glow-r{background:radial-gradient(115% 52% at 80% -6%, rgba(255,138,58,.30), rgba(255,138,58,0) 60%),linear-gradient(180deg,#2a1a12,#150e0a 46%,#110a07)}
.screen::before{
  content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(248,236,220,.09) .6px, transparent .7px);background-size:4px 4px;
}
.screen > *{position:relative}

/* Hides the scrollbar track/thumb without disabling scrolling — the app is
   meant to feel like a native screen, and a visible scrollbar (especially
   the horizontal one under the hourly UV row) reads as a web page. Applied
   everywhere something scrolls: the main screen area, modals, and the
   horizontal hour strip (#home-hourly, styled inline in index.html). */
.scr-scroll,
.modal-card,
#home-hourly{
  scrollbar-width:none;      /* Firefox */
  -ms-overflow-style:none;   /* legacy Edge */
}
.scr-scroll::-webkit-scrollbar,
.modal-card::-webkit-scrollbar,
#home-hourly::-webkit-scrollbar{
  display:none;              /* Chrome, Safari, Chromium Edge */
}

/* Scrollable content area above a fixed footer (nav bar / CTA buttons),
   so the footer never gets pushed below the fold on tall content. */
.scr-scroll{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:13px;
  padding:calc(env(safe-area-inset-top) + 16px) 20px 16px;
}
.scr-footer{
  /* env(safe-area-inset-bottom) is unreliable on Android WebView (it's
     primarily an iOS Safari feature and often just resolves to 0 here),
     so a comfortable fixed minimum matters more than the env() add-on. */
  position:relative;flex:none;display:flex;flex-direction:column;gap:13px;
  padding:0 20px max(36px, calc(env(safe-area-inset-bottom) + 26px));
}

.h1{font:400 26px/1.15 var(--font-head);color:var(--cream);text-wrap:pretty;margin:0}
.h1-lg{font:400 34px/1.1 var(--font-head);color:var(--cream);letter-spacing:.01em;margin:0}
.sub{font:500 13px/1.5 var(--font-body);color:var(--cream-5);margin:8px 0 0;text-wrap:pretty}
.label{font:700 10.5px var(--font-body);letter-spacing:.14em;color:var(--teal);text-transform:uppercase}

.progress-dots{display:flex;gap:6px;margin-top:4px}
.progress-dots span{flex:1;height:4px;border-radius:3px;background:var(--cream-16)}
.progress-dots span.on{background:var(--orange)}

.wordmark{font:400 34px/1 var(--font-head);color:var(--cream);letter-spacing:.01em;text-align:center}
.wordmark .dot{color:var(--orange)}
.wordmark.sm{font-size:19px;text-align:left}

.card{background:var(--cream-05);border:1.5px solid var(--cream-13);border-radius:18px;padding:15px 16px}
.card-lg{border-radius:20px;padding:18px}

.btn{
  border-radius:16px;padding:18px;text-align:center;font:400 17px var(--font-head);
  cursor:pointer;box-shadow:4px 4px 0 rgba(0,0,0,.45);border:none;width:100%;
}
.btn-primary{background:var(--orange);color:var(--orange-text)}
.btn-primary:active{background:var(--orange-hover)}
.btn-ghost{background:none;border:1.5px solid var(--cream-16);color:var(--cream);box-shadow:none}
.btn-ghost:active{background:var(--cream-08)}
.btn-text{background:none;border:none;box-shadow:none;text-align:center;font:600 13px var(--font-body);color:var(--cream-4);cursor:pointer;padding:4px}

.opt-row{display:flex;justify-content:space-between;align-items:center;background:var(--cream-05);border:1.5px solid var(--cream-16);border-radius:15px;padding:14px 16px;cursor:pointer}
.opt-row.on{background:var(--cream-08);border:2px solid var(--orange);padding:13px 15px}
.opt-row .t{font:600 15px var(--font-body);color:var(--cream)}
.opt-row .m{font:500 12px var(--font-body);color:var(--cream-3)}

.note{display:flex;gap:11px;align-items:flex-start;background:var(--cream-04,rgba(248,236,220,.04));border-radius:16px;padding:14px 15px}
.note .dot2{width:7px;height:7px;border-radius:50%;background:var(--cream-3);margin-top:6px;flex:none}
.note p{font:500 12px/1.45 var(--font-body);color:var(--cream-45);margin:0}

.stat{font:400 20px var(--font-head);color:var(--cream)}
.big-num{font:400 clamp(58px, 22vw, 84px)/.84 var(--font-head);color:var(--orange);text-shadow:3px 3px 0 rgba(0,0,0,.4)}

.pill{background:var(--orange);color:var(--orange-text);border-radius:7px;padding:5px 10px;font:700 11px var(--font-body);letter-spacing:.12em;display:inline-block}

.toprow{display:flex;justify-content:space-between;align-items:center}
.livebadge{display:flex;align-items:center;gap:7px;background:var(--teal-bg);border:1.5px solid var(--teal-border);border-radius:9px;padding:6px 10px;font:700 10.5px var(--font-body);letter-spacing:.1em;color:var(--teal)}

.searchrow{display:flex;gap:8px}
.searchbox{flex:1;display:flex;align-items:center;gap:9px;background:var(--cream-08);border:1.5px solid var(--cream-16);border-radius:11px;padding:11px 13px;font:500 13px var(--font-body);color:var(--cream-45)}
.searchbox input{background:none;border:none;outline:none;color:var(--cream);width:100%}
.searchbox input::placeholder{color:var(--cream-45)}
.gpsbtn{display:flex;align-items:center;gap:6px;background:var(--cream);color:#1a110c;border:none;border-radius:11px;padding:11px 13px;font:700 12px var(--font-body);letter-spacing:.04em;cursor:pointer}
@keyframes pulseHint{0%,100%{box-shadow:0 0 0 0 rgba(255,138,58,.55)}50%{box-shadow:0 0 0 7px rgba(255,138,58,0)}}
.gpsbtn.pulse-hint{animation:pulseHint 1.8s ease-in-out infinite}
.gpsbtn.loading{opacity:.55;cursor:default;animation:none}
.gpsbtn:disabled{pointer-events:none}

.uvcard{position:relative;background:linear-gradient(165deg,#3a2114,#211208);border:1.5px solid var(--cream-16);border-radius:22px;padding:0 0 16px}
/* The mask must be as tall as the card's own corner radius (22px), not just
   the 8px stripe height — a border-radius bigger than an element's height
   gets silently clamped down by the browser, which made the mask's corner
   noticeably tighter than the card's real curve and let the stripe's
   corners poke out past it. Sizing the mask to the full radius keeps its
   curve identical to the card's, and it's positioned absolutely so it
   doesn't take up any extra layout space. */
.candystripe-mask{position:absolute;top:0;left:0;right:0;height:22px;border-radius:22px 22px 0 0;overflow:hidden;pointer-events:none}
.candystripe{position:absolute;top:0;left:0;right:0;height:8px;background:repeating-linear-gradient(90deg,var(--orange) 0 13px,var(--orange-dark) 13px 26px)}
.uvcard-in{padding:22px 18px 0}
.locrow{display:flex;align-items:center;gap:7px;font:700 11px var(--font-body);letter-spacing:.06em;color:var(--teal)}
.locdot{width:6px;height:6px;border-radius:50%;background:var(--teal)}
/* En pantallas de 320px el número grande (84px) más la columna de la derecha
   no caben y el texto se salía de la tarjeta. Escalar el número con el ancho
   disponible en vez de fijarlo mantiene la composición intacta en un móvil
   normal y la deja entrar en uno pequeño. */
.uvline{display:flex;align-items:flex-end;gap:14px;margin-top:8px;min-width:0}
.uvline > div:first-child{min-width:0}
.uvright{flex:1;min-width:0;padding-bottom:4px;border-left:1.5px solid var(--cream-16);padding-left:14px}
.small-label{font:700 10px var(--font-body);letter-spacing:.13em;color:var(--cream-45)}
.uvsrc{margin-top:13px;font:500 10.5px var(--font-body);color:var(--cream-3);letter-spacing:.02em}

/* Fila de nubosidad. El caso que importa de verdad es "hay nubes pero el UV
   sigue alto": ahí se pone en ámbar, porque es justo cuando uno se confía —
   la nube quita el calor que notas, no la radiación que te quema. */
.cloudrow{display:flex;align-items:center;gap:10px;margin-top:14px;padding:9px 11px;border-radius:13px;background:var(--cream-05);border:1px solid var(--cream-16)}
.cloudrow.warn{background:rgba(255,138,58,.12);border-color:rgba(255,138,58,.42)}
.cloudrow .cloud-ico{font-size:17px;line-height:1;flex:none}
.cloudrow .cloud-text{min-width:0}
.cloudrow #home-cloud-head{font:700 12px var(--font-body);color:var(--cream)}
.cloudrow.warn #home-cloud-head{color:var(--orange)}
.cloudrow .cloud-sub{margin-top:2px;font:500 11px/1.35 var(--font-body);color:var(--cream-45)}

/* Tarjeta de curiosidades. Cambia sola cada cierto tiempo, así que el texto se
   funde en vez de saltar: un cambio brusco a media lectura se lee como un
   fallo, y con la transición se entiende que es la tarjeta pasando de página. */
.factcard{background:var(--cream-05);border:1px solid var(--cream-16);border-radius:16px;padding:13px 15px 15px}
.factcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.factnext{background:var(--cream-08);border:none;border-radius:9px;width:26px;height:26px;padding:0;flex:none;
  cursor:pointer;color:var(--cream-45);font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.factnext:active{background:var(--orange);color:var(--orange-text)}
.facttext{margin:9px 0 0;font:500 12.5px/1.5 var(--font-body);color:var(--cream-6);
  opacity:1;transition:opacity .22s ease}
.facttext.swapping{opacity:0}

/* ---------- sesión: UV en vivo, riesgo y ajustes en caliente ---------- */
.trendchip{font:700 10px var(--font-body);letter-spacing:.1em;color:var(--teal);
  background:rgba(95,214,198,.12);border-radius:6px;padding:4px 8px}
.trendchip.up{color:var(--orange);background:rgba(255,138,58,.14)}
.uvsteps{display:flex;justify-content:space-between;gap:8px;margin-top:8px}
.uvsteps > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.uvsteps > div:nth-child(2){align-items:center}
.uvsteps > div:last-child{align-items:flex-end}
.uvsteps-k{font:600 9.5px var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--cream-3)}
.uvsteps b{font:400 17px var(--font-head);color:var(--cream)}

.minitrack{height:4px;border-radius:3px;background:var(--cream-08);margin-top:9px;overflow:hidden}
.minifill{height:100%;width:0;border-radius:3px;background:var(--orange);transition:width .3s ease}
.minifill.risk{background:var(--teal)}
.minifill.risk.warn{background:#ffb454}
.minifill.risk.danger{background:#ff5c47}

/* Cinco superficies no caben en una línea a 320px, así que esta fila se parte
   en dos en vez de desbordar la tarjeta. Necesita una base distinta de 0: con
   `flex:1` a secas todos los hijos caben siempre en una línea y nunca envuelve. */
.pillrow.wrap{flex-wrap:wrap}
/* La base decide cuándo envuelve (flexbox parte líneas ANTES de encoger), así
   que 54px la deja en una sola fila en un móvil normal y la parte en dos en
   uno de 320px. Sin min-width, para que ningún idioma corte la palabra. */
.pillrow.wrap > div{flex:1 1 54px}

/* ---------- mejor franja del día ---------- */
.winbell{background:var(--cream-08);border:none;border-radius:9px;width:30px;height:30px;padding:0;flex:none;
  cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;filter:grayscale(1);opacity:.55}
.winbell.on{background:rgba(255,138,58,.16);filter:none;opacity:1}
.winrow{display:flex;align-items:center;gap:11px;margin-top:11px;padding:11px 12px;border-radius:14px;
  background:var(--cream-05);border:1px solid var(--cream-16)}
.winrow.pick{background:rgba(255,138,58,.1);border-color:rgba(255,138,58,.38)}
.winrow-main{flex:1;min-width:0}
.winrow-time{font:400 17px var(--font-head);color:var(--cream)}
.winrow.pick .winrow-time{color:var(--orange)}
.winrow-sub{margin-top:3px;font:500 11px var(--font-body);color:var(--cream-45)}
.winrow-tag{flex:none;font:700 8.5px var(--font-body);letter-spacing:.1em;color:var(--cream-3);
  background:var(--cream-08);border-radius:5px;padding:4px 6px;text-align:center;max-width:74px}
.winrow.pick .winrow-tag{color:var(--orange-text);background:var(--orange)}
.winnote{margin:11px 0 0;font:500 11px/1.45 var(--font-body);color:var(--cream-3)}

.adjust-label{margin-top:14px;margin-bottom:8px;font:600 12px var(--font-body);color:var(--cream-6)}
.adjust-hint{margin:12px 0 0;font:500 11px/1.45 var(--font-body);color:var(--cream-3)}

@keyframes pulseSun{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.95;transform:scale(1.06)}}
.sunpulse{transform-box:fill-box;transform-origin:center;animation:pulseSun 3.2s ease-in-out infinite}


.zonerow{display:flex;align-items:center;gap:12px;background:var(--cream-05);border:1px solid var(--cream-16);border-radius:14px;padding:9px 12px;cursor:pointer}
.zonerow.active{border:2.5px solid var(--orange)}
.zoneswatch{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:0 0 0 1.5px rgba(248,236,220,.22)}
.zonetrack{height:4px;border-radius:3px;background:var(--cream-13);margin-top:8px}
.zonefill{height:4px;border-radius:3px;background:var(--orange)}

/* "Sol recomendado tomado hoy" — the headline progress bar. The fill eases
   rather than snapping so accumulating sun reads as motion, and it shifts to a
   warning gradient once the erythemal dose passes the personal alert line. */
.scoretrack{position:relative;height:14px;border-radius:9px;background:var(--cream-13);margin-top:12px;overflow:hidden}
.scoretrack::after{content:'';position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 0 0 1px var(--cream-13);pointer-events:none}
.scorefill{height:100%;width:0%;border-radius:9px;background:linear-gradient(90deg,#ffb066,var(--orange) 55%,#ffd9a8);box-shadow:0 0 14px rgba(255,138,58,.45);transition:width .9s cubic-bezier(.4,0,.2,1),background .4s ease}
.scorefill.risk{background:linear-gradient(90deg,#e0491f,#ff5a5a);box-shadow:0 0 14px rgba(255,90,90,.5)}
.scorelegend{display:flex;gap:14px;margin-top:12px}
.scoreleg{flex:1;min-width:0}
.scoreleg-top{display:flex;align-items:center;gap:6px;font:600 10.5px var(--font-body);color:var(--cream-45)}
.scoredot{width:7px;height:7px;border-radius:50%;flex:none}
.scoredot.vitd{background:var(--orange)}
.scoredot.no{background:var(--teal)}
.scoresub{height:3px;border-radius:2px;background:var(--cream-13);margin-top:6px;overflow:hidden}
.scoresub-fill{height:100%;width:0%;border-radius:2px;transition:width .9s cubic-bezier(.4,0,.2,1)}
.scoresub-fill.vitd{background:var(--orange)}
.scoresub-fill.no{background:var(--teal)}
/* Burn risk lives in its own meter, deliberately separated from the progress
   bar above by a hairline rule: it is a warning channel, not progress, and
   must never be read as "how far along am I". */
.riskrow{margin-top:13px;padding-top:12px;border-top:1px solid var(--cream-13)}
.scoredot.risk{background:var(--cream-3)}
.scoredot.risk.moderate{background:#e0a01f}
.scoredot.risk.high{background:var(--orange-dark)}
.scoredot.risk.danger{background:#ff5a5a;box-shadow:0 0 7px rgba(255,90,90,.7)}
.scoresub-fill.risk{background:var(--cream-3)}
.scoresub-fill.risk.moderate{background:#e0a01f}
.scoresub-fill.risk.high{background:var(--orange-dark)}
.scoresub-fill.risk.danger{background:#ff5a5a}
/* Small circled "i" that opens the explanation of a metric. */
.infobtn{width:14px;height:14px;flex:none;border-radius:50%;border:1px solid var(--cream-3);background:none;color:var(--cream-45);font:700 9px/1 var(--font-body);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.infobtn:active{background:var(--cream-13)}

/* Science-credibility badge (onboarding + settings). Deliberately quiet:
   a thin outlined chip, never a banner that interrupts the flow. */
.sciencechip{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:rgba(95,214,198,.07);border:1px solid var(--teal-border);border-radius:14px;padding:11px 13px;cursor:pointer;color:var(--teal);font:600 11px/1.35 var(--font-body);letter-spacing:.01em}
.sciencechip .ico{font-size:14px;flex:none}
.sciencechip .chev{margin-left:auto;opacity:.6;flex:none}
.sciencerow{background:var(--cream-05);border:1px solid var(--cream-13);border-radius:14px;padding:12px 13px}
.sciencerow + .sciencerow{margin-top:8px}
.sciencerow .mech{font:600 12.5px/1.4 var(--font-body);color:var(--cream)}
.sciencerow .lvl{display:inline-block;margin-top:7px;font:700 9px var(--font-body);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:6px;background:var(--teal-bg);color:var(--teal);border:1px solid var(--teal-border)}
.sciencerow .lvl.moderate{background:rgba(255,138,58,.12);color:var(--orange);border-color:rgba(255,138,58,.35)}
.sciencerow .src{margin-top:7px;font:500 11px/1.45 var(--font-body);color:var(--cream-4)}
.edulist{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.edulist li{position:relative;padding-left:14px;font:500 12.5px/1.45 var(--font-body);color:var(--cream-6)}
.edulist li::before{content:'';position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%;background:var(--teal)}
.edulist.risk li::before{background:#ff8a8a}

/* Per-session UV sparkline in the diary. */
.uvspark{display:block;width:64px;height:22px;flex:none;opacity:.9}

/* ==========================================================================
   TUTORIAL GUIADO — spotlight coach-mark tour shown once, right after
   onboarding lands on Home. A "hole" div tracks the target element's real
   bounding box and animates between steps with the same easing curve as the
   screen transitions elsewhere, so it reads as part of the same product
   rather than a bolted-on library. The darkening is a single oversized
   box-shadow on the hole itself (cheaper and crisper than an SVG mask), and
   a soft pulsing ring around it does the "look here" work instead of text.
   ========================================================================== */
.tutorial-overlay{position:absolute;inset:0;z-index:400;pointer-events:none}
.tutorial-overlay.hidden{display:none}

/* The hole/arrow used to slide (top/left transitions) between steps. Across
   two DIFFERENT, distant elements that reads as a box crawling over whatever
   UI happens to sit between them — and because that geometric transition
   (~550ms) outlasted the card's own content swap, a step change could show
   the spotlight straddling the old and new target at once, half-covering
   each. Instead the hole/arrow now only ever fade: hidden, jumped instantly
   to the new (already-correct) position while invisible, then faded back in
   — so the spotlight never visibly travels across the screen, it simply
   appears in the right place every time, which reads as more deliberate than
   a slide ever would for jumps this large anyway. */
.tutorial-hole{
  position:absolute;top:0;left:0;width:0;height:0;border-radius:18px;
  box-shadow:0 0 0 9999px rgba(8,5,3,.86);
  opacity:0;transition:opacity .2s ease;
  pointer-events:none;
}
.tutorial-hole.show{opacity:1}
.tutorial-hole::before{
  content:'';position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid var(--orange);opacity:0;
}
.tutorial-hole.pulse::before{animation:tutorialPulse 1.7s cubic-bezier(.4,0,.6,1) infinite}
@keyframes tutorialPulse{
  0%{opacity:.85;transform:scale(1)}
  70%{opacity:0;transform:scale(1.08)}
  100%{opacity:0;transform:scale(1.08)}
}

.tutorial-card{
  position:absolute;width:272px;max-width:calc(100% - 32px);
  background:linear-gradient(165deg,#241609,#150e0a);
  border:1.5px solid rgba(255,138,58,.4);border-radius:20px;padding:18px 20px 16px;
  box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.3);
  pointer-events:auto;opacity:0;transform:translateY(10px) scale(.95);
  transition:opacity .32s ease,transform .4s cubic-bezier(.34,1.56,.64,1);
}
.tutorial-card.show{opacity:1;transform:translateY(0) scale(1)}
.tutorial-card.fading{opacity:0;transform:translateY(-6px) scale(.97);transition:opacity .18s ease,transform .18s ease}

/* Cuadrado girado 45°: la esquina superior izquierda queda arriba del todo y
   la inferior derecha abajo, así que la punta que asoma la forman siempre dos
   bordes contiguos. Se dejan visibles solo esos dos y se quitan los del lado
   que queda tapado por el card. */
.tutorial-arrow{
  position:absolute;width:14px;height:14px;background:#241609;
  border:1.5px solid rgba(255,138,58,.4);border-radius:3px;
  transform:rotate(45deg);opacity:0;transition:opacity .2s ease;
  pointer-events:none;
}
.tutorial-arrow.show{opacity:1}
.tutorial-arrow.detached{opacity:0!important}
.tutorial-arrow.points-up{border-right:none;border-bottom:none}
.tutorial-arrow.points-down{background:#150e0a;border-left:none;border-top:none}

.tutorial-icon{
  width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:19px;background:rgba(255,138,58,.14);border:1px solid rgba(255,138,58,.3);margin-bottom:11px;
}
.tutorial-title{font:400 19px var(--font-head);color:var(--cream);letter-spacing:.01em;text-wrap:balance}
.tutorial-body{margin:7px 0 0;font:500 12.5px/1.5 var(--font-body);color:var(--cream-6)}

.tutorial-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:10px}
.tutorial-dots{display:flex;gap:5px}
.tutorial-dots span{width:5px;height:5px;border-radius:50%;background:var(--cream-16);transition:background .25s ease,width .25s ease}
.tutorial-dots span.on{background:var(--orange);width:14px;border-radius:3px}

.tutorial-btns{display:flex;align-items:center;gap:6px}
.tutorial-btn{border:none;border-radius:10px;cursor:pointer;font:700 12.5px var(--font-body)}
.tutorial-btn.primary{background:var(--orange);color:var(--orange-text);padding:9px 16px}
.tutorial-btn.primary:active{background:var(--orange-hover)}
.tutorial-btn.ghost{background:var(--cream-08);color:var(--cream-6);width:32px;height:32px;padding:0;font-size:16px;line-height:1}
.tutorial-btn.ghost:disabled{opacity:0;pointer-events:none;width:0;margin:0}

.tutorial-skip{
  display:block;width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--cream-08);
  background:none;border-left:none;border-right:none;border-bottom:none;
  color:var(--cream-3);font:600 11px var(--font-body);letter-spacing:.02em;cursor:pointer;text-align:center;
}
.tutorial-skip:active{color:var(--cream-5)}

/* Peak-UV alert bell, tucked into the corner of "El sol de hoy". Dim until
   armed, so the default (silent) state doesn't compete with the UV number. */
.peakalertbtn{position:absolute;top:14px;right:14px;z-index:2;background:none;border:none;padding:4px;font-size:16px;line-height:1;cursor:pointer;opacity:.45;filter:grayscale(1);transition:opacity .15s ease,filter .15s ease}
.peakalertbtn.on{opacity:1;filter:none}
.peakalertbtn:active{transform:scale(.92)}

.calibcircle{width:190px;height:190px;border-radius:50%;border:2.5px solid rgba(26,17,12,.22);display:flex;align-items:center;justify-content:center;text-align:center}
input.calib{-webkit-appearance:none;appearance:none;width:100%;height:46px;border-radius:10px;background:linear-gradient(90deg,#ffe7d3,#f7d7ba,#ecc19b,#dba678,#c2885a,#a36940,#7e4d2d,#5c3620);outline:none;border:none;cursor:pointer}
input.calib::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:58px;border-radius:6px;background:#1a110c;box-shadow:0 0 0 3px #f8ecdc}
input.calib::-moz-range-thumb{width:16px;height:58px;border-radius:6px;border:none;background:#1a110c;box-shadow:0 0 0 3px #f8ecdc}

.togglerow{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1.5px dotted var(--cream-16)}
.togglerow:last-child{border-bottom:none}
.toggle{width:46px;height:26px;border-radius:8px;position:relative;border:none;cursor:pointer;padding:0;background:var(--cream-16)}
.toggle.on{background:var(--orange)}
.toggle .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:6px;background:rgba(248,236,220,.75);transition:left .15s}
.toggle.on .knob{left:auto;right:3px;background:#20120a}

.navbar{display:flex;justify-content:space-between;padding:2px 6px 6px;font:700 10px var(--font-body);letter-spacing:.1em;color:var(--cream-3)}
.navbar button{background:none;border:none;padding:0;cursor:pointer;color:inherit;font:inherit;letter-spacing:inherit}
.navbar button.on{color:var(--orange)}

.timerbig{font:400 84px/.86 var(--font-head);color:var(--cream);letter-spacing:.01em;text-align:center}

.toast{position:absolute;left:16px;right:16px;bottom:100%;margin-bottom:12px;background:#1a110c;border:1.5px solid var(--orange);color:var(--cream);border-radius:14px;padding:13px 16px;font:600 13px var(--font-body);box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:50;text-align:center;opacity:0;transform:translateY(8px) scale(.97);transition:opacity .22s ease,transform .22s ease}
.toast.show{opacity:1;transform:translateY(0) scale(1)}

.modal-overlay{position:absolute;inset:0;background:rgba(10,6,4,.72);display:flex;align-items:center;justify-content:center;padding:24px;z-index:200}
.modal-card{background:#1a110c;border:1.5px solid var(--cream-16);border-radius:22px;padding:24px 22px;max-width:300px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.modal-title{font:400 20px var(--font-head);color:var(--cream);margin:0 0 10px}
.modal-msg{font:500 14px/1.5 var(--font-body);color:var(--cream-6);margin:0 0 20px}
.modal-actions{display:flex;flex-direction:column;gap:10px}

.side-track{height:7px;border-radius:5px;background:var(--cream-16);margin-top:14px;overflow:hidden}
.side-fill{height:7px;border-radius:5px;background:var(--orange);width:0%;transition:width .3s linear}
.side-fill.over{background:var(--orange-dark)}

.weatherbadge{display:flex;align-items:center;gap:6px;font:600 12px var(--font-body);color:var(--cream-6)}
.weatherbadge .ico{font-size:16px;line-height:1}

.pillrow{display:flex;gap:8px;margin-top:12px}
.pillrow > div{flex:1;border-radius:12px;padding:11px 0;text-align:center;font:500 13px var(--font-body);color:var(--cream-6);background:var(--cream-08);cursor:pointer}
.pillrow > div.on{font-weight:700;color:var(--orange-text);background:var(--orange)}
/* Denser variant for multi-row pickers (e.g. the peak-UV alert): uniform pill
   height and single-line labels so a short "Off" and a longer option never
   produce ragged, mismatched-height boxes in the same row. */
.pillrow.compact > div{padding:0 4px;min-height:40px;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:12.5px}
.pillrow.compact + .pillrow.compact{margin-top:10px}

.sess-row{display:flex;align-items:center;gap:10px;background:var(--cream-05);border:1px solid var(--cream-13);border-radius:14px;padding:11px 13px}
.sess-row .info{flex:1;min-width:0}
.sess-row .date{font:600 13px var(--font-body);color:var(--cream)}
.sess-row .meta{font:500 11px var(--font-body);color:var(--cream-4);margin-top:2px}
.sess-row .icobtn{background:none;border:none;color:var(--cream-4);cursor:pointer;font-size:15px;padding:6px}
.sess-row .icobtn:active{color:var(--cream)}

.modal-field{margin-bottom:14px}
.modal-field label{display:block;font:700 10px var(--font-body);letter-spacing:.1em;color:var(--teal);text-transform:uppercase;margin-bottom:7px}
.modal-field input{width:100%;background:var(--cream-08);border:1.5px solid var(--cream-16);border-radius:12px;padding:11px 13px;color:var(--cream);font:600 14px var(--font-body)}
/* Side-by-side fields (start/end time) in the richer session editor. */
.modal-row{display:flex;gap:10px}
.modal-row .modal-field{flex:1;min-width:0}
.modal-hint{margin:-4px 0 0;font:500 11px/1.4 var(--font-body);color:var(--cream-4)}
.modal-card{max-height:82vh;overflow-y:auto}