:root {
  color-scheme: light dark;

  /* Escena */
  --cielo: #F7E29B;
  --sobre-cielo: #14291C;
  --sobre-cielo-2: #33462F;
  --astro: #F3B415;
  --gota-vacia: #6E6426;
  --aspersor: #14291C;
  --sin-senal: #E4E2D2;
  --sobre-sin-senal: #14291C;
  --sobre-sin-senal-2: #3A4A3F;
  --pasto: #1C5533;
  --brizna: #3B8A52;
  --sobre-pasto: #FBFAEF;
  --agua: #0C5F80;
  --sobre-agua: #FFFFFF;
  --gota-agua: #FFFFFF;

  /* Fijos en ambos modos: botones sobre el pasto */
  --aromo: #F7C52D;
  --tinta-fija: #14291C;
  --claro-fijo: #FBFAEF;
  --copihue: #A5103A;

  /* Interfaz */
  --papel: #F5F5E9;
  --superficie: #FFFFF8;
  --superficie-2: #E8ECD8;
  --tinta: #14291C;
  --tinta-2: #46574B;
  --linea: #CDD2BD;
  --borde-control: #6F7C6B;
  --accion: #1C5533;
  --sobre-accion: #FBFAEF;
  --seleccion: #1C5533;
  --sobre-seleccion: #FBFAEF;
  --barra: #1C5533;
  --exito: #1C5533;
  --error: #A5103A;
  --aviso: #FBEDB8;
  --sobre-aviso: #14291C;
  --foco: #0C5F80;
  --velo: rgb(10 20 14 / .55);

  /* Tipografía: siempre en rem, nunca fijar el tamaño raíz en px */
  --f-titulo: Caprasimo, "Cooper Black", Georgia, serif;
  --f-texto: Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-chico: 1rem;
  --t-cuerpo: 1.125rem;
  --t-boton: 1.25rem;
  --t-boton-grande: 1.375rem;
  --t-subtitulo: 1.625rem;
  --t-titulo: 2rem;
  --t-hora: 2.25rem;
  --t-total: 2.75rem;
  --t-estado: clamp(2rem, 11.5cqw, 3rem);
  --t-estado-chico: clamp(1.375rem, 6.2cqw, 1.625rem);
  --t-cuenta: clamp(3rem, 18cqw, 4.75rem);
  --lh-cuerpo: 1.4;
  --lh-titulo: 1.08;

  /* Espacios (base 4) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem;
  --e-5: 1.25rem; --e-6: 1.5rem; --e-8: 2rem; --e-10: 2.5rem;
  --margen: var(--e-4);

  /* Tamaños táctiles */
  --toque: 48px;
  --toque-chip: 52px;
  --toque-accion: 56px;
  --toque-principal: 64px;

  /* Radios */
  --r-chico: 12px;
  --r-control: 14px;
  --r-boton: 18px;
  --r-hoja: 24px;
  --r-total: 999px;

  /* Sombras: solo para lo que flota. Tarjetas y botones son planos. */
  --sombra-hoja: 0 -8px 24px rgb(20 41 28 / .18);
  --sombra-flotante: 0 4px 12px rgb(20 41 28 / .22);

  /* Movimiento */
  --m-rapido: 150ms;
  --m-normal: 250ms;
  --m-hoja: 320ms;
  --m-llenar: 900ms;
  --m-vaciar: 600ms;
  --ease-salida: cubic-bezier(.2, .7, .2, 1);
  --ease-entrada: cubic-bezier(.5, 0, .8, .4);

  /* Áreas seguras */
  --seguro-arriba: env(safe-area-inset-top, 0px);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
  --seguro-izq: env(safe-area-inset-left, 0px);
  --seguro-der: env(safe-area-inset-right, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cielo: #10241A;
    --sobre-cielo: #F1F3E4;
    --sobre-cielo-2: #C2CDB9;
    --astro: #E9DFA8;
    --gota-vacia: #8E9C8C;
    --aspersor: #F1F3E4;
    --sin-senal: #1F2A24;
    --sobre-sin-senal: #F1F3E4;
    --sobre-sin-senal-2: #C2CDB9;
    --pasto: #1D5032;
    --agua: #0E5470;
    --gota-agua: #CFEFFA;

    --papel: #0D1611;
    --superficie: #17231C;
    --superficie-2: #223029;
    --tinta: #F1F3E4;
    --tinta-2: #B9C5B1;
    --linea: #35443A;
    --borde-control: #83917F;
    --accion: #F7C52D;
    --sobre-accion: #14291C;
    --seleccion: #F1F3E4;
    --sobre-seleccion: #14291C;
    --barra: #7FD09A;
    --exito: #7FD09A;
    --error: #FF9DB0;
    --aviso: #3A3414;
    --sobre-aviso: #F7E6A8;
    --foco: #7CC7E2;

    --sombra-hoja: 0 -8px 24px rgb(0 0 0 / .5);
    --sombra-flotante: 0 4px 12px rgb(0 0 0 / .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-cuerpo)/var(--lh-cuerpo) var(--f-texto);
  overflow-x: hidden;
}
h1, h2, h3, p { margin: 0; }
h1, h2, .display { font-family: var(--f-titulo); font-weight: 400; line-height: var(--lh-titulo); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; }
.numeros { font-variant-numeric: tabular-nums; }
.icono { width: 24px; height: 24px; flex: none; display: block; }
[hidden] { display: none !important; }

/* Dentro del pasto o del agua, el foco es blanco */
.sobre-oscuro { --foco: #FFFFFF; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Estructura ─────────────────────────── */
#app { max-width: 480px; margin-inline: auto; min-height: 100svh; display: flex; flex-direction: column; background: var(--papel); }
.vista { flex: 1; padding-bottom: calc(64px + var(--seguro-abajo) + var(--e-6)); }
[data-barra="si"] .vista { padding-bottom: calc(120px + var(--seguro-abajo) + var(--e-6)); }
.hoja-papel {
  padding: calc(var(--seguro-arriba) + var(--e-6)) calc(var(--margen) + var(--seguro-der)) var(--e-4) calc(var(--margen) + var(--seguro-izq));
  display: flex; flex-direction: column; gap: var(--e-4);
}
.titulo { font-size: var(--t-titulo); }
.nota { color: var(--tinta-2); }

/* ── Botones ────────────────────────────── */
.boton {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  width: 100%; min-height: var(--toque-accion); padding: var(--e-2) var(--e-4);
  border-radius: var(--r-boton); font-size: var(--t-boton); font-weight: 700; text-align: center; text-decoration: none;
  transition: transform 100ms;
}
.boton:active { transform: scale(.98); }
.boton-regar { background: var(--aromo); color: var(--tinta-fija); min-height: var(--toque-principal); font-size: var(--t-boton-grande); }
.boton-detener { background: var(--claro-fijo); color: var(--copihue); min-height: var(--toque-principal); font-size: var(--t-boton-grande); }
.boton-accion { background: var(--accion); color: var(--sobre-accion); }
.boton-secundario { min-height: var(--toque-chip); border: 2px solid var(--borde-control); font-weight: 500; font-size: var(--t-cuerpo); }
.panel .boton-secundario { border-color: var(--sobre-pasto); color: var(--sobre-pasto); }
.boton-peligro { min-height: var(--toque); color: var(--error); font-weight: 500; font-size: var(--t-cuerpo); width: auto; padding-inline: var(--e-2); }
.boton-peligro-lleno { background: var(--copihue); color: #fff; }
.enlace { min-height: var(--toque); display: inline-flex; align-items: center; text-decoration: underline; font-weight: 500; }
[aria-busy="true"] { cursor: progress; }

/* ── Escena ─────────────────────────────── */
.heroe { position: relative; container-type: inline-size; background: var(--cielo); color: var(--sobre-cielo); padding-top: var(--seguro-arriba); overflow: hidden; }
.heroe::before {
  content: ""; position: absolute; inset: 0; background: var(--agua);
  transform: scaleY(0); transform-origin: 50% 84%;
  transition: transform var(--m-vaciar) var(--ease-entrada);
}
.heroe > * { position: relative; }
.escena { display: block; width: 100%; height: auto; margin-bottom: -1px; }
.centro {
  position: absolute; inset-inline: 0; top: var(--seguro-arriba);
  aspect-ratio: 360 / 206;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  text-align: center; padding-inline: 12%;
}
.heroe .centro { position: absolute; }
.saludo { position: absolute; top: calc(var(--seguro-arriba) + var(--e-3)); left: var(--e-4); font-weight: 500; z-index: 1; max-width: 42%; line-height: 1.2; overflow-wrap: anywhere; }
.estado-palabra { font-family: var(--f-titulo); font-size: var(--t-estado); line-height: var(--lh-titulo); }
.estado-palabra.chica { font-size: var(--t-estado-chico); }
.cuenta { font-family: var(--f-titulo); font-size: var(--t-cuenta); line-height: 1; font-variant-numeric: tabular-nums; }
.cuenta.larga { font-size: 13cqw; }
.estado-detalle { color: var(--sobre-cielo-2); margin-top: var(--e-1); font-size: var(--t-chico); }
.astro { fill: var(--astro); }
.nube { color: var(--sobre-cielo); }
.gota { fill: none; stroke: var(--gota-vacia); stroke-width: 1.6; }
.gota.llena { fill: var(--gota-agua); stroke: var(--gota-agua); transition: fill var(--m-normal); }
.suelo { fill: var(--pasto); }
.aspersor { color: var(--aspersor); }
.brizna { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.8); transition: transform 2s ease-out; }
.cabezal { transform-origin: 180px 232px; }

[data-estado="regando"] .heroe, [data-estado="deteniendo"] .heroe { color: var(--sobre-agua); transition: color var(--m-rapido) 250ms; }
[data-estado="regando"] .heroe::before, [data-estado="deteniendo"] .heroe::before { transform: scaleY(1); transition: transform var(--m-llenar) var(--ease-salida); }
[data-estado="regando"] .estado-detalle, [data-estado="deteniendo"] .estado-detalle { color: var(--sobre-agua); }
[data-estado="regando"] .aspersor, [data-estado="deteniendo"] .aspersor { color: var(--sobre-agua); }
[data-estado="regando"] .cielo-figura, [data-estado="deteniendo"] .cielo-figura { opacity: 0; }
[data-estado="regando"] .brizna { transform: scaleY(1); transition: transform 1.2s var(--ease-salida); }
[data-estado="regando"] .adelante .brizna { animation: mecer 4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -170ms); }
[data-estado="regando"] .cabezal { animation: tac 3.2s infinite; }
@keyframes mecer { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes tac {
  0%   { rotate: 0deg; animation-timing-function: steps(9); }
  84%  { rotate: -22deg; animation-timing-function: ease-out; }
  100% { rotate: 0deg; }
}
@keyframes caer {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(var(--caida)); opacity: 0; }
}
.gotita { fill: var(--gota-agua); opacity: 0; animation: caer 1.8s ease-in infinite; animation-delay: calc(var(--i) * 300ms); }
.gota-boquilla { fill: var(--sobre-cielo); opacity: 0; animation: caer 1.2s ease-in infinite; --caida: 34px; }
.gota-cayendo { fill: var(--gota-agua); animation: caer 600ms ease-in forwards; --caida: 60px; }
body.oculta * { animation-play-state: paused !important; }

/* Sin señal y sin internet: otro fondo y sin arco */
[data-estado="sin-senal"] .heroe, [data-estado="sin-internet"] .heroe, [data-estado="link-invalido"] .heroe { background: var(--sin-senal); color: var(--sobre-sin-senal); }
[data-estado="sin-senal"] .estado-detalle, [data-estado="sin-internet"] .estado-detalle, [data-estado="link-invalido"] .estado-detalle { color: var(--sobre-sin-senal-2); }
[data-estado="sin-senal"] .aspersor, [data-estado="sin-internet"] .aspersor, [data-estado="link-invalido"] .aspersor { color: var(--sobre-sin-senal); }

.panel {
  position: relative; margin-top: -1px; /* tapa la línea que deja un alto con decimales */
  background: var(--pasto); color: var(--sobre-pasto);
  min-height: 172px;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: 10px; padding: 4px calc(var(--margen) + var(--seguro-der)) var(--e-4) calc(var(--margen) + var(--seguro-izq));
}
.panel-info { text-align: center; font-weight: 500; }
.panel-error { color: var(--tinta-fija); background: var(--claro-fijo); border-radius: var(--r-control); padding: 14px; display: flex; gap: var(--e-2); }
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
.chip {
  min-height: var(--toque-chip); border-radius: var(--r-control); border: 2px solid var(--sobre-pasto);
  font-weight: 700; font-size: var(--t-cuerpo); color: var(--sobre-pasto); transition: transform 100ms; white-space: nowrap;
}
.chip[aria-checked="true"] { background: var(--claro-fijo); color: var(--tinta-fija); border-color: var(--claro-fijo); }
.chip[aria-disabled="true"] { opacity: .55; }
.chip:active { transform: scale(.98); }
@media (max-width: 340px) {
  .chips { gap: 6px; }
  .chip { font-size: var(--t-chico); }
}
/* Chips en papel, dentro de las hojas */
.chips-papel .chip { border-color: var(--borde-control); color: var(--tinta); }
.chips-papel .chip[aria-checked="true"] { background: var(--seleccion); color: var(--sobre-seleccion); border-color: var(--seleccion); }

/* ── Avisos ─────────────────────────────── */
.aviso { display: flex; gap: var(--e-3); background: var(--aviso); color: var(--sobre-aviso); border-radius: var(--r-control); padding: 14px; }
.aviso strong { display: block; font-weight: 700; }
.panel .aviso { background: var(--claro-fijo); color: var(--tinta-fija); }
.error-linea { color: var(--error); display: flex; gap: var(--e-2); align-items: flex-start; font-weight: 500; }
.toast {
  position: fixed; z-index: 30; inset-inline: var(--margen); margin-inline: auto; max-width: 448px;
  bottom: calc(76px + var(--seguro-abajo)); background: var(--tinta); color: var(--papel);
  padding: 14px var(--e-4); border-radius: var(--r-control); box-shadow: var(--sombra-flotante);
}
[data-barra="si"] ~ .toast, body[data-barra="si"] .toast { bottom: calc(132px + var(--seguro-abajo)); }

/* ── Filas informativas ─────────────────── */
.filas { padding: var(--e-3) calc(var(--margen) + var(--seguro-der)) 0 calc(var(--margen) + var(--seguro-izq)); display: flex; flex-direction: column; gap: var(--e-2); }
.fila { min-height: 64px; display: flex; align-items: center; gap: var(--e-3); padding-block: var(--e-2); }
.fila + .fila { border-top: 1px solid var(--linea); }
.fila-icono { width: 40px; height: 40px; border-radius: var(--r-chico); background: var(--superficie-2); display: grid; place-items: center; flex: none; }
.fila-texto { flex: 1; min-width: 0; }
.fila-titulo { font-size: var(--t-cuerpo); font-weight: 500; }
.fila-titulo.tachado { text-decoration: line-through; }
.fila-detalle { font-size: var(--t-chico); color: var(--tinta-2); }
.fila-derecha { font-size: var(--t-chico); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-boton); padding: var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
.tarjeta h2 { font-size: var(--t-subtitulo); }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); }

