/* =========================================================
 * Estética basada en la referencia "My plants":
 * fondo menta, verde intenso, Poppins, formas muy redondeadas.
 * ========================================================= */
:root {
  --menta: #ebf7ee;
  --menta-2: #dcf0e2;
  --verde: #2f9a5b;
  --verde-osc: #237a47;
  --verde-claro: #7fd39c;
  --texto: #121212;
  --suave: #5d6b62;
  --blanco: #ffffff;
  --peligro: #b3412f;
  --r-xl: 34px;
  --r-lg: 24px;
  --r-md: 14px;
  --sombra: 0 10px 30px rgba(20, 70, 40, .10);
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--texto);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--menta); }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
button, .boton { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--verde-claro); outline-offset: 2px; }

.app { max-width: 980px; margin: 0 auto; padding: 0 20px calc(110px + env(safe-area-inset-bottom)); }

/* ---------- Barra superior ---------- */
.barra { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 6px; min-height: 64px; }
.barra-hueco { width: 42px; }
.icono { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; }
.icono:hover { background: var(--menta-2); }
.icono svg { width: 24px; height: 24px; }
.logo { width: 48px; height: 32px; fill: var(--verde-osc); stroke: none; }
.fecha { font-size: .8rem; font-weight: 500; color: var(--suave); width: 42px; white-space: nowrap; }

.menu-envoltorio, .filtros-envoltorio { position: relative; }
.menu {
  position: absolute; right: 0; top: 46px; z-index: 20; min-width: 220px; background: var(--blanco);
  border-radius: var(--r-md); box-shadow: var(--sombra); padding: 8px; display: flex; flex-direction: column;
}
.menu button, .menu .boton { text-align: left; padding: 10px 14px; border-radius: 10px; font-weight: 500; font-size: .9rem; }
.menu button:hover, .menu .boton:hover { background: var(--menta); }
.estado-sync { margin: 4px 14px 6px; font-size: .72rem; color: var(--suave); border-top: 1px solid var(--menta-2); padding-top: 8px; }

/* ---------- Títulos ---------- */
.titulo { text-align: center; padding: 6px 0 20px; }
.titulo.izq { text-align: left; padding-bottom: 14px; }
.titulo h1 { font-size: clamp(2.1rem, 7vw, 3rem); font-weight: 700; margin: 0; letter-spacing: -.02em; line-height: 1.1; }
.antetitulo { margin: 0 0 4px; font-size: .85rem; font-weight: 600; color: var(--verde); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- Tarjeta que se gira (inicio) ---------- */
.giro { max-width: 440px; margin: 0 auto; perspective: 1600px; }
.giro-interior { position: relative; display: grid; transition: transform .7s cubic-bezier(.3,.7,.2,1); transform-style: preserve-3d; }
.giro.girada .giro-interior { transform: rotateY(180deg); }
.cara {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: var(--r-xl); overflow: hidden; background: var(--verde); color: var(--blanco);
  box-shadow: var(--sombra); display: flex; flex-direction: column; min-height: 540px;
}
.cara-frente { cursor: pointer; }
/* Refuerzo: oculta la cara trasera a mitad del giro aunque el navegador no soporte backface-visibility */
.cara-frente, .cara-dorso { transition: visibility 0s .3s; }
.cara-dorso, .giro.girada .cara-frente { visibility: hidden; }
.giro.girada .cara-dorso { visibility: visible; }
.cara-frente .foto { flex: 1; margin: 14px 14px 0; border-radius: 24px; min-height: 380px; }
.cara-pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px 24px; }
.cara-pie strong { display: block; font-size: 1.35rem; line-height: 1.2; }
.cara-pie span { font-size: .85rem; opacity: .85; }
.boton-giro {
  flex: none; width: 66px; height: 66px; border-radius: 22px; background: var(--verde-claro);
  display: grid; place-items: center; transition: transform .2s;
}
.boton-giro:hover { transform: scale(1.06); }
.boton-giro span { width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--blanco); }

.cara-dorso { transform: rotateY(180deg); padding: 26px 24px 24px; }
.cara-dorso .etiqueta { font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; opacity: .8; margin: 0; }
.cara-dorso h2 { font-size: 2rem; line-height: 1.1; margin: 6px 0 0; }
.cara-dorso .sub { margin: 6px 0 0; font-size: 1rem; }
.cara-dorso .sub i { opacity: .9; }
.dorso-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 16px; }
.dorso-fotos .foto { aspect-ratio: 1; border-radius: 18px; }
.dorso-fotos figcaption { font-size: .72rem; opacity: .85; margin-top: 4px; text-align: center; }
.dorso-clave { background: rgba(255,255,255,.14); border-radius: var(--r-md); padding: 12px 14px; font-size: .88rem; line-height: 1.5; margin: 0; }
.dorso-clave b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.dorso-botones { display: flex; gap: 10px; margin-top: auto; padding-top: 18px; }
.dorso-botones .btn { flex: 1; text-align: center; }
.nota-dia { text-align: center; color: var(--suave); font-size: .82rem; margin: 18px 0 0; }

/* ---------- Herbario: buscador y filtros ---------- */
.buscador {
  display: flex; align-items: center; gap: 10px; background: var(--blanco);
  border-radius: 99px; padding: 0 20px; height: 50px;
}
.buscador svg { width: 20px; height: 20px; color: var(--suave); flex: none; }
.buscador input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: .95rem; background: transparent; }

.fila-filtros { display: flex; align-items: center; gap: 8px; margin: 12px 0 6px; }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips button, .chip-filtros {
  flex: none; padding: 8px 16px; border-radius: 99px; background: var(--blanco); font-size: .85rem; font-weight: 500; white-space: nowrap;
}
.chips button.activo { background: var(--verde); color: var(--blanco); }
.chip-filtros { display: flex; align-items: center; gap: 6px; }
.chip-filtros svg { width: 16px; height: 16px; }
.chip-filtros b { background: var(--verde); color: var(--blanco); border-radius: 99px; font-size: .7rem; min-width: 18px; height: 18px; display: grid; place-items: center; }
.pop-filtros {
  position: absolute; right: 0; top: 44px; z-index: 20; width: 250px; background: var(--blanco);
  border-radius: var(--r-md); box-shadow: var(--sombra); padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.pop-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 500; color: var(--suave); }
.pop-filtros label.check { flex-direction: row; align-items: center; gap: 8px; font-size: .85rem; color: var(--texto); }
.pop-filtros select { font: inherit; font-size: .88rem; padding: 8px 10px; border: 0; border-radius: 10px; background: var(--menta); color: var(--texto); }

/* ---------- Herbario: lista ---------- */
.grupo-lista { margin-top: 22px; }
.grupo-lista h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; display: flex; align-items: baseline; gap: 10px; }
.grupo-lista h2 small { font-size: .85rem; font-weight: 500; color: var(--suave); }
.rejilla-plantas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.planta {
  background: var(--verde); color: var(--blanco); border-radius: var(--r-lg); padding: 10px 10px 14px;
  cursor: pointer; transition: transform .2s; display: flex; flex-direction: column;
}
.planta:hover { transform: translateY(-3px); }
.planta .foto { aspect-ratio: 1; border-radius: 16px; }
.planta h3 { font-size: .95rem; font-weight: 600; margin: 10px 4px 0; line-height: 1.2; }
.planta p { margin: 2px 4px 0; font-size: .75rem; opacity: .85; }
.planta .lat { font-style: italic; }
.vacio { text-align: center; color: var(--suave); padding: 40px 0; }

/* ---------- Fotos (general) ---------- */
.foto { margin: 0; position: relative; overflow: hidden; background: var(--verde-osc); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; }
.foto.sin-foto img { visibility: hidden; }
.foto.sin-foto::after {
  content: "Sin foto"; position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(255,255,255,.7); font-size: .8rem;
}

/* ---------- Navegación inferior ---------- */
.navegacion {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 30;
  width: min(520px, calc(100% - 28px)); display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--blanco); border-radius: var(--r-lg); box-shadow: var(--sombra); padding: 6px;
}
.navegacion button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 6px; border-radius: 18px; font-weight: 600; font-size: .88rem; transition: color .3s; overflow: hidden; }
.navegacion svg { width: 20px; height: 20px; flex: none; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.navegacion button.activo { color: var(--blanco); }
.navegacion button.activo svg { transform: translateY(-1px) scale(1.12); }
/* Pastilla verde que se desliza bajo el botón activo */
.navegacion .indicador {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 4);
  border-radius: 18px; background: var(--verde); box-shadow: 0 6px 16px rgba(47,154,91,.35);
  transform: translateX(calc(var(--pos, 0) * 100%)); transition: transform .45s cubic-bezier(.3,1.25,.4,1);
}

/* ---------- Botones genéricos ---------- */
.btn { padding: 11px 20px; border-radius: 99px; background: var(--blanco); color: var(--texto); font-weight: 600; font-size: .88rem; }
.btn.principal { background: var(--verde); color: var(--blanco); }
.btn.claro { background: var(--verde-claro); color: var(--verde-osc); }
.btn.peligro { color: var(--peligro); }
.enlace { color: var(--verde-osc); text-decoration: underline; font-size: .8rem; align-self: flex-start; }

/* ---------- Ficha (pantalla completa) ---------- */
.pantalla {
  width: min(1000px, 100vw); max-width: 100vw; height: min(94vh, 100%); max-height: 100vh;
  padding: 0; border: 0; border-radius: var(--r-xl); background: var(--verde); color: var(--blanco); overflow-y: auto;
}
.pantalla.claro { background: var(--menta); color: var(--texto); }
.pantalla::backdrop { background: rgba(10, 40, 20, .55); }

