/* ============ Tipografías (incluidas en la app para funcionar sin internet) ============ */
@font-face { font-family: "Baloo 2"; font-weight: 600; font-display: swap; src: url("../fonts/baloo-2-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url("../fonts/baloo-2-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 400; font-display: swap; src: url("../fonts/figtree-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-display: swap; src: url("../fonts/figtree-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-display: swap; src: url("../fonts/figtree-latin-700-normal.woff2") format("woff2"); }

/* ============ Paleta Hidroponía CIMA: verde bosque, lima, turquesa y crema del logo ============ */
:root {
  --fondo: #f1f4e6;
  --superficie: #ffffff;
  --superficie-2: #f7f9ef;
  --texto: #1f3320;
  --suave: #5c6e55;
  --linea: #dde5cf;

  --hoja: #3f7a2c;
  --hoja-fuerte: #2f4830;
  --hoja-claro: #e5efd2;
  --lima: #b3c700;
  --lima-2: #8fb31c;
  --turquesa: #1b8b8d;
  --agua: #1b8b8d;
  --agua-claro: #d5eeee;
  --sol: #f2a01f;
  --sol-fuerte: #d3830a;
  --sol-claro: #fff0d2;
  --arcilla: #c1633a;
  --uva: #7a5cc4;
  --uva-claro: #ece6fb;
  --rosa: #cf4f78;
  --rosa-claro: #fbe3eb;
  --ambar-claro: #fdf0d8;

  --ok: #3f7a2c;
  --aviso: #b86e00;
  --mal: #c93c3c;
  --mal-claro: #fbe4e2;

  /* Escena del huerto */
  --cielo-1: #a9dcf7;
  --cielo-2: #e6f6ee;
  --colina-1: #bfe3b8;
  --colina-2: #9fd29a;
  --nube: #ffffff;
  --astro: #f2a01f;
  --planta-sana: #4cae52;
  --planta-regular: #b6c53a;
  --planta-mala: #d9a441;
  --planta-muerta: #8d6e52;
  --planta-borde: rgba(18, 60, 30, 0.22);
  --kale: #2f7a4c;
  --apio: #a9d47a;
  --acelga-tallo: #d2455a;
  --montana: #b9c6cf;
  --nieve: #ffffff;
  --plastico: #eef6fb;
  --estructura: #8e9d93;
  --manta: #ffffff;
  --manta-borde: #cfd8d2;
  --rafaga: rgba(255, 255, 255, 0.85);
  --tronco: #8a6a44;
  --cielo-noche: #1b2a4a;
  --fresa: #e23d55;
  --tomate: #e54b2e;
  --fruto-verde: #9ccc65;
  --tanque: #f3f7fa;
  --tanque-borde: #aec3d1;
  --agua-escena: #3d9bd6;
  --tubo: #ffffff;
  --tubo-borde: #b8cabd;
  --maceta: #2d3a32;
  --barra: #e2ece4;

  --radio: 18px;
  --sombra: 0 1px 2px rgba(22, 48, 31, 0.06), 0 6px 18px rgba(22, 48, 31, 0.07);
  --fuente-titulo: "Baloo 2", "Figtree", system-ui, sans-serif;
  --fuente-texto: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fondo: #10170f;
    --superficie: #182216;
    --superficie-2: #1d2a1b;
    --texto: #e8f0dc;
    --suave: #a4b597;
    --linea: #2a3a27;
    --hoja: #a6cc3a;
    --hoja-fuerte: #2f4830;
    --hoja-claro: #26361f;
    --lima: #c4d62a;
    --lima-2: #9fc23a;
    --turquesa: #4fb8b9;
    --agua: #4fb8b9;
    --agua-claro: #15302f;
    --sol: #f6b23f;
    --sol-fuerte: #f6b23f;
    --sol-claro: #3a2b0e;
    --uva: #a58ef0;
    --uva-claro: #2a2342;
    --rosa: #ec7fa2;
    --rosa-claro: #3d1d2a;
    --ambar-claro: #34290f;
    --ok: #a6cc3a;
    --aviso: #f0b34a;
    --mal: #f08a84;
    --mal-claro: #3d1c1a;
    --cielo-1: #173a55;
    --cielo-2: #16281f;
    --colina-1: #1d3b27;
    --colina-2: #235232;
    --nube: #9fb4c2;
    --astro: #e9e6cf;
    --montana: #34465a;
    --nieve: #cfd9e3;
    --plastico: #9fb6c6;
    --estructura: #56685c;
    --manta: #d8e0e6;
    --manta-borde: #7f8f86;
    --rafaga: rgba(210, 225, 235, 0.6);
    --planta-borde: rgba(0, 0, 0, 0.35);
    --tanque: #172430;
    --tanque-borde: #34506a;
    --agua-escena: #2f7fb5;
    --tubo: #2a3a31;
    --tubo-borde: #3d5446;
    --maceta: #070b09;
    --barra: #22362a;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fondo: #10170f;
  --superficie: #182216;
  --superficie-2: #1d2a1b;
  --texto: #e8f0dc;
  --suave: #a4b597;
  --linea: #2a3a27;
  --hoja: #a6cc3a;
  --hoja-fuerte: #2f4830;
  --hoja-claro: #26361f;
  --lima: #c4d62a;
  --lima-2: #9fc23a;
  --turquesa: #4fb8b9;
  --agua: #4fb8b9;
  --agua-claro: #15302f;
  --sol: #f6b23f;
  --sol-fuerte: #f6b23f;
  --sol-claro: #3a2b0e;
  --uva: #a58ef0;
  --uva-claro: #2a2342;
  --rosa: #ec7fa2;
  --rosa-claro: #3d1d2a;
  --ambar-claro: #34290f;
  --ok: #a6cc3a;
  --aviso: #f0b34a;
  --mal: #f08a84;
  --mal-claro: #3d1c1a;
  --cielo-1: #173a55;
  --cielo-2: #16281f;
  --colina-1: #1d3b27;
  --colina-2: #235232;
  --nube: #9fb4c2;
  --astro: #e9e6cf;
  --montana: #34465a;
  --nieve: #cfd9e3;
  --plastico: #9fb6c6;
  --estructura: #56685c;
  --manta: #d8e0e6;
  --manta-borde: #7f8f86;
  --rafaga: rgba(210, 225, 235, 0.6);
  --planta-borde: rgba(0, 0, 0, 0.35);
  --tanque: #172430;
  --tanque-borde: #34506a;
  --agua-escena: #2f7fb5;
  --tubo: #2a3a31;
  --tubo-borde: #3d5446;
  --maceta: #070b09;
  --barra: #22362a;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* ============ Base ============ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: 15px;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.sprite { display: none; }
svg { width: 1em; height: 1em; }
svg use { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3 { font-family: var(--fuente-titulo); font-weight: 800; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
b, strong { font-weight: 700; }
.nota { color: var(--suave); font-size: 0.9rem; margin: -4px 0 12px; }
.vacio { color: var(--suave); }
.pos { color: var(--ok); }
.neg { color: var(--mal); }
.error { color: var(--mal); font-weight: 600; }
[hidden] { display: none !important; }

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px calc(104px + env(safe-area-inset-bottom, 0px));
}
section { display: grid; gap: 12px; }
.titulo-seccion { margin-top: 16px; }

/* ============ Cabecera ============ */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px;
  background: linear-gradient(135deg, #243a25, #2f4830 55%, #3f6b34);
  color: #fff;
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f3f6e9;
  padding: 2px;
}
.cabecera h1 { font-size: 1.35rem; letter-spacing: 0.2px; }
.cabecera p { margin: 0; font-size: 0.8rem; opacity: 0.85; }
.contacto-cabecera {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  flex-shrink: 0;
}
.contacto-cabecera svg { font-size: 20px; }

/* ============ Controles ============ */
button, .boton {
  font: inherit;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  border: 0;
  border-radius: 14px;
  background: var(--hoja);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.15s ease, background 0.15s;
}
button:active:not(:disabled), .boton:active { transform: scale(0.97); }
button:disabled { background: var(--barra); color: var(--suave); cursor: not-allowed; }
button svg, .boton svg { font-size: 1.25em; }
.secundario { background: var(--hoja-claro); color: var(--hoja); }
.enlace {
  background: none;
  color: var(--suave);
  font-family: var(--fuente-texto);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
  min-height: 40px;
  justify-self: center;
}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 2px;
}

.tarjeta {
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.formulario { display: grid; gap: 14px; padding: 16px; }
.formulario label { display: grid; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--suave); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input, select {
  font: inherit;
  font-size: 1rem;
  color: var(--texto);
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  border: 1.5px solid var(--linea);
  border-radius: 12px;
  background: var(--superficie-2);
  transition: border-color 0.15s;
}
input:focus, select:focus { border-color: var(--hoja); }

.encabezado { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.encabezado p { margin: 2px 0 0; color: var(--suave); font-size: 0.9rem; }
.encabezado-icono {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--hoja-claro);
  color: var(--hoja);
  font-size: 26px;
}

/* ============ Listas ============ */
.lista { list-style: none; margin: 0; padding: 4px 16px; }
.lista li {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 0.93rem;
}
.lista li:last-child { border-bottom: 0; }
.lista .texto { flex: 1; }
.lista time { color: var(--suave); font-size: 0.78rem; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.lista b { font-family: var(--fuente-titulo); font-size: 1rem; white-space: nowrap; }

/* ============ HUERTO: marcador (HUD) ============ */
.hud {
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  gap: 8px;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 10px;
}
.hud-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hud-item > div { display: grid; line-height: 1.1; }
.hud-item small { color: var(--suave); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
.hud-item b { font-family: var(--fuente-titulo); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.hud-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; font-size: 22px; flex-shrink: 0; }
.hud-icono.sol { background: var(--sol-claro); color: var(--sol-fuerte); }
.hud-icono.cosecha { background: var(--hoja-claro); color: var(--hoja); }
.hud-nivel #j-xp-texto { font-size: 0.95rem; color: var(--suave); }
.anillo {
  --p: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--hoja) calc(var(--p) * 1%), var(--barra) 0);
  transition: --p 0.5s;
}
.anillo b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--superficie);
  font-size: 1.1rem;
}

/* ============ HUERTO: escena ============ */
.escena-marco {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--sombra);
  background: var(--cielo-2);
}
.escena svg { display: block; width: 100%; height: auto; }
.maceta { cursor: pointer; outline: none; }
.maceta .zona { fill: transparent; }
.maceta:focus-visible .zona { stroke: var(--sol); stroke-width: 2.5; rx: 12; }
.texto-tanque { font-family: var(--fuente-titulo); font-weight: 800; font-size: 13px; fill: #fff; }
.nube { animation: nube 38s linear infinite; }
.nube.lenta { animation-duration: 60s; }
@keyframes nube { from { transform: translateX(-120px); } to { transform: translateX(480px); } }
.ola { animation: ola 3.2s linear infinite; }
@keyframes ola { from { transform: translateX(0); } to { transform: translateX(-40px); } }
.burbuja { animation: burbuja 2.8s ease-in infinite; opacity: 0; }
@keyframes burbuja { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 0.8; } 100% { transform: translateY(-34px); opacity: 0; } }
.listo { animation: latir 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes latir { 50% { transform: scale(1.18); } }
.planta { transform-box: fill-box; transform-origin: 50% 100%; animation: mecer 5s ease-in-out infinite; }
@keyframes mecer { 50% { transform: rotate(1.6deg); } }

.noche {
  position: absolute;
  inset: 0;
  background: linear-gradient(#0b1a33, #10243d 60%, #0e1f1a);
  opacity: 0;
  pointer-events: none;
}
.escena-marco.anochece .noche { animation: noche 1s ease-in-out; }
@keyframes noche { 0% { opacity: 0; } 40%, 60% { opacity: 0.85; } 100% { opacity: 0; } }

.flotantes { position: absolute; inset: 0; pointer-events: none; }
.flotante {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--hoja);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  animation: flotar 1.4s ease-out forwards;
}
.flotante svg { font-size: 1.1em; }
@keyframes flotar { 0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.05); } 100% { opacity: 0; transform: translate(-50%, -220%) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .nube, .ola, .burbuja, .listo, .planta, .flotante { animation: none; }
  .burbuja { opacity: 0; }
  .escena-marco.anochece .noche { animation: none; }
}

/* ============ HUERTO: diagnóstico ============ */
.diagnostico {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  border-left: 6px solid var(--ok);
}
.diagnostico.con-problemas { border-left-color: var(--aviso); }
.diagnostico.incompatible { border-left-color: var(--mal); }
.diag-titulo { display: flex; align-items: center; gap: 8px; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.05rem; }
.diag-titulo svg { font-size: 1.3em; color: var(--ok); }
.con-problemas .diag-titulo svg { color: var(--aviso); }
.incompatible .diag-titulo svg { color: var(--mal); }
.diagnostico ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.diagnostico li { display: flex; gap: 8px; align-items: baseline; font-size: 0.93rem; }
.diagnostico li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); transform: translateY(-1px); }
.objetivo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--suave); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--superficie-2); border: 1px solid var(--linea); font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }

/* ============ HUERTO: medidores ============ */
.medidores { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.medidor {
  display: grid;
  gap: 6px;
  background: var(--superficie);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 12px;
}
.medidor-cab { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.medidor-nombre { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--suave); }
.medidor-nombre svg { font-size: 1.2em; color: var(--agua); }
.estado { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 999px; }
.estado.bien { background: var(--hoja-claro); color: var(--ok); }
.estado.alto, .estado.bajo { background: var(--mal-claro); color: var(--mal); }
.estado.atencion { background: var(--sol-claro); color: var(--aviso); }
.medidor-valor { font-family: var(--fuente-titulo); font-weight: 800; font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.medidor-valor small { font-family: var(--fuente-texto); font-size: 0.8rem; font-weight: 600; color: var(--suave); margin-left: 3px; }
.medidor-barra { position: relative; height: 8px; background: var(--barra); border-radius: 99px; }
.medidor-barra .banda { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ok) 40%, transparent); border-radius: 99px; }
.medidor-barra .marca { position: absolute; top: -4px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--ok); transition: left 0.5s ease; }
.medidor.fuera .marca { border-color: var(--mal); }

/* ============ HUERTO: acciones ============ */
.acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.accion {
  --c: var(--hoja);
  --c-claro: var(--hoja-claro);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-height: 112px;
  padding: 12px 6px 10px;
  background: var(--superficie);
  color: var(--texto);
  border-radius: 16px;
  box-shadow: var(--sombra);
  font-family: var(--fuente-texto);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.2;
  text-align: center;
}
.accion:disabled { background: var(--superficie); opacity: 0.45; }
.accion-icono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--c-claro); color: var(--c); font-size: 24px; margin-bottom: 2px; }
.accion[data-insumo="nutrientes"] { --c: var(--hoja); --c-claro: var(--hoja-claro); }
.accion[data-insumo="phMenos"] { --c: var(--uva); --c-claro: var(--uva-claro); }
.accion[data-insumo="phMas"] { --c: var(--rosa); --c-claro: var(--rosa-claro); }
.accion[data-insumo="agua"] { --c: var(--agua); --c-claro: var(--agua-claro); }
.accion[data-insumo="cambio"] { --c: var(--agua); --c-claro: var(--agua-claro); }
.accion[data-insumo="tratamiento"] { --c: var(--sol-fuerte); --c-claro: var(--sol-claro); }
.accion .efecto { color: var(--suave); font-weight: 600; font-size: 0.72rem; }