/* ── Horarios ───────────────────────────── */
.lista-horarios { display: flex; flex-direction: column; }
.horario { display: flex; align-items: center; gap: var(--e-3); padding-block: var(--e-3); border-top: 1px solid var(--linea); }
.horario:first-child { border-top: 0; }
.horario-info { flex: 1; min-width: 0; text-align: left; min-height: var(--toque); display: block; width: 100%; }
.horario-hora { font-family: var(--f-titulo); font-size: var(--t-hora); line-height: var(--lh-titulo); font-variant-numeric: tabular-nums; }
.horario-dias { font-size: var(--t-cuerpo); }
.horario-duracion { font-size: var(--t-chico); color: var(--tinta-2); }
.horario.pausado .horario-hora { color: var(--tinta-2); }
.interruptor-caja { display: flex; flex-direction: column; align-items: center; gap: var(--e-1); min-width: 72px; font-size: var(--t-chico); }
.interruptor { width: 64px; height: 48px; display: flex; align-items: center; justify-content: center; }
.interruptor span { display: block; width: 64px; height: 40px; border-radius: var(--r-total); border: 2px solid var(--borde-control); position: relative; background: transparent; transition: background var(--m-rapido); }
.interruptor span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 28px; height: 28px; border-radius: 50%; background: var(--borde-control); transition: transform var(--m-rapido); }
.interruptor[aria-checked="true"] span { background: var(--seleccion); border-color: var(--seleccion); }
.interruptor[aria-checked="true"] span::after { transform: translateX(24px); background: var(--sobre-seleccion); }
.interruptor[aria-disabled="true"] { opacity: .55; }
.relleno { background: var(--superficie-2); border-radius: var(--r-control); min-height: 72px; }
.ajuste { display: flex; align-items: center; gap: var(--e-3); border-top: 1px solid var(--linea); padding-top: var(--e-4); }
.ajuste-texto { flex: 1; }