.ficha-cab { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px 0; }
.volver { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .95rem; }
.volver svg { width: 22px; height: 22px; }
.pastilla { background: var(--verde-claro); color: var(--verde-osc); border-radius: 99px; padding: 8px 18px; font-weight: 600; font-size: .85rem; }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; padding: 20px 28px 70px; align-items: center; }
.hero .foto { aspect-ratio: 4 / 5; border-radius: 26px; cursor: zoom-in; }
.hero h2 { font-size: clamp(1.6rem, 4.4vw, 2.6rem); line-height: 1.1; margin: 0; font-weight: 700; }
.hero .sub { margin: 6px 0 0; font-size: .95rem; opacity: .92; }
.hero .grupo { margin: 4px 0 0; font-size: .78rem; opacity: .75; }
.stats { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-direction: column; gap: 14px; }
.stats b { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.stats sup { font-size: .95rem; font-weight: 500; margin-left: 2px; }
.stats span { display: block; font-size: .82rem; opacity: .9; }
.credito { font-size: .68rem; opacity: .75; margin-top: 6px; }
.credito a { color: inherit; }

.panel { background: var(--menta); color: var(--texto); border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: -40px; padding: 28px 28px 40px; }
.panel-top { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: center; }
.panel-top .foto { width: 210px; aspect-ratio: 1; border-radius: 50% 50% 26px 26px; margin-top: -90px; cursor: zoom-in; border: 6px solid var(--menta); }
.pie-foto { font-size: .75rem; color: var(--suave); text-align: center; margin: 6px 0 0; }
.aviso { border-left: 3px solid #bfc7c1; padding-left: 16px; }
.aviso strong { display: block; font-size: 1rem; margin-bottom: 4px; }
.aviso p { margin: 0; line-height: 1.55; color: #2a2f2c; }

.pestanas { display: grid; grid-template-columns: 1fr 1fr; background: var(--blanco); border-radius: var(--r-lg); margin-top: 28px; }
.pestanas button { padding: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--r-lg); }
.pestanas button.activo { background: var(--verde); color: var(--blanco); }
.pestanas svg { width: 18px; height: 18px; }

.contenido { padding: 24px 2px 0; }
.contenido h3 { font-size: 1.1rem; margin: 26px 0 10px; }
.contenido h3:first-child { margin-top: 0; }
.contenido p, .contenido li { line-height: 1.6; }
.contenido ul { padding-left: 0; list-style: none; margin: 0; }
.clave { counter-reset: paso; }
.clave li { position: relative; padding: 12px 16px 12px 48px; background: var(--blanco); border-radius: var(--r-md); margin-bottom: 8px; }
.clave li::before {
  content: counter(paso); counter-increment: paso; position: absolute; left: 12px; top: 12px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--verde); color: var(--blanco);
  font-size: .75rem; font-weight: 600; display: grid; place-items: center;
}
.lista-simple li { padding-left: 18px; position: relative; margin: 6px 0; }
.lista-simple li::before { content: ""; position: absolute; left: 2px; top: .65em; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.tabla { background: var(--blanco); border-radius: var(--r-md); padding: 6px 18px; margin: 0; }
.tabla div { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 11px 0; font-size: .92rem; }
.tabla div + div { border-top: 1px solid var(--menta-2); }
.tabla dt { color: var(--suave); font-weight: 500; }
.tabla dd { margin: 0; }
.contenido a { color: var(--verde-osc); font-weight: 500; }
.acciones-ficha { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; }
.fuente { font-size: .8rem; color: var(--suave); }
.acciones-ficha .botones { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Visor de fotos ---------- */
.visor {
  padding: 0; border: 0; background: transparent; width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  display: grid; place-items: center; overflow: hidden;
}
.visor:not([open]) { display: none; }
.visor::backdrop { background: rgba(8, 20, 12, .92); backdrop-filter: blur(6px); }
.visor-img { max-width: 94vw; max-height: 82dvh; border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.5); user-select: none; -webkit-user-drag: none; }
.visor-img.desde-der { animation: entraDer .35s cubic-bezier(.2,.8,.3,1); }
.visor-img.desde-izq { animation: entraIzq .35s cubic-bezier(.2,.8,.3,1); }
@keyframes entraDer { from { opacity: 0; transform: translateX(60px) scale(.96); } }
@keyframes entraIzq { from { opacity: 0; transform: translateX(-60px) scale(.96); } }
.visor-flecha, .visor-cerrar {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .2s, transform .2s;
}
.visor-flecha:hover, .visor-cerrar:hover { background: rgba(255,255,255,.26); }
.visor-flecha:active, .visor-cerrar:active { transform: scale(.9); }
.visor-flecha svg { width: 24px; height: 24px; }
.visor-flecha.izq { left: 12px; top: 50%; margin-top: -24px; }
.visor-flecha.der { right: 12px; top: 50%; margin-top: -24px; }
.visor-flecha.der svg { transform: rotate(180deg); }
.visor-cerrar { top: calc(14px + env(safe-area-inset-top)); right: 14px; font-size: 1.6rem; line-height: 1; }
.visor-pie { position: fixed; bottom: calc(18px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(255,255,255,.85); font-size: .85rem; font-weight: 500; margin: 0; }

/* ---------- Jugar ---------- */
.juegos { display: grid; gap: 16px; max-width: 520px; margin: 0 auto; }
.juego-tarjeta {
  text-align: left; border-radius: var(--r-xl); padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center;
  background: var(--blanco); box-shadow: var(--sombra);
}
.juego-tarjeta.verde { background: var(--verde); color: var(--blanco); }
.juego-tarjeta h2 { margin: 0; font-size: 1.5rem; }
.juego-tarjeta p { margin: 0; font-size: .88rem; opacity: .85; grid-column: 1; }
.juego-tarjeta .record { font-size: .78rem; font-weight: 600; opacity: 1; }
.juego-tarjeta .boton-giro { grid-column: 2; grid-row: 1 / span 3; }
.juego-tarjeta:not(.verde) .boton-giro { background: var(--verde); }

.opciones-juego { background: var(--blanco); border-radius: var(--r-lg); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.opciones-juego > div > span { display: block; font-size: .78rem; font-weight: 600; color: var(--suave); margin-bottom: 6px; }
.opciones-juego .chips { flex-wrap: wrap; overflow: visible; }
.opciones-juego .chips button { background: var(--menta); }
.opciones-juego .chips button.activo { background: var(--verde); }

.marcador { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: 4px 0 18px; }
.marcador b { font-size: 1.9rem; font-weight: 600; line-height: 1; display: block; }
.marcador span { font-size: .8rem; font-weight: 500; color: var(--suave); }

/* Memory */
.tablero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
@media (min-width: 700px) { .tablero { grid-template-columns: repeat(4, 1fr); max-width: 680px; } }
.carta { aspect-ratio: 3 / 4; perspective: 800px; cursor: pointer; }
.carta-interior { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.carta.vuelta .carta-interior, .carta.hecha .carta-interior { transform: rotateY(180deg); }
.carta-lado { position: absolute; inset: 0; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.carta-reverso { background: var(--verde); display: grid; place-items: center; }
/* Refuerzo del giro (igual que la tarjeta del inicio) */
.carta-lado { transition: visibility 0s .2s; }
.carta .carta-lado:not(.carta-reverso), .carta.vuelta .carta-reverso, .carta.hecha .carta-reverso { visibility: hidden; }
.carta.vuelta .carta-lado:not(.carta-reverso), .carta.hecha .carta-lado:not(.carta-reverso) { visibility: visible; }
.carta-reverso svg { width: 44%; fill: rgba(255,255,255,.35); stroke: none; }
.carta-anverso { position: absolute; inset: 0; background: var(--blanco); display: grid; place-items: center; text-align: center; padding: 8px; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.carta-anverso.con-foto { padding: 0; }
.carta-anverso .foto { position: absolute; inset: 0; }
.carta-anverso i { font-weight: 500; }
.carta.hecha .carta-anverso { box-shadow: inset 0 0 0 4px var(--verde-claro); }
.carta.hecha { cursor: default; }

/* Quiz */
.pregunta { max-width: 520px; margin: 0 auto; }
.pregunta .foto { aspect-ratio: 4 / 3; border-radius: var(--r-lg); cursor: zoom-in; }
.pregunta h2 { font-size: 1.25rem; margin: 18px 0 12px; }
.respuestas { display: grid; gap: 10px; }
.respuestas button {
  background: var(--blanco); border-radius: var(--r-md); padding: 14px 16px; text-align: left; font-weight: 600; font-size: .92rem;
  display: flex; flex-direction: column; border: 2px solid transparent;
}
.respuestas button small { font-weight: 400; font-style: italic; color: var(--suave); }
.respuestas button.bien { border-color: var(--verde); background: #d7f3e0; }
.respuestas button.mal { border-color: var(--peligro); background: #f8e1dc; }
.respuestas button:disabled { cursor: default; }
.explicacion { margin-top: 14px; background: var(--blanco); border-radius: var(--r-md); padding: 14px 16px; font-size: .88rem; line-height: 1.5; }
.progreso { height: 8px; border-radius: 99px; background: var(--menta-2); overflow: hidden; margin-bottom: 16px; }
.progreso div { height: 100%; background: var(--verde); border-radius: 99px; transition: width .3s; }

.resultado { max-width: 440px; margin: 20px auto 0; text-align: center; background: var(--verde); color: var(--blanco); border-radius: var(--r-xl); padding: 34px 24px; }
.resultado b { font-size: 3.2rem; line-height: 1; display: block; }
.resultado p { margin: 10px 0 22px; }
.resultado .dorso-botones { justify-content: center; }

/* ---------- Identifica ---------- */
.identifica { max-width: 480px; margin: 0 auto; }
.camara { background: var(--verde); color: var(--blanco); border-radius: var(--r-xl); box-shadow: var(--sombra); overflow: hidden; }
.camara-foto {
  margin: 14px 14px 0; border-radius: 24px; aspect-ratio: 4 / 3; background: var(--verde-osc);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px;
  background-size: cover; background-position: center;
}
.camara-foto svg { width: 56px; height: 56px; opacity: .8; }
.camara-foto p { margin: 0; font-size: .9rem; opacity: .85; max-width: 240px; }
.camara-foto.con-foto > * { display: none; }
.camara .cara-pie { padding-bottom: 6px; }
.camara .cara-pie > div { flex: 1; min-width: 0; }
.camara .cara-pie strong { font-size: 1rem; margin-bottom: 8px; }
.organos { flex-wrap: wrap; overflow: visible; padding: 0; }
.organos button { background: rgba(255,255,255,.16); color: var(--blanco); padding: 6px 12px; font-size: .78rem; }
.organos button.activo { background: var(--blanco); color: var(--verde-osc); }
.camara-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 22px 24px; }
.camara-botones .btn { text-align: center; cursor: pointer; }

.cargando { text-align: center; padding: 30px 0; color: var(--suave); }
.cargando .foto-mini { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; display: block; border: 5px solid var(--verde); animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { transform: scale(.94); opacity: .8; } }

.sello {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.sello svg { width: 18px; height: 18px; stroke-width: 2.6; }
.sello.si { background: var(--verde-claro); color: var(--verde-osc); }
.sello.no { background: #f3e9d2; color: #7a5a14; }

.resultado-id { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra); }
.resultado-id.en-herbario { background: var(--verde); color: var(--blanco); }
.resultado-id.fuera { background: var(--blanco); color: var(--texto); }
.resultado-id .cab { padding: 22px 22px 0; }
.resultado-id h2 { font-size: 1.9rem; line-height: 1.1; margin: 14px 0 0; }
.resultado-id .sub { margin: 6px 0 0; font-size: .95rem; opacity: .9; }
.resultado-id .confianza { margin: 14px 0 0; }
.confianza-barra { height: 8px; border-radius: 99px; background: rgba(0,0,0,.12); overflow: hidden; margin-top: 6px; }
.en-herbario .confianza-barra { background: rgba(255,255,255,.2); }
.confianza-barra div { height: 100%; border-radius: 99px; background: var(--verde-claro); }
.fuera .confianza-barra div { background: var(--verde); }
.confianza span { font-size: .8rem; opacity: .85; }
.resultado-id .fotos-id { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 16px 22px 0; }
.resultado-id .fotos-id .foto { aspect-ratio: 1; border-radius: 16px; }
.resultado-id .fotos-id figcaption { font-size: .7rem; text-align: center; margin-top: 4px; opacity: .8; }
.resultado-id .cuerpo { padding: 16px 22px 22px; }
.resultado-id .cuerpo p { line-height: 1.55; font-size: .92rem; margin: 0 0 12px; }
.resultado-id .clave li { color: var(--texto); font-size: .88rem; }
.resultado-id .datos-id { margin: 0 0 14px; padding: 0; list-style: none; font-size: .88rem; }
.resultado-id .datos-id li { padding: 7px 0; border-top: 1px solid rgba(0,0,0,.07); display: flex; gap: 10px; }
.resultado-id .datos-id b { min-width: 110px; font-weight: 500; color: var(--suave); }
.resultado-id a { color: var(--verde-osc); font-weight: 600; }
.aviso-id { background: #fff6dd; color: #6d5210; border-radius: var(--r-md); padding: 12px 14px; font-size: .85rem; line-height: 1.45; margin: 0 0 14px; }
.en-herbario .aviso-id { background: rgba(255,255,255,.16); color: var(--blanco); }
.pariente { background: var(--menta); border-radius: var(--r-md); padding: 12px 14px; font-size: .88rem; margin: 0 0 14px; }

.alternativas { margin-top: 22px; }
.alternativas h3 { font-size: 1rem; margin: 0 0 10px; }
.alternativa { display: flex; align-items: center; gap: 12px; background: var(--blanco); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 8px; width: 100%; text-align: left; }
.alternativa .nombre { flex: 1; font-size: .88rem; font-weight: 600; }
.alternativa .nombre i { font-weight: 500; }
.alternativa .nombre small { display: block; font-weight: 400; color: var(--suave); font-size: .75rem; }
.alternativa .pct { font-weight: 700; color: var(--verde-osc); font-size: .9rem; }
.alternativa .mini-sello { font-size: .65rem; font-weight: 700; background: var(--verde-claro); color: var(--verde-osc); padding: 3px 8px; border-radius: 99px; }
.pie-id { display: flex; gap: 10px; margin-top: 18px; }
.pie-id .btn { flex: 1; text-align: center; }
.creditos-id { font-size: .7rem; color: var(--suave); text-align: center; margin-top: 14px; }

/* ---------- Ficha: cabecera, voz, desplegables ---------- */
.botones-cab { display: flex; gap: 8px; }
.pastilla { display: inline-flex; align-items: center; gap: 6px; }
.pastilla svg { width: 16px; height: 16px; }
.ficha-cab.oscuro { color: var(--texto); }
.voz {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.18); vertical-align: middle; margin-left: 4px;
}
.voz svg { width: 16px; height: 16px; }
.voz:hover { background: rgba(255,255,255,.3); }
.hero h2 .voz { width: 34px; height: 34px; }
.sello.mini { padding: 5px 10px; font-size: .68rem; margin-bottom: 8px; }
.sello.mini svg { width: 14px; height: 14px; }

.acordeones { margin-top: 26px; }
.acordeon-controles { display: flex; justify-content: flex-end; gap: 16px; margin-bottom: 8px; }
.acordeon { background: var(--blanco); border-radius: var(--r-md); margin-bottom: 10px; overflow: hidden; }
.acordeon summary {
  list-style: none; cursor: pointer; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 600; font-size: 1rem;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary small { font-weight: 400; color: var(--suave); font-size: .78rem; margin-left: 6px; }
.acordeon summary svg { width: 20px; height: 20px; flex: none; color: var(--verde); transition: transform .2s; }
.acordeon[open] summary svg { transform: rotate(180deg); }
.acordeon[open] summary { border-bottom: 1px solid var(--menta-2); }
.acordeon-cuerpo { padding: 14px 18px 18px; }
.acordeon-cuerpo p { margin: 0; line-height: 1.6; }
.acordeon-cuerpo .tabla { padding: 0; background: none; }
.acordeon-cuerpo .clave li { background: var(--menta); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.galeria figure { margin: 0; }
.galeria .foto { aspect-ratio: 1; border-radius: 14px; cursor: zoom-in; }
.galeria figcaption { font-size: .78rem; font-weight: 600; margin-top: 4px; }
.galeria .credito { color: var(--suave); opacity: 1; }

.lista-conf li { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 10px 0; line-height: 1.5; }
.lista-conf li + li { border-top: 1px solid var(--menta-2); }
.btn.mini { padding: 7px 12px; font-size: .78rem; background: var(--menta); display: inline-flex; align-items: center; gap: 6px; flex: none; }
.btn.mini svg { width: 15px; height: 15px; }

.calendario { display: grid; gap: 4px; }
.cal-fila { display: grid; grid-template-columns: 76px repeat(12, 1fr); gap: 3px; align-items: center; }
.cal-fila span { font-size: .78rem; font-weight: 500; color: var(--suave); }
.cal-fila i { height: 22px; border-radius: 6px; background: var(--menta); font-style: normal; }
.cal-meses i { background: none; height: auto; text-align: center; font-size: .7rem; font-weight: 600; color: var(--suave); }
.cal-meses i.hoy { color: var(--verde); text-decoration: underline; }
.cal-fila i.on.flor { background: #e7a2c6; }
.cal-fila i.on.fruto { background: #e6a54a; }
.cal-fila i.on.poda { background: var(--verde); }

/* ---------- Comparador ---------- */
.comparador { padding: 8px 20px 40px; max-width: 900px; margin: 0 auto; }
.comp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comp-col { display: flex; flex-direction: column; gap: 8px; }
.comp-col select { font: inherit; font-size: .85rem; font-weight: 600; padding: 10px 12px; border: 0; border-radius: var(--r-md); background: var(--blanco); color: var(--texto); }
.comp-col .foto { aspect-ratio: 1; border-radius: 18px; cursor: zoom-in; }
.comp-col h3 { margin: 4px 0 0; font-size: 1.1rem; text-align: center; }
.comp-dif { background: var(--verde); color: var(--blanco); border-radius: var(--r-lg); padding: 16px 18px; margin: 16px 0; }
.comp-dif p { margin: 4px 0 0; line-height: 1.55; font-size: .92rem; }
.comp-tabla { background: var(--blanco); border-radius: var(--r-lg); padding: 4px 16px; margin-top: 16px; }
.comp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 10px 0; font-size: .85rem; line-height: 1.45; }
.comp-fila + .comp-fila { border-top: 1px solid var(--menta-2); }
.comp-t { grid-column: 1 / -1; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--verde); }
.comp-fila ul { margin: 0; padding-left: 16px; }

/* ---------- Progreso ---------- */
.progreso-tarjeta { max-width: 440px; margin: 20px auto 0; background: var(--blanco); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sombra); }
.progreso-cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.progreso-cifras b { font-size: 2rem; line-height: 1; display: block; }
.progreso-cifras b small { font-size: 1rem; color: var(--suave); font-weight: 500; }
.progreso-cifras span { font-size: .78rem; color: var(--suave); }
.progreso-tarjeta .progreso { margin-bottom: 10px; }
.progreso-tarjeta p { margin: 0; font-size: .75rem; color: var(--suave); line-height: 1.4; }
.planta { position: relative; }
.marca-sabida {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  background: var(--verde-claro); color: var(--verde-osc); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.marca-sabida svg { width: 15px; height: 15px; stroke-width: 3; }

/* ---------- Verdadero o falso / Ordena ---------- */
.vf-cab { display: flex; align-items: center; gap: 14px; background: var(--blanco); border-radius: var(--r-lg); padding: 10px; }
.vf-cab .foto { width: 84px; height: 84px; border-radius: 16px; flex: none; cursor: zoom-in; }
.vf-cab strong { display: block; font-size: 1.1rem; }
.vf-cab small { color: var(--suave); font-size: .8rem; }
.afirmacion { font-size: 1.15rem; font-weight: 600; line-height: 1.45; margin: 20px 4px; }
.vf-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vf-botones .btn { padding: 16px; font-size: 1rem; border: 2px solid transparent; }
.vf-botones .btn.bien { border-color: var(--verde); background: #d7f3e0; color: var(--texto); }
.vf-botones .btn.mal { opacity: .45; }
.ordena { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ordena-item { position: relative; background: var(--blanco); border-radius: var(--r-lg); padding: 8px 8px 12px; border: 3px solid transparent; text-align: center; }
.ordena-item .foto { aspect-ratio: 1; border-radius: 14px; }
.ordena-nombre { display: block; font-weight: 600; font-size: .85rem; margin-top: 8px; }
.ordena-num {
  position: absolute; top: 14px; left: 14px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; background: var(--verde); color: var(--blanco); font-size: 1.1rem;
}
.ordena-num:empty { display: none; }
.ordena-item.elegida { border-color: var(--verde-claro); }
.ordena-item.bien { border-color: var(--verde); }
.ordena-item.mal { border-color: var(--peligro); }
.orden-correcto { margin: 8px 0 0; padding-left: 20px; }
.orden-correcto li { margin: 3px 0; }

/* ---------- Hallazgos y mapa ---------- */
.hallazgos { margin-top: 30px; }
.hallazgos .cab-seccion { margin-bottom: 14px; }
.hallazgos h2 small { font-size: .9rem; color: var(--suave); font-weight: 500; }
.conmutador { flex: none; }
.rejilla-hallazgos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.hallazgo { position: relative; background: var(--blanco); border-radius: var(--r-lg); padding: 8px 8px 12px; text-align: left; }
.hallazgo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; display: block; }
.hallazgo strong { display: block; font-size: .85rem; margin: 8px 4px 0; line-height: 1.25; }
.hallazgo small { display: block; font-size: .72rem; color: var(--suave); margin: 2px 4px 0; }
.hallazgo .marca-sabida { top: 14px; right: 14px; }
.mapa { height: 360px; border-radius: var(--r-lg); overflow: hidden; background: var(--menta-2); z-index: 0; }
.popup-hallazgo { font-family: "Poppins", sans-serif; font-size: .8rem; min-width: 140px; }
.popup-hallazgo img { width: 100%; height: 90px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; }
.hallazgo-detalle { max-width: 520px; margin: 0 auto; padding: 8px 20px 40px; }
.hallazgo-detalle > img { width: 100%; border-radius: var(--r-lg); display: block; margin-bottom: 16px; cursor: zoom-in; }
.hallazgo-detalle h2 { font-size: 1.8rem; margin: 12px 0 0; }
.hallazgo-detalle .sub { margin: 4px 0 16px; color: var(--suave); }
.hallazgo-detalle .datos-id { list-style: none; padding: 0; margin: 0; background: var(--blanco); border-radius: var(--r-md); padding: 4px 16px; font-size: .9rem; }
.hallazgo-detalle .datos-id li { padding: 10px 0; display: flex; gap: 10px; }
.hallazgo-detalle .datos-id li + li { border-top: 1px solid var(--menta-2); }
.hallazgo-detalle .datos-id b { min-width: 110px; font-weight: 500; color: var(--suave); }
.hallazgo-detalle a { color: var(--verde-osc); font-weight: 600; }

/* ---------- Impresión / PDF ---------- */
#impresion { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block; color: #111; font-size: 11pt; }
  .pdf header { border-bottom: 3px solid var(--verde); padding-bottom: 8px; margin-bottom: 12px; }
  .pdf h1 { font-size: 24pt; margin: 0; }
  .pdf-grupo { margin: 0; color: var(--verde); font-weight: 600; font-size: 9pt; text-transform: uppercase; letter-spacing: .05em; }
  .pdf-sub { margin: 2px 0 0; font-size: 12pt; }
  .pdf-fotos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
  .pdf-fotos figure { margin: 0; }
  .pdf-fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
  .pdf-fotos figcaption { font-size: 8pt; text-align: center; }
  .pdf section { break-inside: avoid; margin-bottom: 10px; }
  .pdf h2 { font-size: 12pt; color: var(--verde-osc); margin: 0 0 4px; border-bottom: 1px solid #ddd; padding-bottom: 2px; }
  .pdf h2 small { font-weight: 400; color: #666; }
  .pdf p, .pdf li { line-height: 1.45; margin: 0; }
  .pdf ul { margin: 0; padding-left: 18px; }
  .pdf .clave li { background: none; padding: 1px 0; list-style: decimal; }
  .pdf .clave li::before { display: none; }
  .pdf .tabla div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 2px 0; border: 0; font-size: 10pt; }
  .pdf .tabla dt { color: #555; }
  .pdf .tabla dd { margin: 0; }
  .pdf .lista-conf li { display: block; padding: 2px 0; border: 0; }
  .pdf .cal-fila { grid-template-columns: 70px repeat(12, 1fr); }
  .pdf .cal-fila i { height: 12px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pdf footer { margin-top: 14px; font-size: 8pt; color: #777; text-align: center; }
}

/* ---------- Recordatorio ---------- */
.campana { position: relative; }
.campana .punto { position: absolute; top: 8px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); border: 2px solid var(--menta); }
.hoja-dialogo {
  width: min(460px, 100vw); max-width: 100vw; margin: auto auto 0; padding: 0; border: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--menta); color: var(--texto);
}
@media (min-width: 600px) { .hoja-dialogo { margin: auto; border-radius: var(--r-xl); } }
.hoja-dialogo::backdrop { background: rgba(10, 40, 20, .55); }
.hoja-cuerpo { padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); position: relative; display: flex; flex-direction: column; gap: 14px; }
.hoja-cuerpo h2 { margin: 0; font-size: 1.5rem; }
.hoja-cuerpo .nota { margin: -6px 0 0; color: var(--suave); font-size: .88rem; line-height: 1.45; }
.cerrar-x { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: var(--blanco); font-size: 1.3rem; line-height: 1; }
.campo-hora { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--blanco); border-radius: var(--r-md); padding: 12px 16px; font-weight: 600; font-size: .92rem; }
.campo-hora select { font: inherit; font-weight: 600; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--menta); color: var(--verde-osc); }
.opcion-rec { display: flex; align-items: center; gap: 14px; background: var(--blanco); border-radius: var(--r-md); padding: 14px 16px; }
.opcion-rec > div { flex: 1; }
.opcion-rec strong { display: block; font-size: .95rem; }
.opcion-rec span { display: block; font-size: .78rem; color: var(--suave); line-height: 1.4; margin-top: 2px; }
.opcion-rec .btn { flex: none; }
.opcion-rec .btn:disabled { opacity: .4; cursor: not-allowed; }
.estado-rec { margin: -6px 0 0; display: flex; align-items: center; gap: 6px; color: var(--verde-osc); font-weight: 600; font-size: .85rem; }
.estado-rec svg { width: 18px; height: 18px; stroke-width: 3; }
.hoja-cuerpo > .enlace { align-self: center; }

/* =========================================================
 * ANIMACIONES Y MICROINTERACCIONES
 * ========================================================= */

/* Botones: se hunden al pulsar y efecto de onda */
button, .btn, .boton, .planta, .hallazgo, .juego-tarjeta { -webkit-tap-highlight-color: transparent; }
.btn, .chips button, .pastilla, .juego-tarjeta, .boton-giro, .respuestas button, .alternativa, .ordena-item, .planta, .hallazgo, .icono, .voz, .camara-botones .btn {
  position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.3,1.4,.5,1), box-shadow .2s, background-color .2s, color .2s, border-color .2s;
}
.btn:active, .chips button:active, .pastilla:active, .icono:active, .voz:active, .alternativa:active, .respuestas button:active:not(:disabled) { transform: scale(.95); }
.juego-tarjeta:active, .planta:active, .hallazgo:active, .ordena-item:active { transform: scale(.97); }
.boton-giro:active { transform: scale(.88); }
.btn:hover:not(:disabled) { box-shadow: 0 6px 16px rgba(20,70,40,.14); }
.juego-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(20,70,40,.16); }
.onda {
  position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .18;
  transform: scale(0); animation: onda .6s ease-out forwards;
}
@keyframes onda { to { transform: scale(1); opacity: 0; } }

/* Fotos: esqueleto brillante mientras cargan y aparición suave */
/* (el brillo se mueve con transform: lo calcula la tarjeta gráfica, sin repintar) */
.foto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.13) 50%, transparent 70%);
  transform: translateX(-100%); animation: brillo 1.5s linear infinite;
}
.foto:has(img.cargada)::before, .foto.sin-foto::before { display: none; }
@keyframes brillo { to { transform: translateX(100%); } }
.foto img, .hallazgo img, .cargando .foto-mini { opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .7s ease; }
.foto img.cargada, .hallazgo img.cargada, .cargando .foto-mini.cargada { opacity: 1; transform: none; }
.planta:hover .foto img.cargada { transform: scale(1.06); }
.planta .foto img { transition: opacity .5s ease, transform .5s ease; }

/* Entrada de cada pantalla */
.vista.entrando { animation: entraVista .45s cubic-bezier(.2,.8,.3,1); }
@keyframes entraVista { from { opacity: 0; transform: translateY(14px); } }

/* Tarjetas que aparecen en cascada */
.planta, .juego-tarjeta, .hallazgo, .acordeon, .respuestas button, .ordena-item, .opcion-rec {
  animation: subeCascada .5s cubic-bezier(.2,.8,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.juego-tarjeta:nth-child(2), .respuestas button:nth-child(2), .ordena-item:nth-child(2), .acordeon:nth-of-type(2) { --i: 1; }
.juego-tarjeta:nth-child(3), .respuestas button:nth-child(3), .ordena-item:nth-child(3), .acordeon:nth-of-type(3) { --i: 2; }
.juego-tarjeta:nth-child(4), .respuestas button:nth-child(4), .ordena-item:nth-child(4), .acordeon:nth-of-type(4) { --i: 3; }
.acordeon:nth-of-type(n+5) { --i: 4; }
@keyframes subeCascada { from { opacity: 0; transform: translateY(18px) scale(.98); } }

/* Diálogos: suben desde abajo */
dialog[open].pantalla, dialog[open].hoja-dialogo { animation: subeDialogo .45s cubic-bezier(.2,.9,.3,1); }
dialog[open]::backdrop { animation: fundido .3s ease; }
@keyframes subeDialogo { from { opacity: .4; transform: translateY(60px); } }
@keyframes fundido { from { opacity: 0; } }

/* Desplegables: contenido que se abre suavemente */
.acordeon[open] .acordeon-cuerpo { animation: abreAcordeon .35s ease; }
@keyframes abreAcordeon { from { opacity: 0; transform: translateY(-6px); } }
.acordeon summary { transition: background-color .2s; }
.acordeon summary:hover { background: #f7fbf8; }

/* Tarjeta del día: botón que late para invitar a tocar */
.giro:not(.girada) .boton-giro { animation: latidoBoton 2.4s ease-in-out infinite; }
@keyframes latidoBoton { 0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(127,211,156,.7); } 35% { box-shadow: 0 0 0 14px rgba(127,211,156,0); } }
.giro { animation: entraVista .6s cubic-bezier(.2,.8,.3,1); }
.cara-frente:hover .foto img.cargada { transform: scale(1.03); }

/* Barras de progreso que se llenan */
.progreso div, .confianza-barra div { transform-origin: left; animation: llenar .9s cubic-bezier(.2,.8,.3,1) backwards; }
@keyframes llenar { from { transform: scaleX(0); } }

/* Juegos: acierto que rebota, fallo que tiembla, pareja encontrada */
.respuestas button.bien, .vf-botones .btn.bien, .ordena-item.bien { animation: rebote .5s cubic-bezier(.3,1.6,.5,1); }
.respuestas button.mal, .vf-botones .btn.mal, .ordena-item.mal { animation: temblor .45s ease; }
@keyframes rebote { 40% { transform: scale(1.06); } }
@keyframes temblor { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.carta.hecha .carta-interior { animation: pareja .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes pareja { 50% { transform: rotateY(180deg) scale(1.08); } }
.carta:hover:not(.vuelta):not(.hecha) .carta-interior { transform: translateY(-3px); }
.explicacion { animation: subeCascada .4s cubic-bezier(.2,.8,.3,1); }
.resultado { animation: aparecePremio .6s cubic-bezier(.3,1.5,.5,1); }
@keyframes aparecePremio { from { opacity: 0; transform: scale(.85); } }
.ordena-num { animation: rebote .35s cubic-bezier(.3,1.6,.5,1); }

/* Sellos y resultados de Identifica */
.sello { animation: aparecePremio .5s cubic-bezier(.3,1.5,.5,1) .15s backwards; }
.resultado-id { animation: subeCascada .5s cubic-bezier(.2,.8,.3,1); }

/* Carrusel de fotos de la ficha */
.hero-fotos { min-width: 0; }
.carrusel-fotos {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border-radius: 26px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel-fotos::-webkit-scrollbar { display: none; }
.carrusel-fotos .slide { flex: 0 0 100%; scroll-snap-align: center; margin: 0; position: relative; }
.carrusel-fotos .foto { aspect-ratio: 4 / 5; border-radius: 0; cursor: zoom-in; }
.carrusel-fotos figcaption {
  position: absolute; left: 10px; bottom: 10px; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(4px);
  font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 99px;
}
.puntos { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
.puntos button { width: 7px; height: 7px; border-radius: 99px; background: rgba(255,255,255,.4); transition: width .3s, background .3s; padding: 0; }
.puntos button.activo { width: 22px; background: var(--blanco); }
.credito-actual { min-height: 1.2em; }
.credito-actual .credito { animation: fundido .4s ease; }

/* Mensajes breves */
.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 100; transform: translateX(-50%);
  background: var(--texto); color: var(--blanco); padding: 12px 20px; border-radius: 99px; font-size: .88rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: entraToast .4s cubic-bezier(.3,1.4,.5,1); white-space: nowrap; max-width: 92vw;
}
.toast.saliendo { animation: saleToast .4s ease forwards; }
@keyframes entraToast { from { opacity: 0; transform: translate(-50%, 20px) scale(.9); } }
@keyframes saleToast { to { opacity: 0; transform: translate(-50%, 20px); } }

/* Confeti */
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.confeti i {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation-name: caeConfeti; animation-timing-function: cubic-bezier(.3,.6,.6,1); animation-fill-mode: forwards;
}
@keyframes caeConfeti { to { transform: translate(var(--deriva), 105vh) rotate(var(--giro)); opacity: .9; } }

/* Campana: punto de aviso pendiente */
.campana .punto.aviso { background: #e0913a; animation: latidoBoton 2s infinite; }
.opcion-rec.alerta { border: 2px solid #f0c77f; }

/* Sin animaciones si el móvil lo pide */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Formulario ---------- */
#form-especie { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 14px; }
#form-especie h2 { margin: 0; font-size: 1.8rem; }
#form-especie label { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 500; color: var(--suave); }
#form-especie label.check { flex-direction: row; align-items: center; }
#form-especie small { font-weight: 400; }
#form-especie input:not([type=checkbox]), #form-especie select, #form-especie textarea {
  font: inherit; font-size: .92rem; color: var(--texto); padding: 11px 16px; border: 0; border-radius: var(--r-md); background: var(--blanco); outline: 0;
}
#form-especie input:focus, #form-especie textarea:focus, #form-especie select:focus { box-shadow: 0 0 0 2px var(--verde); }
#form-especie textarea { resize: vertical; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
.campo-foto { border: 0; background: var(--blanco); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.campo-foto legend { font-weight: 600; font-size: .9rem; padding: 0; float: left; }
.campo-foto .previa { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); }
.campo-foto .boton { background: var(--verde); color: var(--blanco); border-radius: 99px; padding: 9px 16px; text-align: center; font-weight: 600; font-size: .85rem; }
#form-especie .campo-foto input[type=url] { background: var(--menta); }
.pie-form { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* ---------- Móvil ---------- */
@media (max-width: 720px) {
  .app { padding-left: 16px; padding-right: 16px; }
  .pantalla { height: 100%; border-radius: 0; }
  .hero { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px 16px 90px; }
  .stats b { font-size: 1.4rem; }
  .ficha-cab, .panel, #form-especie { padding-left: 16px; padding-right: 16px; }
  .panel-top { grid-template-columns: 120px 1fr; gap: 16px; }
  .panel-top .foto { width: 120px; margin-top: -70px; }
  .tabla div { grid-template-columns: 1fr; gap: 2px; }
  .rejilla-plantas { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .cara { min-height: 500px; }
  .cara-frente .foto { min-height: 340px; }
  .navegacion { padding: 5px; }
  .navegacion button { flex-direction: column; gap: 3px; padding: 9px 2px 8px; border-radius: 16px; }
  .navegacion button span { font-size: .7rem; }
}

/* =========================================================
 * TEMA "CRISTAL BOTÁNICO"
 * Cristal esmerilado sobre fondo de hojas desenfocado (ref. 1),
 * escáner en Identifica (ref. 2) y verde oliva profundo para los
 * momentos destacados (ref. 3). Va al final para imponerse.
 * ========================================================= */
:root {
  --verde: #5e8f64;          /* salvia: botones y acentos */
  --verde-osc: #3b5418;      /* oliva profundo */
  --verde-claro: #d3e6cf;    /* salvia muy claro */
  --oliva: #3b5418;
  --oliva-2: #283a0f;
  --menta: #eef3ec;
  --menta-2: rgba(255,255,255,.55);
  --texto: #1c2a1f;
  --suave: #5a6c5d;
  --cristal: rgba(255,255,255,.44);
  --cristal-fuerte: rgba(255,255,255,.66);
  --cristal-borde: rgba(255,255,255,.7);
  --desenfoque: blur(18px) saturate(160%);
  --sombra: 0 10px 34px rgba(38,64,42,.12);
}

/* Fondo: hojas desenfocadas (estático, no consume batería) */
body { background: linear-gradient(165deg, #edf2ea 0%, #dce7d8 55%, #cfdcc9 100%); color: var(--texto); }
body::before {
  content: ""; position: fixed; inset: -60px; z-index: -2; pointer-events: none;
  background: url("../img/chamaerops-humilis-hoja.jpg") center / cover no-repeat;
  filter: blur(44px) saturate(1.15); opacity: .5; transform: scale(1.1);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 85% 5%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(50% 40% at 0% 100%, rgba(59,84,24,.18), transparent 70%),
    linear-gradient(rgba(240,245,238,.45), rgba(240,245,238,.2));
}

/* Superficies de cristal */
.planta, .progreso-tarjeta, .buscador, .chips button, .chip-filtros, .navegacion, .acordeon, .juego-tarjeta:not(.verde),
.opciones-juego, .respuestas button, .explicacion, .vf-cab, .ordena-item, .hallazgo, .menu, .pop-filtros, .alternativa,
.resultado-id.fuera, .opcion-rec, .campo-hora, .comp-tabla, .aviso-bloque, .icono.cristal, .casilla, .clave-rapida,
.hoja-dialogo, .hallazgo-detalle .datos-id, .btn:not(.principal):not(.claro):not(.peligro), .comp-col select, .cara-frente {
  background: var(--cristal);
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  border: 1px solid var(--cristal-borde);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn.peligro { background: rgba(255,255,255,.5); border: 1px solid rgba(179,65,47,.25); }

/* Botones */
.btn.principal, .chips button.activo, .opciones-juego .chips button.activo {
  background: linear-gradient(180deg, #6f9f74, #56865c); color: #fff; border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 8px 20px rgba(86,134,92,.35), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.claro { background: rgba(255,255,255,.85); color: var(--oliva); border: 1px solid rgba(255,255,255,.9); }
.enlace { color: var(--oliva); }
.chips button { color: var(--texto); }
.opciones-juego .chips button { background: rgba(255,255,255,.55); }
.icono.cristal { width: 44px; height: 44px; color: var(--texto); }
.icono.cristal svg { width: 20px; height: 20px; }
.logo { fill: var(--oliva); }

/* Tipografía: mezcla de peso fino y negrita (ref. 1 y 3) */
.titulo h1 { color: var(--texto); letter-spacing: -.025em; }
.saludo-cab { text-align: left; padding: 8px 2px 18px; }
.saludo-cab h1 { font-size: clamp(2rem, 8vw, 2.8rem); line-height: 1.12; }
.saludo-cab .fino { font-weight: 300; }
.sub-saludo { margin: 8px 0 0; color: var(--suave); font-size: .92rem; }
.titulo.izq h1 { font-weight: 700; }
.juegos-cab, .identifica > .saludo-cab { max-width: 520px; margin: 0 auto; }
#vista-identifica .saludo-cab { max-width: 480px; margin: 0 auto; }

/* Barra inferior de cristal */
.navegacion { background: rgba(255,255,255,.55); border-radius: 28px; padding: 7px; }
.navegacion .indicador { top: 7px; bottom: 7px; left: 7px; width: calc((100% - 14px) / 4); border-radius: 21px; background: linear-gradient(180deg, #6f9f74, #56865c); }
.navegacion button { color: var(--suave); }
.navegacion button.activo { color: #fff; }

/* ---- Inicio ---- */
.giro { max-width: 460px; }
.cara-frente { color: var(--texto); }
.cara-frente .foto { border-radius: 26px; }
.cara-pie span { color: var(--suave); opacity: 1; }
.boton-giro { background: linear-gradient(180deg, #6f9f74, #56865c); box-shadow: 0 10px 22px rgba(86,134,92,.4); }
.cara-dorso {
  background: radial-gradient(120% 80% at 100% 0%, #5d7a2c 0%, var(--oliva) 45%, var(--oliva-2) 100%);
  color: #f2f6ea; border: 1px solid rgba(255,255,255,.12);
}
.dorso-clave { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.dorso-botones .btn.claro { background: #eaf2dc; color: var(--oliva-2); }
.dorso-botones .btn:not(.claro) { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.25); box-shadow: none; }
.nota-dia { color: var(--suave); }

.progreso-tarjeta { max-width: 460px; border-radius: 28px; padding: 18px; }
.progreso-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.progreso-cab strong { font-size: 1rem; }
.progreso-cab span { font-size: .75rem; color: var(--suave); }
.progreso-tarjeta .progreso { margin: 14px 0 10px; background: rgba(255,255,255,.6); }
.progreso div { background: linear-gradient(90deg, #7fae84, #56865c); }

/* Casillas tipo "Care overview" */
.casillas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.casilla {
  border-radius: 18px; padding: 12px 6px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: rgba(255,255,255,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.casilla i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(94,143,100,.14); color: var(--verde); }
.casilla i svg { width: 17px; height: 17px; }
.casilla span { font-size: .68rem; color: var(--suave); font-weight: 500; }
.casilla b { font-size: 1.05rem; line-height: 1.1; color: var(--texto); }
.casilla b small { font-size: .68rem; font-weight: 500; color: var(--suave); }
.casilla b.texto { font-size: .8rem; line-height: 1.2; }
.casilla b:not(.texto) { white-space: nowrap; font-size: .98rem; }
.aviso p { font-size: .9rem; }
.aviso strong { font-size: .95rem; }

/* ---- Herbario ---- */
.buscador { border-radius: 20px; }
.buscador input::placeholder { color: #7c8b7f; }
.grupo-lista h2 { font-weight: 600; font-size: 1.25rem; }
.planta { color: var(--texto); border-radius: 26px; padding: 8px 8px 14px; }
.planta .foto { border-radius: 20px; aspect-ratio: 1 / 1.05; background: #cfdcc9; }
.planta h3 { font-size: .98rem; margin: 10px 6px 0; }
.planta p { margin: 2px 6px 0; color: var(--suave); opacity: 1; }
.planta .estado { display: flex; align-items: center; gap: 6px; font-size: .72rem; font-style: normal; margin-top: 6px; color: #9a6d1c; font-weight: 500; }
.planta .estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #e0a93a; box-shadow: 0 0 0 3px rgba(224,169,58,.18); }
.planta .estado.si { color: var(--verde); }
.planta .estado.si::before { background: #6fae76; box-shadow: 0 0 0 3px rgba(111,174,118,.2); }
.chip-filtros b { background: var(--verde); }
.pop-filtros select { background: rgba(255,255,255,.7); }

/* ---- Ficha ---- */
.pantalla { background: #e6eee2; color: var(--texto); isolation: isolate; }
.pantalla.claro { background: linear-gradient(165deg, #eef3ea, #d9e5d4); }
.pantalla::backdrop { background: rgba(28, 44, 30, .45); backdrop-filter: blur(3px); }
.fondo-difuso {
  position: fixed; inset: -80px; z-index: -1; pointer-events: none;
  background-size: cover; background-position: center; filter: blur(46px) saturate(1.2); opacity: .55; transform: scale(1.15);
}
.pantalla::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(236,242,232,.35), rgba(236,242,232,.65)); }
.ficha-cab { padding: 18px 20px 0; }
.botones-cab { gap: 10px; }

.hero-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 14px 20px 8px; align-items: center; }
.hero-v2 .hero-texto { order: -1; }
.hero-v2 h2 { font-size: clamp(1.9rem, 5vw, 2.9rem); line-height: 1.05; letter-spacing: -.02em; color: var(--texto); }
.hero-v2 .sub { color: var(--texto); opacity: .85; margin-top: 6px; }
.hero-v2 .sub.lat { color: var(--verde); opacity: 1; font-weight: 500; }
.hero-v2 .grupo { color: var(--suave); opacity: 1; }
.hero-v2 .voz { background: rgba(255,255,255,.6); color: var(--verde); border: 1px solid rgba(255,255,255,.8); }
.hero-v2 .credito, .hero-v2 .credito-actual { color: var(--suave); opacity: 1; }
.hero-v2 .credito a { color: var(--suave); }
.etiquetas-estado { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.etiqueta-estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; font-size: .74rem; font-weight: 500;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); color: var(--texto);
}
.etiqueta-estado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6fae76; }
.etiqueta-estado.neutra::before { background: #a9b8ab; }
.etiqueta-estado.si { background: rgba(111,174,118,.22); color: #2f5d34; }
.carrusel-fotos { border-radius: 30px; box-shadow: 0 20px 40px rgba(38,64,42,.22); }
.puntos button { background: rgba(28,42,31,.2); }
.puntos button.activo { background: var(--verde); }

.resumen { padding: 16px 20px 0; }
.resumen h3 { margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
.resumen .casillas { gap: 10px; }
.resumen .casilla { background: var(--cristal); border: 1px solid var(--cristal-borde); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); box-shadow: var(--sombra); }

.panel { background: transparent; margin-top: 0; padding: 18px 20px 40px; }
.panel-top { grid-template-columns: 120px 1fr; gap: 16px; background: var(--cristal); border: 1px solid var(--cristal-borde); border-radius: 26px; padding: 14px; -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); box-shadow: var(--sombra); }
.panel-top .foto { width: 120px; margin-top: 0; border: 0; border-radius: 20px; }
.panel-top .pie-foto { display: none; }
.aviso { border-left: 3px solid rgba(94,143,100,.45); }
.acordeon { border-radius: 22px; }
.acordeon[open] summary { border-bottom: 1px solid rgba(255,255,255,.7); }
.acordeon summary:hover { background: rgba(255,255,255,.3); }
.acordeon-cuerpo .clave li { background: rgba(255,255,255,.55); }
.clave li::before { background: var(--verde); }
.lista-simple li::before { background: var(--verde); }
.tabla div + div { border-top: 1px solid rgba(255,255,255,.7); }
.lista-conf li + li { border-top: 1px solid rgba(255,255,255,.7); }
.btn.mini { background: rgba(255,255,255,.7); }
.cal-fila i { background: rgba(255,255,255,.55); }
.cal-fila i.on.poda { background: var(--verde); }
.acciones-ficha { padding: 0 2px; }

/* Comparador y otros diálogos claros */
.ficha-cab.oscuro { color: var(--texto); }
.comp-dif { background: radial-gradient(120% 90% at 100% 0%, #5d7a2c, var(--oliva) 50%, var(--oliva-2)); }
.comp-fila + .comp-fila { border-top: 1px solid rgba(255,255,255,.7); }
.comp-t { color: var(--verde); }

/* ---- Jugar ---- */
.juego-tarjeta { border-radius: 30px; }
.juego-tarjeta.verde {
  background: radial-gradient(120% 90% at 100% 0%, #5d7a2c 0%, var(--oliva) 50%, var(--oliva-2) 100%);
  color: #f2f6ea; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 14px 34px rgba(40,58,15,.3);
}
.juego-tarjeta.verde .boton-giro { background: rgba(255,255,255,.18); box-shadow: none; }
.resultado { background: radial-gradient(120% 90% at 100% 0%, #5d7a2c 0%, var(--oliva) 50%, var(--oliva-2) 100%); box-shadow: 0 20px 40px rgba(40,58,15,.3); }
.resultado .btn.claro { background: #eaf2dc; }
.resultado .btn:not(.claro) { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.25); }
.marcador b { color: var(--texto); }
.carta-reverso { background: radial-gradient(120% 90% at 100% 0%, #6f9f74, #4f7a55); }
.carta-anverso { background: rgba(255,255,255,.85); }
.respuestas button.bien, .vf-botones .btn.bien { background: rgba(111,174,118,.3); border-color: #6fae76; }
.respuestas button.mal { background: rgba(214,120,100,.2); }
.progreso { background: rgba(255,255,255,.55); }

/* ---- Identifica: cámara oscura con escáner (ref. 2) ---- */
.camara {
  background: radial-gradient(120% 80% at 100% 0%, #3f5e2a, #213316 70%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 44px rgba(28,44,20,.35); color: #f0f5ea;
}
.camara-foto { position: relative; background-color: rgba(0,0,0,.25); border-radius: 26px; }
.camara-foto.con-foto > .esquinas { display: block; }
.esquinas { position: absolute; inset: 16%; pointer-events: none; }
.esquinas i { position: absolute; width: 34px; height: 34px; border: 3.5px solid rgba(255,255,255,.95); }
.esquinas i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.esquinas i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.esquinas i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.esquinas i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.organos button { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #f0f5ea; }
.organos button.activo { background: #f0f5ea; color: var(--oliva-2); }
.camara-botones .btn.claro { background: #eaf2dc; color: var(--oliva-2); }
.camara-botones .btn:not(.claro) { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.2); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.escaner { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 3 / 4; background: #213316; box-shadow: 0 20px 44px rgba(28,44,20,.35); }
.escaner > img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transform: none; filter: saturate(1.1); }
.escaner .esquinas { inset: 14% 12% 30%; }
.linea-escaneo {
  position: absolute; left: 12%; right: 12%; top: 14%; height: 70px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(190,255,190,.35) 80%, rgba(220,255,220,.9));
  border-bottom: 2px solid rgba(230,255,230,.95); animation: escanea 1.8s cubic-bezier(.45,0,.55,1) infinite alternate;
}
@keyframes escanea { from { top: 8%; opacity: .6; } to { top: 58%; opacity: 1; } }
.escaner-pie {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: 22px; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.35); color: #fff;
}
.escaner-pie strong { display: block; }
.escaner-pie small { opacity: .85; font-size: .78rem; }
.pulso { width: 12px; height: 12px; border-radius: 50%; background: #9be3a5; box-shadow: 0 0 0 0 rgba(155,227,165,.7); animation: latidoBoton 1.4s infinite; flex: none; }

.resultado-id { border-radius: 30px; }
.resultado-id.en-herbario { background: radial-gradient(120% 80% at 100% 0%, #5d7a2c 0%, var(--oliva) 50%, var(--oliva-2) 100%); }
.resultado-id.en-herbario .clave li { background: rgba(255,255,255,.9); }
.sello.si { background: #d8ecc9; color: var(--oliva-2); }
.pariente { background: rgba(94,143,100,.12); }
.mapa { border: 1px solid var(--cristal-borde); box-shadow: var(--sombra); }
.hallazgo { border-radius: 24px; }

/* Recordatorio y mensajes */
.hoja-dialogo { background: rgba(240,245,237,.82); }
.campana .punto { border-color: #e6eee2; }
.toast { background: rgba(28,42,31,.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---- Juegos nuevos ---- */
.juego-tarjeta .nuevo {
  position: absolute; top: 14px; right: 16px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 99px; background: #e6c56a; color: #3a2c05;
}
.juego-tarjeta.verde .nuevo { background: #e6c56a; }
.juego-tarjeta h2 { padding-right: 60px; }

/* Conecta con hilos */
.conecta { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.conecta.con-rasgos { grid-template-columns: .8fr 1.2fr; gap: 0 44px; }
.hilos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 2; }
.hilo { fill: none; stroke-width: 3.5; stroke-linecap: round; transition: stroke-dashoffset .55s cubic-bezier(.3,.7,.3,1), opacity .35s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.hilo.bien { stroke: #56865c; }
.hilo.mal { stroke: #c9573f; stroke-dasharray: none; }
.hilo.desvanece { opacity: 0; }
.columna { display: flex; flex-direction: column; gap: 10px; }
.nodo {
  position: relative; min-height: 64px; border-radius: 18px; padding: 8px 12px; display: flex; align-items: center; gap: 8px;
  text-align: left; font-size: .82rem; font-weight: 600; line-height: 1.25; color: var(--texto);
  background: var(--cristal); border: 2px solid var(--cristal-borde); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra); transition: transform .18s, border-color .2s, background-color .2s, opacity .3s;
}
.nodo i { font-weight: 500; }
.nodo .rasgo { font-weight: 500; font-size: .74rem; }
.nodo.con-foto { padding: 5px; min-height: 0; }
.nodo.con-foto .foto { width: 100%; aspect-ratio: 4 / 3; border-radius: 13px; }
.nodo.elegido { border-color: var(--verde); background: rgba(211,230,207,.85); transform: scale(1.03); box-shadow: 0 0 0 4px rgba(94,143,100,.2), var(--sombra); }
.nodo.hecho { border-color: #8fc295; background: rgba(211,230,207,.6); opacity: .8; cursor: default; }
.nodo.error { animation: temblor .45s ease; border-color: #c9573f; }
.punto-hilo {
  position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: #fff; border: 3px solid var(--verde); box-shadow: 0 1px 4px rgba(0,0,0,.2); z-index: 3;
}
.columna.izq .punto-hilo { right: -8px; }
.columna.der .punto-hilo { left: -8px; }
.nodo.elegido .punto-hilo { background: var(--verde); animation: latidoBoton 1.4s infinite; }
.nodo.hecho .punto-hilo { background: #56865c; }

/* Foto misteriosa */
.misterio { position: relative; aspect-ratio: 4 / 3; border-radius: 26px; overflow: hidden; background: #213316; box-shadow: var(--sombra); }
.misterio img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; transition: filter 1s ease, transform 1s cubic-bezier(.3,.7,.3,1); }
.nivel { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 5px; padding: 6px 8px; border-radius: 99px; background: rgba(0,0,0,.35); backdrop-filter: blur(8px); }
.nivel i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.3); transition: background .3s; }
.nivel i.on { background: #e6c56a; }
.pista { display: block; margin: 12px auto 0; }

/* Escribe el nombre */
.escribe { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.escribe label { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--suave); }
.escribe input {
  font: inherit; font-size: 1.05rem; padding: 14px 16px; border-radius: 16px; color: var(--texto); outline: 0;
  background: var(--cristal-fuerte); border: 2px solid var(--cristal-borde); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  transition: border-color .2s, box-shadow .2s;
}
.escribe input[name="lat"] { font-style: italic; }
.escribe input:focus { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(94,143,100,.18); }
.escribe input.bien { border-color: #6fae76; background: rgba(111,174,118,.18); }
.escribe input.casi { border-color: #d9b04f; background: rgba(230,197,106,.2); }
.escribe input.mal { border-color: #c9573f; background: rgba(214,120,100,.15); animation: temblor .45s ease; }
.correccion { font-size: .8rem; font-weight: 500; color: var(--texto); min-height: 0; }
.correccion:empty { display: none; }
.escribe .vf-botones { margin-top: 4px; }
.pregunta [data-zoom] .foto { aspect-ratio: 4 / 3; border-radius: 26px; }

.conecta:has(.nodo.con-foto) { grid-template-columns: .85fr 1fr; }
@media (max-width: 720px) {
  .conecta { gap: 0 64px; }
  .conecta.con-rasgos { gap: 0 44px; }
  .nodo { font-size: .76rem; padding: 8px 10px; }
}

@media (max-width: 720px) {
  .hero-v2 { grid-template-columns: 1fr; gap: 14px; padding: 8px 16px 4px; }
  .hero-v2 .hero-texto { order: 0; }
  .hero-v2 .hero-fotos { order: 1; }
  .carrusel-fotos .foto { aspect-ratio: 1 / 1; }
  .resumen, .panel { padding-left: 16px; padding-right: 16px; }
  .panel-top { grid-template-columns: 96px 1fr; }
  .panel-top .foto { width: 96px; }
  .casillas { gap: 6px; }
  .casilla { padding: 10px 4px 8px; border-radius: 16px; }
  .casilla i { width: 28px; height: 28px; }
  .navegacion { border-radius: 26px; }
}

/* =========================================================
 * PULIDO: iconos, letra botánica, contraste, coherencia,
 * bienvenida y modo oscuro
 * ========================================================= */

/* Iconos (sprite estilo Lucide) */
.ico { width: 1.25em; height: 1.25em; flex: none; stroke-width: 2; vertical-align: -.2em; }
.icono .ico { width: 22px; height: 22px; }
.navegacion .ico { width: 21px; height: 21px; }
.buscador .ico, .chip-filtros .ico { width: 18px; height: 18px; }
.camara-foto > .ico { width: 54px; height: 54px; opacity: .85; stroke-width: 1.6; }
.camara-botones .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.menu button, .menu .boton { display: flex; align-items: center; gap: 10px; }
.menu .ico { width: 18px; height: 18px; color: var(--verde); }
.voz .ico { width: 15px; height: 15px; }
.acordeon summary .ico { width: 20px; height: 20px; color: var(--verde); transition: transform .25s; }
.acordeon[open] summary .ico { transform: rotate(180deg); }
.sello .ico { width: 16px; height: 16px; stroke-width: 2.6; }
.icono.cristal .ico { width: 20px; height: 20px; }

.campana .punto { width: 10px !important; height: 10px; min-width: 0; padding: 0; top: 7px; right: 7px; box-sizing: border-box; z-index: 2; }
.boton-giro span { border-color: #fff !important; }

/* Letra botánica: nombres científicos en serif cursiva (como los herbarios antiguos) */
i, .lat, .escribe input[name="lat"] {
  font-family: "Fraunces", "Iowan Old Style", Georgia, serif; font-style: italic; font-weight: 500;
  font-optical-sizing: auto; letter-spacing: .005em;
}
.hero-v2 .sub.lat, .hero-v2 .sub.lat i { font-size: 1.12rem; font-weight: 500; }
.planta .lat { font-size: .82rem; }
.cara-dorso .sub i { font-size: 1.08rem; }
.respuestas button small, .alternativa .nombre i, .nodo i { font-size: 1.02em; }

/* Más contraste para leer al aire libre */
:root { --suave: #42544a; }
.credito, .credito-actual .credito, .pie-foto, .nota-dia, .sub-saludo, .planta p, .casilla span, .progreso-tarjeta p, .fuente {
  color: var(--suave); opacity: 1;
}
.credito { font-size: .72rem; }
.sub-saludo { font-size: .95rem; }
.nota-dia { font-size: .86rem; }
.navegacion button span { font-size: .78rem; font-weight: 600; }
.casilla span { font-size: .72rem; }
.cara-pie span { color: var(--suave); font-size: .9rem; }
.planta .estado { font-weight: 600; }

/* "Ver ficha" legible sobre el verde oliva */
.dorso-botones .btn:not(.claro) { background: rgba(255,255,255,.22) !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.55) !important; }
.resultado .btn:not(.claro) { background: rgba(255,255,255,.22); border: 1.5px solid rgba(255,255,255,.55); }

/* Coherencia: formulario, menú, filtros, comparador y hallazgos al cristal */
.menu { border-radius: 20px; padding: 8px; background: rgba(250,252,248,.82); }
.menu button:hover, .menu .boton:hover { background: rgba(94,143,100,.12); }
.estado-sync { border-top-color: rgba(28,42,31,.1); }
.pop-filtros { border-radius: 20px; background: rgba(250,252,248,.86); }
#form-especie { max-width: 820px; margin: 0 auto; }
#form-especie h2 { font-weight: 300; font-size: 2rem; }
#form-especie input:not([type=checkbox]), #form-especie select, #form-especie textarea {
  background: var(--cristal-fuerte); border: 1px solid var(--cristal-borde); border-radius: 16px;
  -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
}
#form-especie input:focus, #form-especie textarea:focus, #form-especie select:focus { box-shadow: 0 0 0 3px rgba(94,143,100,.25); border-color: var(--verde); }
.campo-foto { background: var(--cristal); border: 1px solid var(--cristal-borde); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque); box-shadow: var(--sombra); border-radius: 24px; }
.campo-foto .boton { background: linear-gradient(180deg, #6f9f74, #56865c); }
.cab-form .volver, #form-especie .volver, .ficha-cab .volver { color: var(--texto); }
.comparador { padding-top: 14px; }
.comp-cols .foto { border-radius: 22px; }
.comp-col h3 { font-weight: 600; }
.hallazgo-detalle > img { border-radius: 28px; box-shadow: var(--sombra); }
.hallazgo-detalle h2 { font-weight: 600; }
.ficha-cab.oscuro strong { font-weight: 600; }

/* Bienvenida */
.bienvenida {
  width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--texto); overflow: hidden;
}
.bienvenida::backdrop { background: linear-gradient(165deg, #edf2ea, #cfdcc9); }
.bv { height: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-between; padding: calc(40px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom)); }
.bv-paso { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.bv-paso.desde-der { animation: entraDer .45s cubic-bezier(.2,.8,.3,1); }
.bv-paso.desde-izq { animation: entraIzq .45s cubic-bezier(.2,.8,.3,1); }
.bv h2 { font-size: clamp(2.1rem, 9vw, 2.8rem); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
.bv h2 .fino { font-weight: 300; }
.bv p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--suave); }
.bv-nota { font-size: .88rem !important; }
.bv-logo, .bv-campana {
  width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; margin-bottom: 8px;
  background: radial-gradient(120% 90% at 100% 0%, #5d7a2c, var(--oliva) 55%, var(--oliva-2)); box-shadow: 0 16px 34px rgba(40,58,15,.35);
}
.bv-logo svg { width: 58px; height: 40px; fill: #eaf2dc; stroke: none; }
.bv-campana { color: #eaf2dc; animation: aparecePremio .6s cubic-bezier(.3,1.5,.5,1); }
.bv-campana .ico { width: 44px; height: 44px; animation: campaneo 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
@keyframes campaneo { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-12deg); } }
.bv-lista { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 10px; }
.bv-lista li {
  display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 22px;
  background: var(--cristal); border: 1px solid var(--cristal-borde); -webkit-backdrop-filter: var(--desenfoque); backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra); animation: subeCascada .5s cubic-bezier(.2,.8,.3,1) backwards;
}
.bv-lista li:nth-child(2) { animation-delay: .07s; } .bv-lista li:nth-child(3) { animation-delay: .14s; } .bv-lista li:nth-child(4) { animation-delay: .21s; }
.bv-lista li > i { width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center; background: rgba(94,143,100,.15); color: var(--verde); font-style: normal; }
.bv-lista li > i .ico { width: 22px; height: 22px; }
.bv-lista b { display: block; font-size: .98rem; }
.bv-lista span { display: block; font-size: .82rem; color: var(--suave); line-height: 1.35; margin-top: 2px; }
.bv-pie { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
.bv-puntos { display: flex; justify-content: center; gap: 6px; }
.bv-puntos i { width: 8px; height: 8px; border-radius: 99px; background: rgba(28,42,31,.2); transition: width .3s, background .3s; }
.bv-puntos i.activo { width: 26px; background: var(--verde); }
.bv-boton { padding: 17px; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 20px; }

/* =========================================================
 * MODO OSCURO (automático según el móvil)
 * ========================================================= */
:root[data-tema="oscuro"] {
  --texto: #e7eee2;
  --suave: #b3c2ae;
  --menta: #1a2417;
  --menta-2: rgba(255,255,255,.08);
  --verde: #8cc293;
  --verde-claro: #2d4128;
  --cristal: rgba(255,255,255,.07);
  --cristal-fuerte: rgba(255,255,255,.1);
  --cristal-borde: rgba(255,255,255,.12);
  --sombra: 0 12px 34px rgba(0,0,0,.35);
  --blanco: #1f2a1c;
  color-scheme: dark;
}
[data-tema="oscuro"] body { background: linear-gradient(165deg, #172015, #0f160d 60%, #121b10); }
[data-tema="oscuro"] body::before { opacity: .22; filter: blur(50px) saturate(1.1) brightness(.7); }
[data-tema="oscuro"] body::after { background: radial-gradient(60% 45% at 85% 5%, rgba(140,194,147,.1), transparent 70%), linear-gradient(rgba(10,16,9,.35), rgba(10,16,9,.55)); }
[data-tema="oscuro"] .logo { fill: #a7d0a2; }
[data-tema="oscuro"] .cristal, [data-tema="oscuro"] .icono.cristal, [data-tema="oscuro"] .casilla,
[data-tema="oscuro"] .etiqueta-estado, [data-tema="oscuro"] .opciones-juego .chips button, [data-tema="oscuro"] .progreso-tarjeta .progreso,
[data-tema="oscuro"] .progreso, [data-tema="oscuro"] .acordeon-cuerpo .clave li, [data-tema="oscuro"] .btn.mini,
[data-tema="oscuro"] .cal-fila i, [data-tema="oscuro"] .hero-v2 .voz, [data-tema="oscuro"] .pop-filtros select {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: var(--texto);
}
[data-tema="oscuro"] .casilla i, [data-tema="oscuro"] .bv-lista li > i { background: rgba(140,194,147,.14); color: var(--verde); }
[data-tema="oscuro"] .btn.claro { background: #d9e8cf; color: #1d2a12; }
[data-tema="oscuro"] .btn.principal, [data-tema="oscuro"] .chips button.activo, [data-tema="oscuro"] .navegacion .indicador,
[data-tema="oscuro"] .boton-giro, [data-tema="oscuro"] .campo-foto .boton {
  background: linear-gradient(180deg, #6f9f74, #4c7a52); color: #fff;
}
[data-tema="oscuro"] .navegacion { background: rgba(28,38,25,.7); }
[data-tema="oscuro"] .navegacion button { color: var(--suave); }
[data-tema="oscuro"] .navegacion button.activo { color: #fff; }
[data-tema="oscuro"] .menu, [data-tema="oscuro"] .pop-filtros, [data-tema="oscuro"] .hoja-dialogo { background: rgba(30,40,27,.92); }
[data-tema="oscuro"] .pantalla { background: #141d12; }
[data-tema="oscuro"] .pantalla.claro { background: linear-gradient(165deg, #172015, #0f160d); }
[data-tema="oscuro"] .pantalla::after { background: linear-gradient(rgba(14,20,12,.55), rgba(14,20,12,.8)); }
[data-tema="oscuro"] .fondo-difuso { opacity: .35; }
[data-tema="oscuro"] .hero-v2 .sub.lat, [data-tema="oscuro"] .hero-v2 .sub.lat i { color: #a7d0a2; }
[data-tema="oscuro"] .planta .foto { background: #25331f; }
[data-tema="oscuro"] .planta .estado { color: #e6c56a; }
[data-tema="oscuro"] .planta .estado.si { color: #a7d0a2; }
[data-tema="oscuro"] .etiqueta-estado.si { background: rgba(140,194,147,.2); color: #cfe7c9; }
[data-tema="oscuro"] .aviso p { color: var(--texto); }
[data-tema="oscuro"] .aviso { border-left-color: rgba(140,194,147,.45); }
[data-tema="oscuro"] .enlace, [data-tema="oscuro"] .contenido a, [data-tema="oscuro"] .acordeon-cuerpo a, [data-tema="oscuro"] .resultado-id a { color: #a7d0a2; }
[data-tema="oscuro"] .carta-anverso { background: rgba(255,255,255,.1); color: var(--texto); }
[data-tema="oscuro"] .respuestas button.bien, [data-tema="oscuro"] .vf-botones .btn.bien { background: rgba(111,174,118,.25); }
[data-tema="oscuro"] .nodo.elegido { background: rgba(140,194,147,.2); }
[data-tema="oscuro"] .nodo.hecho { background: rgba(140,194,147,.12); }
[data-tema="oscuro"] .punto-hilo { background: #1f2a1c; }
[data-tema="oscuro"] .resultado-id.fuera { color: var(--texto); }
[data-tema="oscuro"] .aviso-id { background: rgba(230,197,106,.12); color: #f0dca0; }
[data-tema="oscuro"] .pariente { background: rgba(140,194,147,.12); }
[data-tema="oscuro"] .toast { background: rgba(231,238,226,.92); color: #141d12; }
[data-tema="oscuro"] .bienvenida::backdrop { background: linear-gradient(165deg, #172015, #0f160d); }
[data-tema="oscuro"] .bv-puntos i { background: rgba(255,255,255,.2); }
[data-tema="oscuro"] .campana .punto { border-color: #141d12; }
[data-tema="oscuro"] .puntos button { background: rgba(255,255,255,.25); }
[data-tema="oscuro"] .tabla div + div, [data-tema="oscuro"] .lista-conf li + li, [data-tema="oscuro"] .comp-fila + .comp-fila,
[data-tema="oscuro"] .acordeon[open] summary { border-color: rgba(255,255,255,.08); }
[data-tema="oscuro"] .acordeon summary:hover { background: rgba(255,255,255,.04); }
[data-tema="oscuro"] #form-especie input:not([type=checkbox]), [data-tema="oscuro"] #form-especie select, [data-tema="oscuro"] #form-especie textarea { color: var(--texto); }
[data-tema="oscuro"] .escribe input { color: var(--texto); }
[data-tema="oscuro"] .foto::before { background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); }
@media print { :root[data-tema="oscuro"] { --texto: #111; } }