.pasar-dia {
  width: 100%;
  min-height: 60px;
  margin-top: 4px;
  font-size: 1.2rem;
  border-radius: 18px;
  background: linear-gradient(135deg, #cbd600, #8fb31c 60%, #3d9a57);
  color: #1c2e1c;
  box-shadow: 0 6px 16px rgba(143, 179, 28, 0.4);
}
.pasar-dia svg { font-size: 1.5em; }
.pasar-dia svg use { stroke-width: 2.2; }

.eventos:not(:empty) {
  display: grid;
  gap: 6px;
  padding: 12px 16px;
  border-radius: var(--radio);
  background: var(--superficie-2);
  border: 1px dashed var(--linea);
}
.eventos h3 { font-size: 0.95rem; color: var(--suave); }
.eventos ul { margin: 0; padding-left: 18px; font-size: 0.92rem; display: grid; gap: 2px; }

/* ============ HUERTO: tienda ============ */
.tienda { display: grid; gap: 10px; }
.mejora {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--superficie);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px;
}
.mejora-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--agua-claro); color: var(--agua); font-size: 26px; }
.mejora h3 { font-size: 1rem; }
.mejora p { margin: 2px 0 4px; font-size: 0.85rem; color: var(--suave); }
.mejora a { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; font-weight: 700; color: var(--hoja); text-decoration: none; }
.mejora button { min-height: 42px; padding: 8px 14px; border-radius: 12px; font-size: 0.92rem; }
.mejora button:disabled { background: var(--hoja-claro); color: var(--hoja); }
.mejora button.bloqueado { background: var(--barra); color: var(--suave); gap: 4px; font-size: 0.82rem; padding: 8px 10px; white-space: nowrap; }
.mejora.instalada .mejora-icono { background: var(--hoja-claro); color: var(--hoja); }
.insignia-mini { font-family: var(--fuente-texto); font-size: 0.7rem; font-weight: 700; background: var(--hoja-claro); color: var(--hoja); padding: 2px 8px; border-radius: 99px; vertical-align: middle; }