/* ── Formularios y hojas ────────────────── */
dialog.hoja {
  position: fixed; inset: auto 0 0 0; margin: auto auto 0; width: 100%; max-width: 480px; max-height: 90svh;
  border: 0; padding: 0; border-radius: var(--r-hoja) var(--r-hoja) 0 0; background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-hoja); overflow: auto; overscroll-behavior: contain;
}
dialog.hoja[open] { animation: subir var(--m-hoja) var(--ease-salida); }
dialog.hoja::backdrop { background: var(--velo); }
dialog.hoja.saliendo { transform: translateY(100%); transition: transform 200ms var(--ease-entrada); }
@keyframes subir { from { transform: translateY(100%); } to { transform: translateY(0); } }
.hoja-contenido { padding: var(--e-4) calc(var(--margen) + var(--seguro-der)) calc(var(--e-6) + var(--seguro-abajo)) calc(var(--margen) + var(--seguro-izq)); display: flex; flex-direction: column; gap: var(--e-4); }
.hoja-cabeza { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.hoja-cabeza h2 { font-size: var(--t-subtitulo); }
.cerrar-hoja { min-height: var(--toque); padding-inline: var(--e-2); display: inline-flex; align-items: center; gap: var(--e-1); font-weight: 500; flex: none; }
.campo { display: flex; flex-direction: column; gap: var(--e-2); }
.campo-etiqueta { font-weight: 700; }
.campo-ayuda { color: var(--tinta-2); font-size: var(--t-chico); }
.entrada {
  width: 100%; min-height: var(--toque-accion); padding: var(--e-2) var(--e-3);
  border: 2px solid var(--borde-control); border-radius: var(--r-control); background: var(--superficie); font-size: var(--t-cuerpo);
}
.entrada-hora { font-family: var(--f-titulo); font-size: var(--t-total); min-height: 72px; text-align: center; }
.entrada-con-boton { display: flex; gap: var(--e-2); }
.entrada-con-boton .entrada { flex: 1; min-width: 0; }
.ver-clave { min-height: var(--toque); min-width: 80px; font-weight: 500; text-decoration: underline; }
.atajos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-2); }
.atajo { min-height: var(--toque); border: 2px solid var(--borde-control); border-radius: var(--r-control); font-weight: 500; font-size: var(--t-chico); padding-inline: var(--e-1); }
.dias { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e-2); }
@media (min-width: 390px) { .dias { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; } }
.dia { min-height: var(--toque); border: 2px solid var(--borde-control); border-radius: var(--r-chico); font-size: var(--t-chico); padding: 0; }
.dia[aria-pressed="true"] { background: var(--seleccion); color: var(--sobre-seleccion); border-color: var(--seleccion); font-weight: 700; }
.selector-min { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: var(--e-2); }
.selector-min button { min-height: 52px; border: 2px solid var(--borde-control); border-radius: var(--r-control); display: grid; place-items: center; }
.selector-min output { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.resumen { background: var(--superficie-2); border-radius: var(--r-control); padding: var(--e-3); }
.opcion { display: flex; gap: var(--e-3); text-align: left; width: 100%; padding: var(--e-3); border: 2px solid var(--borde-control); border-radius: var(--r-control); }
.opcion[aria-checked="true"] { border-width: 4px; border-color: var(--seleccion); padding: calc(var(--e-3) - 2px); }
.opcion-circulo { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--borde-control); flex: none; margin-top: 2px; display: grid; place-items: center; }
.opcion[aria-checked="true"] .opcion-circulo { border-color: var(--seleccion); }
.opcion[aria-checked="true"] .opcion-circulo::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--seleccion); }
.opcion strong { display: block; }
.opcion small { color: var(--tinta-2); font-size: var(--t-chico); display: block; }
.link-visible { word-break: break-all; background: var(--superficie-2); border-radius: var(--r-control); padding: var(--e-3); user-select: all; font-size: var(--t-chico); }

