/* Ñeque — estilos. La app entera cambia de luz según el estado del timer:
   reposo (día de niebla) · foco (bosque adentro) · descanso (atardecer)
   · celebra (amanecer dorado). Paleta: bosque valdiviano + cobre. */

/* ── Fuentes autohospedadas ─────────────────────────────────────────── */
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/Fraunces-300-700-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('../assets/fonts/AlegreyaSans-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('../assets/fonts/AlegreyaSans-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Alegreya Sans';
  src: url('../assets/fonts/AlegreyaSans-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ── Tokens por modo ────────────────────────────────────────────────── */
:root {
  --cobre: #B96A3B;
  --cobre-oscuro: #9A5530;
  --copihue: #C4485C;
  --papel: #F2EDDF;
  --corteza: #3D2E20;
}

body {
  --fondo: #EDE8D9;
  --tinta: #3D2E20;
  --tinta-suave: rgba(61, 46, 32, 0.62);
  --linea: rgba(61, 46, 32, 0.16);
  --burbuja-bg: rgba(255, 253, 246, 0.75);
  --chip-borde: rgba(61, 46, 32, 0.3);
  --accion: var(--cobre);
  --accion-tinta: #FFF7EA;
}
body[data-modo="foco"], body[data-modo="pausa"] {
  --fondo: #1D3327;
  --tinta: #F2EDDF;
  --tinta-suave: rgba(242, 237, 223, 0.6);
  --linea: rgba(242, 237, 223, 0.16);
  --burbuja-bg: rgba(14, 29, 21, 0.55);
  --chip-borde: rgba(242, 237, 223, 0.35);
  --accion: #D08B57;
}
body[data-modo="descanso"] {
  --fondo: #E4D3C8;
  --tinta: #4A3230;
  --tinta-suave: rgba(74, 50, 48, 0.62);
  --linea: rgba(74, 50, 48, 0.16);
  --burbuja-bg: rgba(255, 250, 243, 0.7);
  --chip-borde: rgba(74, 50, 48, 0.3);
}
body[data-modo="celebra"] {
  --fondo: #F3DCAE;
  --tinta: #4A3520;
  --tinta-suave: rgba(74, 53, 32, 0.65);
  --linea: rgba(74, 53, 32, 0.16);
  --burbuja-bg: rgba(255, 251, 240, 0.8);
  --chip-borde: rgba(74, 53, 32, 0.3);
}

/* ── Base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; }
body {
  min-height: 100%;
  background: var(--fondo);
  color: var(--tinta);
  font-family: 'Alegreya Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  transition: background 1.4s ease, color 1.4s ease;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible {
  outline: 2px solid var(--accion);
  outline-offset: 3px;
  border-radius: 6px;
}

/* el atributo hidden manda sobre cualquier display de clase */
[hidden] { display: none !important; }

.app {
  max-width: 430px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 0;
}

main { flex: 1; display: flex; flex-direction: column; }
.vista { display: flex; flex-direction: column; flex: 1; }

/* ── Cabecera ───────────────────────────────────────────────────────── */
.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px 8px;
}
.marca {
  font-family: 'Fraunces', serif;
  font-weight: 550;
  font-size: 26px;
  letter-spacing: 0.01em;
}
.racha {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 15px;
  color: var(--tinta-suave);
}
.racha b { color: var(--tinta); font-weight: 700; }
.copihue { width: 20px; height: 20px; }

/* ── Escena ─────────────────────────────────────────────────────────── */
.escena {
  margin: 4px 14px 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 10px 30px -18px rgba(20, 35, 25, 0.5);
}
.escena svg { display: block; width: 100%; height: auto; }

/* cielos en crossfade */
.cielo { opacity: 0; transition: opacity 1.8s ease; }
body[data-modo="reposo"] .cielo-reposo,
body[data-modo="foco"] .cielo-foco,
body[data-modo="pausa"] .cielo-foco,
body[data-modo="descanso"] .cielo-descanso,
body[data-modo="celebra"] .cielo-celebra { opacity: 1; }

/* orbe sol/luna */
.orbe { opacity: 0; transition: opacity 1.5s ease; }
body[data-modo="foco"] .orbe,
body[data-modo="pausa"] .orbe,
body[data-modo="descanso"] .orbe { opacity: 1; }
#orbe { transition: transform 0.9s linear; }

/* capas del paisaje: color según modo */
.cordillera, .lomas, .suelo, .treeline path, .pasto, .nieve { transition: fill 1.8s ease, stroke 1.8s ease, opacity 1.8s ease; }
.cordillera { fill: #AFC2AF; }
.nieve { fill: #F0F2E8; }
.lomas { fill: #96AB89; }
.suelo { fill: #879B5F; }
.treeline path { fill: #5F7A56; }
.pasto { stroke: #6D8248; }

/* de noche (foco) el bosque y Piñón se apagan con la escena */
#bosque-escena, #pudu-slot {
  filter: brightness(1) saturate(1);
  transition: filter 1.8s ease;
}
body[data-modo="foco"] #bosque-escena,
body[data-modo="pausa"] #bosque-escena { filter: brightness(0.5) saturate(0.72); }
body[data-modo="foco"] #pudu-slot,
body[data-modo="pausa"] #pudu-slot { filter: brightness(0.66) saturate(0.85); }
body[data-modo="descanso"] #bosque-escena,
body[data-modo="descanso"] #pudu-slot { filter: brightness(0.86) saturate(0.9); }
body[data-modo="celebra"] #bosque-escena { filter: brightness(1.06) saturate(1.1); }

body[data-modo="foco"] .cordillera, body[data-modo="pausa"] .cordillera { fill: #12241B; }
body[data-modo="foco"] .nieve,      body[data-modo="pausa"] .nieve      { fill: #3D5847; }
body[data-modo="descanso"] .nieve { fill: #EBD5DB; }
body[data-modo="celebra"] .nieve  { fill: #F9ECCC; }
body[data-modo="foco"] .lomas,      body[data-modo="pausa"] .lomas      { fill: #1B3226; }
body[data-modo="foco"] .suelo,      body[data-modo="pausa"] .suelo      { fill: #2B4A34; }
body[data-modo="foco"] .treeline path, body[data-modo="pausa"] .treeline path { fill: #0F1F16; }
body[data-modo="foco"] .pasto,      body[data-modo="pausa"] .pasto      { stroke: #1E3626; }

body[data-modo="descanso"] .cordillera { fill: #B394A4; }
body[data-modo="descanso"] .lomas      { fill: #A08F74; }
body[data-modo="descanso"] .suelo      { fill: #7D8F58; }
body[data-modo="descanso"] .treeline path { fill: #5C6B4C; }
body[data-modo="descanso"] .pasto      { stroke: #64753F; }

body[data-modo="celebra"] .cordillera { fill: #D9A15E; }
body[data-modo="celebra"] .lomas      { fill: #BFA05B; }
body[data-modo="celebra"] .suelo      { fill: #90A05A; }
body[data-modo="celebra"] .treeline path { fill: #6E7E48; }
body[data-modo="celebra"] .pasto      { stroke: #74853F; }

/* niebla */
.niebla { fill: #F5F2E6; opacity: 0.5; transition: opacity 1.8s ease; }
.niebla-a { animation: deriva-niebla 26s ease-in-out infinite alternate; }
.niebla-b { animation: deriva-niebla 34s ease-in-out infinite alternate-reverse; }
body[data-modo="foco"] .niebla, body[data-modo="pausa"] .niebla { opacity: 0.08; }
body[data-modo="descanso"] .niebla { opacity: 0.35; }
body[data-modo="celebra"] .niebla { opacity: 0.25; }
@keyframes deriva-niebla {
  from { transform: translateX(-16px); }
  to   { transform: translateX(16px); }
}

/* luciérnagas: solo bosque adentro */
.luci { opacity: 0; }
body[data-modo="foco"] .luci { animation: luci 3.6s ease-in-out infinite; }
.l1 { animation-delay: 0s; } .l2 { animation-delay: 0.9s; }
.l3 { animation-delay: 1.7s; } .l4 { animation-delay: 2.3s; }
.l5 { animation-delay: 0.5s; } .l6 { animation-delay: 2.9s; }
@keyframes luci {
  0%, 100% { opacity: 0; }
  40% { opacity: 0.95; }
  60% { opacity: 0.4; }
}

/* árbol recién plantado: brota desde la base del tronco */
.arbol-esc {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.arbol.brota .arbol-esc {
  animation: brota 1.1s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes brota {
  from { transform: scale(0.01); }
  to   { transform: scale(var(--s, 1)); }
}

/* pétalos de copihue */
.petalo {
  fill: var(--copihue);
  opacity: 0.9;
  transform: translate(var(--x), -14px);
  animation-name: cae-petalo;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes cae-petalo {
  to {
    transform: translate(calc(var(--x) + var(--deriva)), 330px) rotate(300deg);
    opacity: 0.15;
  }
}

/* ── Piñón: animaciones por estado ──────────────────────────────────── */
/* transform-box solo en los grupos con animación CSS: aplicarlo a todo
   descoloca los elementos con transform de atributo (orejas, cuello). */

.pudu-cuerpo {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: respira 3.4s ease-in-out infinite;
}
@keyframes respira {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.022); }
}

.ojo {
  transform-box: fill-box;
  transform-origin: center;
  animation: parpadeo 5s infinite;
}
@keyframes parpadeo {
  0%, 93%, 100% { transform: scaleY(1); }
  95%, 97% { transform: scaleY(0.08); }
}

.ojo-cerrado { opacity: 0; }
.zzz { opacity: 0; }

.oreja-del {
  transform-box: fill-box;
  transform-origin: center bottom;
}
body[data-modo="foco"] .oreja-del { animation: tic-oreja 8s ease-in-out infinite; }
@keyframes tic-oreja {
  0%, 90%, 100% { transform: rotate(0deg); }
  92%, 96% { transform: rotate(-14deg); }
}

.pudu-cabeza {
  transform-box: fill-box;
  transform-origin: 85% 75%;
}
body[data-modo="foco"] .pudu-cabeza { animation: pastar 13s ease-in-out infinite; }
@keyframes pastar {
  0%, 68%, 88%, 100% { transform: rotate(0deg); }
  74%, 82% { transform: rotate(10deg); }
}

/* dormido en el pestañazo */
body[data-modo="descanso"] .ojo { animation: none; transform: scaleY(0.01); opacity: 0; }
body[data-modo="descanso"] .ojo-cerrado { opacity: 1; transition: opacity 0.6s 0.4s; }
body[data-modo="descanso"] .pudu-cuerpo { animation: respira 4.6s ease-in-out infinite; }
body[data-modo="descanso"] .zzz .z1,
body[data-modo="descanso"] .zzz .z2,
body[data-modo="descanso"] .zzz .z3 { animation: zeta 3.6s ease-in-out infinite; }
body[data-modo="descanso"] .zzz { opacity: 1; }
body[data-modo="descanso"] .zzz .z2 { animation-delay: 0.5s; }
body[data-modo="descanso"] .zzz .z3 { animation-delay: 1s; }
.zzz text { fill: #4A3230; }
body[data-modo="foco"] .zzz text, body[data-modo="pausa"] .zzz text { fill: #F2EDDF; }
@keyframes zeta {
  0% { opacity: 0; transform: translateY(4px); }
  30% { opacity: 0.85; }
  70% { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 0; }
}

/* saltos de celebración */
body[data-modo="celebra"] .pudu {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: salta 0.6s cubic-bezier(0.36, 0, 0.3, 1) 4;
}
@keyframes salta {
  0%, 100% { transform: translateY(0) scaleY(1); }
  18% { transform: translateY(0) scaleY(0.9); }
  50% { transform: translateY(-17px) scaleY(1.05); }
  85% { transform: translateY(0) scaleY(0.96); }
}

/* pausa: todo se aquieta */
body[data-modo="pausa"] .pudu-cuerpo,
body[data-modo="pausa"] .luci { animation-play-state: paused; }

/* ── Burbuja de Piñón ───────────────────────────────────────────────── */
.burbuja {
  position: relative;
  margin: 14px 24px 0;
  padding: 11px 16px;
  min-height: 3.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--burbuja-bg);
  border: 1px solid var(--linea);
  border-radius: 16px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 420;
  font-size: 16.5px;
  transition: background 1.4s ease, opacity 0.4s ease;
  backdrop-filter: blur(4px);
}
.burbuja.cambiando { opacity: 0; }

/* ── Reloj ──────────────────────────────────────────────────────────── */
.reloj {
  margin-top: 6px;
  text-align: center;
  font-family: 'Fraunces', serif;
  font-weight: 330;
  font-size: clamp(58px, 19vw, 78px);
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.reloj span { display: inline-block; width: 0.58em; text-align: center; }
.reloj span.dospuntos { width: 0.3em; transform: translateY(-0.05em); }

.bajo-reloj {
  text-align: center;
  color: var(--tinta-suave);
  font-size: 15.5px;
  min-height: 1.4em;
}

/* ── Controles ──────────────────────────────────────────────────────── */
.controles {
  display: flex;
  justify-content: center;
  margin: 14px 24px 4px;
}
.btn-principal {
  width: 100%;
  max-width: 300px;
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--accion);
  color: var(--accion-tinta);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 18px -8px rgba(122, 66, 30, 0.55);
  transition: transform 0.15s ease, background 0.3s ease;
}
.btn-principal:active { transform: scale(0.97); }

.botones-sesion {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}
.btn-secundario {
  flex: 1;
  padding: 14px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--chip-borde);
  font-weight: 700;
  font-size: 17px;
}
.btn-fantasma {
  flex: 1;
  padding: 14px 12px;
  border-radius: 999px;
  color: var(--tinta-suave);
  font-weight: 500;
  font-size: 16px;
}
.btn-fantasma.confirmando {
  color: var(--copihue);
  border: 1.5px solid currentColor;
  font-weight: 700;
}

/* ── Config ─────────────────────────────────────────────────────────── */
.config {
  margin: 12px 24px 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: opacity 0.5s ease;
}
.config.oculta { opacity: 0; pointer-events: none; }
.fila-config {
  display: flex;
  align-items: center;
  gap: 10px;
}
.etiqueta-config {
  width: 76px;
  font-size: 14px;
  color: var(--tinta-suave);
  text-align: right;
}
.chips { display: flex; gap: 7px; }
.chips-sonido { margin-left: auto; }
.chip {
  padding: 5px 13px;
  border-radius: 999px;
  border: 1.5px solid var(--chip-borde);
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta-suave);
  transition: all 0.25s ease;
}
.chip.activo, .chip[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--fondo);
  font-weight: 700;
}
.chip-icono { padding: 5px 11px; font-size: 16px; }

/* ── Stats ──────────────────────────────────────────────────────────── */
.stats {
  display: flex;
  justify-content: center;
  gap: 34px;
  margin: 18px 24px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
}
.stats div { text-align: center; }
.stats dt {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}
.stats dd {
  font-family: 'Fraunces', serif;
  font-weight: 550;
  font-size: 24px;
}

/* ── Vista Bosque ───────────────────────────────────────────────────── */
.titulo-vista {
  font-family: 'Fraunces', serif;
  font-weight: 550;
  font-size: 24px;
  margin: 10px 24px 2px;
}
.bosque-resumen {
  margin: 0 24px 14px;
  color: var(--tinta-suave);
  font-size: 15.5px;
}
.carta-pudu {
  margin: 0 20px 12px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--burbuja-bg);
  font-size: 15.5px;
}
.carta-pudu b { font-family: 'Fraunces', serif; font-weight: 600; }
.carta-pudu .sub { color: var(--tinta-suave); font-size: 14.5px; }

.coleccion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 20px;
}
.carta-especie {
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 12px 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  background: var(--burbuja-bg);
}
.carta-especie svg { width: 64px; height: 64px; }
.carta-especie.pendiente { opacity: 0.55; }
.carta-especie .nombre-especie {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 16px;
}
.carta-especie .cuenta { font-size: 14px; color: var(--tinta-suave); }
.carta-especie .dato {
  font-size: 13px;
  color: var(--tinta-suave);
  line-height: 1.3;
}

.stats-bosque { margin-bottom: 8px; }

/* ── Tabs ───────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 8px;
  padding: 8px 20px calc(12px + env(safe-area-inset-bottom));
  justify-content: center;
}
.tab {
  flex: 1;
  max-width: 150px;
  padding: 9px 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--tinta-suave);
  border: 1.5px solid transparent;
}
.tab.activa {
  color: var(--tinta);
  border-color: var(--chip-borde);
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .pudu-cuerpo, .ojo, .oreja-del, .pudu-cabeza, .niebla-a, .niebla-b,
  .luci, .petalo, body[data-modo="celebra"] .pudu, .arbol.brota {
    animation: none !important;
  }
  body, .cielo { transition-duration: 0.2s; }
}

/* pantallas cortas: escena más compacta */
@media (max-height: 720px) {
  .escena { margin-top: 0; }
  .reloj { font-size: clamp(48px, 15vw, 62px); }
  .stats { margin: 10px 24px; }
}