/* ============ HUERTO: logros ============ */
.logros { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.logro {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 14px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.logro-icono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--barra); color: var(--suave); font-size: 22px; }
.logro b { font-family: var(--fuente-titulo); font-size: 1rem; line-height: 1.2; }
.logro small { color: var(--suave); font-size: 0.8rem; line-height: 1.3; }
.logro .premio { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.78rem; color: var(--ok); }
.logro.obtenido { background: linear-gradient(160deg, var(--sol-claro), var(--superficie) 70%); }
.logro.obtenido .logro-icono { background: var(--sol); color: #3a2200; }

/* Resumen de cifras (progreso del juego y registro) */
.resumen-juego, .resumen-registro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.resumen-registro:empty { display: none; }
.dato { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra); text-align: center; }
.dato b { font-family: var(--fuente-titulo); font-size: 1.35rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dato small { color: var(--suave); font-size: 0.74rem; font-weight: 600; line-height: 1.2; }
.siguiente { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--superficie-2); font-size: 0.9rem; }
.siguiente svg { flex-shrink: 0; font-size: 1.2em; color: var(--suave); }

/* ============ CTA y Aprende ============ */
.cta {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  justify-items: start;
  margin-top: 16px;
  padding: 20px;
  border-radius: 22px;
  background: linear-gradient(135deg, #243a25, #2f4830 50%, #1b6f6f);
  color: #fff;
}
.cta h3 { font-size: 1.35rem; max-width: 16ch; }
.cta p { margin: 0 0 6px; opacity: 0.9; max-width: 34ch; font-size: 0.93rem; }
.cta-hoja { position: absolute; right: -24px; bottom: -30px; font-size: 150px; color: rgba(255, 255, 255, 0.12); }
.cta-hoja use { stroke-width: 1.4; }
.boton-claro { background: #fff; color: var(--hoja-fuerte); position: relative; }

.aprende { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 4px 16px; }
.aprende summary { display: flex; align-items: center; gap: 8px; min-height: 52px; font-family: var(--fuente-titulo); font-weight: 800; font-size: 1rem; cursor: pointer; list-style: none; }
.aprende summary::-webkit-details-marker { display: none; }
.aprende summary svg { font-size: 1.3em; color: var(--hoja); }
.aprende summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; color: var(--suave); }
.aprende[open] summary::after { content: "−"; }
.aprende dl { margin: 0 0 14px; display: grid; gap: 4px; }
.aprende dt { font-weight: 700; margin-top: 8px; }
.aprende dd { margin: 0; color: var(--suave); font-size: 0.93rem; max-width: 62ch; }

/* ============ Calculadora, sistemas y registro ============ */
.resultado:empty { display: none; }
.resultado { padding: 18px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.resultado p { margin: 8px 0 0; font-size: 0.93rem; }
.dosis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dosis > div { display: grid; justify-items: center; padding: 14px 8px; border-radius: 16px; background: var(--hoja-claro); }
.dosis .parte-b { background: var(--agua-claro); }
.dosis .parte-c { background: var(--sol-claro); }
.dosis small { color: var(--suave); font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.72rem; }
.cifra { font-family: var(--fuente-titulo); font-weight: 800; font-size: 2.3rem; line-height: 1; color: var(--texto); font-variant-numeric: tabular-nums; }
.unidad { font-weight: 700; color: var(--suave); }
.rango { font-weight: 700; }
.ok { color: var(--ok); font-weight: 700; margin: 0; }
.consejos { margin: 0; padding-left: 20px; color: var(--aviso); font-weight: 600; display: grid; gap: 4px; }

.tarjetas { display: grid; gap: 10px; }
.sistema { display: grid; gap: 6px; padding: 16px; }
.sistema-cab { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.sistema p { margin: 0; color: var(--suave); font-size: 0.9rem; }
.progreso { height: 10px; border-radius: 99px; background: var(--barra); overflow: hidden; }
.progreso span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--hoja), var(--lima)); }