/* ── Historial ──────────────────────────── */
.selector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-1); background: var(--superficie-2); border-radius: var(--r-control); padding: var(--e-1); }
.selector button { min-height: 44px; border-radius: 10px; font-weight: 500; }
.selector button[aria-pressed="true"] { background: var(--seleccion); color: var(--sobre-seleccion); font-weight: 700; }
.total { font-family: var(--f-titulo); font-size: var(--t-total); line-height: var(--lh-titulo); }
.grafico { display: flex; align-items: flex-end; justify-content: space-between; gap: 2px; min-height: 180px; border-bottom: 2px solid var(--tinta-2); padding-top: var(--e-6); }
.columna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }
.valor { font-size: var(--t-chico); font-weight: 700; font-variant-numeric: tabular-nums; }
.barra { width: 30px; max-width: 100%; background: var(--barra); border-radius: 7px 7px 0 0; }
.etiquetas { display: flex; justify-content: space-between; gap: 2px; margin-top: var(--e-1); }
.etiquetas span { flex: 1; text-align: center; color: var(--tinta-2); font-size: var(--t-chico); min-width: 0; }
.etiquetas span.hoy { color: var(--tinta); font-weight: 700; }
.dia-grupo { font-weight: 700; margin-top: var(--e-3); }

/* ── Familia ────────────────────────────── */
.inicial { width: 44px; height: 44px; border-radius: 50%; background: var(--superficie-2); display: grid; place-items: center; font-weight: 700; flex: none; }
.persona { display: flex; align-items: center; gap: var(--e-3); padding-block: var(--e-3); border-top: 1px solid var(--linea); flex-wrap: wrap; }
.persona:first-child { border-top: 0; }
.seccion-titulo { font-size: var(--t-subtitulo); }