/* ============ Sistemas, historial y respaldo ============ */
.borrar {
  min-height: 40px;
  width: 40px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 12px;
  background: none;
  color: var(--suave);
}
.borrar svg { font-size: 1.25em; }
.borrar:hover { background: var(--mal-claro); color: var(--mal); }
.sistema-cab { align-items: center; }
.sistema-fechas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--suave); font-size: 0.88rem; }
.sistema-fechas span { display: inline-flex; align-items: center; gap: 5px; }
.sistema-fechas svg { font-size: 1.15em; }
.listo-cosecha { color: var(--ok); font-weight: 700; }
.sistema-medicion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sistema-medicion small { color: var(--suave); font-size: 0.8rem; }
.chip svg { font-size: 1.1em; }
.chip-ok { background: var(--hoja-claro); border-color: transparent; color: var(--ok); }
.chip-alerta { background: var(--sol-claro); border-color: transparent; color: var(--aviso); }
.historial-icono { display: grid; place-items: center; flex-shrink: 0; font-size: 18px; }
.aviso-texto { color: var(--aviso); }
.lista li .borrar { min-height: 34px; width: 34px; margin-right: -6px; }
.respaldo { margin-top: 0; }
.respaldo .boton, .respaldo button { font-size: 0.92rem; }

/* ============ Contacto ============ */
.contacto { display: grid; padding: 4px 16px 12px; }
.contacto-fila { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 0; border-bottom: 1px solid var(--linea); color: var(--texto); text-decoration: none; }
.contacto-fila span:last-child { display: grid; line-height: 1.25; min-width: 0; }
.contacto-fila small { color: var(--suave); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.contacto-fila b { overflow-wrap: anywhere; }
.contacto-icono { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; background: var(--hoja-claro); color: var(--hoja); font-size: 22px; }
.contacto-nota { margin: 10px 0 0; color: var(--suave); font-size: 0.88rem; }

/* ============ Barra inferior ============ */
.pestanas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  padding: 6px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--superficie) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--linea);
}
.pestanas button {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 4px 0;
  border-radius: 0;
  background: none;
  color: var(--suave);
  font-family: var(--fuente-texto);
  font-size: 0.72rem;
  font-weight: 700;
}
.pestana-icono { display: grid; place-items: center; width: 56px; height: 30px; border-radius: 999px; font-size: 22px; transition: background 0.2s; }
.pestanas button[aria-selected="true"] { color: var(--hoja); }
.pestanas button[aria-selected="true"] .pestana-icono { background: var(--hoja-claro); }
.pestanas button[aria-selected="true"] svg use { stroke-width: 2.3; }

/* ============ Aviso (toast) ============ */
.aviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--texto);
  color: var(--fondo);
  font-weight: 600;
  font-size: 0.93rem;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: aparecer 0.25s ease-out;
}
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } }

/* ============ Hoja inferior y confirmación ============ */
.hoja {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  margin: auto auto 0;
  border: 0;
  border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--fondo);
  color: var(--texto);
}
.hoja[open] { animation: subir 0.25s ease-out; }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
.hoja::before { content: ""; display: block; width: 44px; height: 5px; margin: 0 auto 12px; border-radius: 99px; background: var(--linea); }
.hoja::backdrop, .confirmar::backdrop { background: rgba(8, 20, 12, 0.55); }
.hoja h2 { padding-right: 44px; margin-bottom: 12px; }
.hoja .cerrar { position: absolute; top: 14px; right: 12px; }
.hoja .cerrar button { min-height: 40px; width: 40px; padding: 0; border-radius: 50%; background: var(--superficie); color: var(--suave); box-shadow: var(--sombra); }
.hoja .grande { width: 100%; margin-top: 10px; }
.semillas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.semilla {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.semilla.bloqueada { opacity: 0.6; }
.semilla-dibujo { width: 48px; height: 48px; border-radius: 14px; background: var(--hoja-claro); }
.semilla-dibujo svg { width: 48px; height: 48px; }
.semilla b { font-family: var(--fuente-titulo); font-size: 1.05rem; }
.semilla small { display: block; color: var(--suave); font-size: 0.8rem; line-height: 1.35; }
.semilla button { min-height: 42px; padding: 8px 12px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.anillos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.anillo-grande { display: grid; justify-items: center; gap: 6px; padding: 14px; border-radius: 16px; background: var(--superficie); box-shadow: var(--sombra); }
.anillo-grande .anillo { width: 78px; height: 78px; }
.anillo-grande .anillo b { width: 62px; height: 62px; font-family: var(--fuente-titulo); font-size: 1.3rem; }
.anillo-grande small { color: var(--suave); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.anillo.salud { background: conic-gradient(var(--c, var(--ok)) calc(var(--p) * 1%), var(--barra) 0); }

.confirmar {
  width: calc(100% - 32px);
  max-width: 380px;
  border: 0;
  border-radius: 22px;
  padding: 20px;
  background: var(--fondo);
  color: var(--texto);
}
.confirmar p { margin: 0 0 16px; font-size: 1.02rem; font-weight: 600; }

@media (min-width: 560px) {
  .acciones { grid-template-columns: repeat(6, 1fr); }
  .medidores { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 360px) {
  .hud { grid-template-columns: 1fr 1fr; }
  .hud-nivel { grid-column: 1 / -1; order: 3; }
}

.pasos { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 0.93rem; }
.aviso-quimico { padding: 10px 12px; border-radius: 12px; background: var(--sol-claro); font-size: 0.88rem !important; }
.resultado .lista { padding: 0; }
.fila:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }

/* ============ Catálogo ============ */
.catalogo { display: grid; gap: 10px; }
.producto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.producto-icono { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--hoja-claro); color: var(--hoja); font-size: 26px; }
.producto-nutrientes .producto-icono { background: var(--agua-claro); color: var(--agua); }
.producto h3 { font-size: 1.05rem; }
.producto p { margin: 2px 0 0; color: var(--suave); font-size: 0.88rem; }
.producto-compra { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--linea); }
.precio { font-family: var(--fuente-titulo); font-size: 1.5rem; font-weight: 800; color: var(--texto); }
.producto-compra .boton { min-height: 44px; padding: 8px 16px; }
.precio-consulta { font-weight: 700; color: var(--suave); }
.producto-medidor .producto-icono, .producto-curso .producto-icono { background: var(--sol-claro); color: var(--sol-fuerte); }

/* ============ Invernadero ============ */
.escena-marco .noche { transition: opacity 0.7s ease; }
.escena-marco.es-noche .noche { opacity: 0.4; }
.viento path { animation: rafaga 2.6s linear infinite; }
@keyframes rafaga { from { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } to { transform: translateX(460px); opacity: 0; } }
.aire { animation: subeaire 1.8s ease-in-out infinite; }
@keyframes subeaire { 50% { transform: translateY(-4px); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .viento path, .aire { animation: none; } .escena-marco .noche { transition: none; } }

.clima { display: grid; gap: 10px; padding: 14px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.clima-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fase { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 5px 12px; border-radius: 999px; font-family: var(--fuente-titulo); font-weight: 800; }
.fase svg { font-size: 1.2em; }
.fase-dia { background: var(--sol-claro); color: var(--sol-fuerte); }
.fase-noche { background: #22314d; color: #e7ecff; }
.region { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--suave); }
.region select { min-height: 38px; padding: 4px 8px; font-size: 0.85rem; width: auto; }
.pronostico { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--superficie-2); }
.pronostico.helada { background: #e3eefb; }
:root:not([data-theme="light"]) .pronostico.helada { background: var(--superficie-2); }
.pronostico-icono { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--agua-claro); color: var(--agua); font-size: 26px; }
.pronostico.helada .pronostico-icono { background: #cfe2f7; color: #2c6fb8; }
.pronostico div { display: grid; line-height: 1.25; }
.pronostico small { color: var(--suave); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.pronostico b { font-family: var(--fuente-titulo); font-size: 1.15rem; }
.pronostico span { color: var(--suave); font-size: 0.88rem; font-variant-numeric: tabular-nums; }
.controles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.control {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 92px;
  padding: 10px 4px;
  border-radius: 14px;
  background: var(--superficie-2);
  color: var(--texto);
  border: 2px solid var(--linea);
  font-family: var(--fuente-texto);
  font-size: 0.8rem;
  font-weight: 700;
}
.control small { font-weight: 600; color: var(--suave); }
.control-icono { font-size: 26px; color: var(--suave); }
.control.activo { border-color: var(--hoja); background: var(--hoja-claro); }
.control.activo .control-icono, .control.activo small { color: var(--hoja); }
.prevision { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; border-left: 5px solid var(--ok); background: var(--superficie-2); font-size: 0.9rem; }
.prevision.alerta { border-left-color: var(--aviso); }
.prevision.mal { border-left-color: var(--mal); }
.prevision-cab { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prevision-cab span:first-child { color: var(--suave); font-weight: 600; }
.prevision-cab b { font-family: var(--fuente-titulo); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.prevision ul { margin: 0; padding-left: 18px; }
.prevision p { margin: 0; color: var(--suave); }
.consejo { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 14px; background: var(--sol-claro); font-size: 0.9rem; }
.consejo svg { flex-shrink: 0; font-size: 1.3em; color: var(--sol-fuerte); margin-top: 1px; }
.pasar-dia.es-noche { background: linear-gradient(135deg, #2c3e66, #1d2b47); color: #eef2ff; box-shadow: 0 6px 16px rgba(29, 43, 71, 0.35); }

/* ============ Club CIMA ============ */
.planes { display: grid; gap: 12px; }
.plan {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 18px 16px 16px;
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra);
  border: 2px solid transparent;
}
.plan-destacado { border-color: var(--lima-2); }
.plan-etiqueta {
  position: absolute;
  top: -11px;
  left: 16px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #cbd600, #8fb31c);
  color: #1c2e1c;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.plan h3 { font-size: 1.2rem; }
.plan-precio { margin: 0; color: var(--suave); }
.plan-precio b { font-family: var(--fuente-titulo); font-size: 1.7rem; color: var(--texto); }
.plan-precio span { font-weight: 700; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 0.93rem; }
.plan li { display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { flex-shrink: 0; margin-top: 3px; color: var(--hoja); }
.plan li svg use { stroke-width: 2.6; }
.plan .boton { margin-top: 4px; }