/* ── Inicio de sesión y link ────────────── */
.acceso { min-height: 100svh; padding: calc(var(--seguro-arriba) + var(--e-10)) var(--margen) var(--e-6); display: flex; flex-direction: column; gap: var(--e-4); }
.acceso-marca { display: flex; align-items: center; gap: var(--e-3); }
.acceso-marca img { width: 56px; height: 56px; }
.pantalla-link { display: flex; flex-direction: column; min-height: 100svh; }
.pantalla-link .panel { flex: 1; justify-content: flex-start; padding-top: var(--e-4); gap: var(--e-3); }
.pantalla-link h1 { font-size: var(--t-titulo); }

/* ── Barra regando y navegación ─────────── */
.pie { position: fixed; inset-inline: 0; bottom: 0; z-index: 20; max-width: 480px; margin-inline: auto; }
.barra-regando { min-height: 56px; background: var(--agua); color: var(--sobre-agua); display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: var(--e-1) var(--margen); font-weight: 500; }
.barra-regando button { background: var(--claro-fijo); color: var(--copihue); min-height: 48px; padding-inline: var(--e-4); border-radius: var(--r-control); font-weight: 700; flex: none; }
.navegacion { background: var(--superficie); border-top: 1px solid var(--linea); display: flex; padding-bottom: var(--seguro-abajo); padding-inline: var(--seguro-izq) var(--seguro-der); }
.navegacion a { flex: 1; min-width: 0; min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; font-size: var(--t-chico); color: var(--tinta-2); line-height: 1.15; }
.navegacion .pildora { width: 52px; height: 28px; display: grid; place-items: center; border-radius: var(--r-total); }
.navegacion .pildora .icono { width: 28px; height: 28px; }
.navegacion a[aria-current="page"] { color: var(--tinta); font-weight: 700; }
.navegacion a[aria-current="page"] .pildora { background: var(--seleccion); color: var(--sobre-seleccion); }
.navegacion a[aria-current="page"] .pildora .icono { width: 22px; height: 22px; }

/* Letra grande del sistema: el centro deja de montarse sobre el arco */
.texto-grande .heroe .centro { position: relative; aspect-ratio: auto; padding-block: var(--e-10) var(--e-2); top: 0; }
.texto-grande .saludo { position: relative; top: 0; padding: var(--e-3) var(--e-4) 0; left: 0; max-width: none; }
.texto-grande .arco { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .brizna { transform: none; }
  [data-estado="regando"] .cabezal { rotate: -14deg; }
  .gotita, .gota-cayendo, .gota-boquilla { display: none; }
}

/* Capas de la escena según el estado */
.gotitas, .gota-boquilla { display: none; }
[data-estado="regando"] .gotitas { display: block; }
[data-estado="avisando"] .gota-boquilla { display: block; }
[data-estado="sin-senal"] .arco, [data-estado="sin-internet"] .arco, [data-estado="link-invalido"] .arco { display: none; }
[data-estado="sin-senal"] .cielo-figura, [data-estado="sin-internet"] .cielo-figura, [data-estado="link-invalido"] .cielo-figura { display: none; }
.filas > .enlace { align-self: center; }