/* Vista "árbol frondoso": sobrescribe lo necesario de estilos.css.
   Los colores de la escena (--cielo1, --madera, --hoja1…) los interpola frondoso.js según la hora del día. */
:root{
  --cielo1:#9fd6f2; --cielo2:#fdf1d2; --nube:#ffffff; --c3:#a9d28f; --c2:#86bd6c; --c1:#62a553; --arb:#4f9a4a; --tronco:#7a5230;
  --casa:#f3e3c3; --techo:#b4543c; --puerta:#7a4a2e; --vent:#9fd6f2; --cerca:#fff8e6;
  --madera:#7a5230; --madera2:#a77b4c; --hoja1:#5da944; --hoja2:#7dc15a; --hoja3:#3f8d3d; --hoja4:#e0a23a; --hoja5:#d4643a;
  --luz:0; --v:7;
}
#vista{background:none}
#vista::after{box-shadow:inset 0 0 120px rgba(40,60,20,.16)}
:root[data-theme="dark"] #vista::after{box-shadow:inset 0 0 140px rgba(0,0,20,.55)}
#escena{position:absolute;inset:0;width:100%;height:100%;z-index:0}
#lienzo{z-index:1}
#ambiente{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
#estrellas circle{fill:#fff;animation:titila 3s ease-in-out infinite}
.rayos{animation:gira 40s linear infinite}
.nube ellipse{fill:var(--nube);opacity:.88}
.nube{animation:deriva var(--v) linear infinite;animation-delay:var(--d)}
.paj{fill:none;stroke:#3b3a46;stroke-width:2;stroke-linecap:round;animation:vuela var(--v) linear infinite,aletea .5s ease-in-out infinite alternate;animation-delay:var(--d),0s}
.humo circle{fill:#fff;opacity:0;animation:sube 6s ease-out infinite}
.vent{fill:var(--vent);filter:drop-shadow(0 0 calc(var(--luz) * 9px) rgba(255,211,107,var(--luz)))}
#arboles .copa{fill:var(--arb)} #arboles .tr{fill:var(--tronco)}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes deriva{from{transform:translateX(-400px)}to{transform:translateX(1800px)}}
@keyframes vuela{from{transform:translate(-80px,var(--y))}to{transform:translate(1700px,var(--y))}}
@keyframes aletea{from{d:path("M0 0q7-9 14 0q7-9 14 0")}to{d:path("M0 0q7 3 14 0q7 3 14 0")}}
@keyframes sube{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.75}100%{opacity:0;transform:translate(34px,-80px) scale(2.6)}}
@keyframes titila{50%{opacity:.25}}

/* ambiente: hojas que caen, luciérnagas, estrellas fugaces, pajaritos, hojas llevadas por el viento */
.caida,.volando{position:absolute;opacity:.8;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 14'%3E%3Cpath d='M1 7C7 0 17 0 23 7 17 14 7 14 1 7Z' fill='%2378b04a'/%3E%3Cpath d='M2 7H22' stroke='%233f7a2c' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat}
.caida{top:-30px;left:var(--x);width:22px;height:13px;animation:cae var(--t) linear infinite;animation-delay:var(--dl);filter:hue-rotate(var(--h))}
.volando{width:24px;height:14px;filter:hue-rotate(var(--h));animation:soplo var(--t) ease-out forwards}
.luci{position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;border-radius:50%;background:#f7f08a;box-shadow:0 0 12px 4px rgba(247,240,138,.7);animation:luz var(--t) ease-in-out infinite;animation-delay:var(--dl)}
.fugaz{position:absolute;width:150px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,rgba(255,255,255,0));box-shadow:0 0 10px 1px rgba(255,255,255,.8);transform-origin:0 50%;animation:fug 1.4s ease-out forwards}
.pajaro{position:absolute;animation:vuelo var(--t) linear forwards}
.pajaro path{fill:none;stroke:#3b3a46;stroke-width:2.2;stroke-linecap:round;animation:aletea .4s ease-in-out infinite alternate}
@keyframes cae{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(60px,28vh) rotate(110deg)}50%{transform:translate(-30px,56vh) rotate(220deg)}75%{transform:translate(70px,84vh) rotate(330deg)}100%{transform:translate(0,112vh) rotate(430deg)}}
@keyframes luz{0%,100%{transform:translate(0,0);opacity:.1}25%{transform:translate(30px,-24px);opacity:1}50%{transform:translate(-20px,-50px);opacity:.3}75%{transform:translate(26px,-20px);opacity:1}}
@keyframes fug{0%{opacity:0;transform:translate(0,0) rotate(-28deg)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(-28deg)}}
@keyframes vuelo{0%{transform:translate(0,0)}25%{transform:translate(160px,-40px)}50%{transform:translate(340px,-10px)}75%{transform:translate(520px,-70px)}100%{transform:translate(760px,-130px);opacity:0}}
@keyframes soplo{0%{transform:translate(0,0) rotate(0);opacity:.9}30%{transform:translate(calc(var(--dx) * .4),calc(var(--dy) * .2 - 40px)) rotate(200deg)}70%{transform:translate(calc(var(--dx) * .8),calc(var(--dy) * .7)) rotate(480deg);opacity:.8}100%{transform:translate(var(--dx),var(--dy)) rotate(720deg);opacity:0}}

/* árbol: tronco, ramas y hojas */
#suelo .mont{fill:var(--c1)} #suelo .borde{fill:none;stroke:var(--c2);stroke-width:5;stroke-linecap:round}
#suelo .tronco{fill:var(--madera)} #suelo .corteza{fill:none;stroke:var(--madera2);stroke-width:3;stroke-linecap:round;opacity:.45}
#suelo .raiz{fill:var(--madera)}
#suelo .fig{transition:fill .6s}
.rama{transition:filter .3s}
.rama .m{fill:var(--madera)}
#lineas .rama path{opacity:1;stroke-width:inherit}
#lineas .rama .m{fill:var(--madera);stroke:none}
#lineas .rama .r{fill:none;stroke:var(--madera2);stroke-linecap:round;opacity:.5;stroke-width:var(--rw,2px)}
.rama.ruta .m{filter:drop-shadow(0 0 6px rgba(255,200,90,.95))}
.hoja{--f:var(--hoja1);fill:var(--f)!important;transform-box:fill-box;transform-origin:0 50%;animation:mece var(--dur,4s) ease-in-out infinite alternate;animation-delay:var(--dl)}
.hoja.l2{--f:var(--hoja2)} .hoja.l3{--f:var(--hoja3)} .hoja.l4{--f:var(--hoja4)} .hoja.l5{--f:var(--hoja5)}
.flor{transform-box:fill-box;transform-origin:center;animation:late 3.2s ease-in-out infinite alternate;animation-delay:var(--dl)}
@keyframes mece{from{transform:rotate(calc(var(--v) * -1deg))}to{transform:rotate(calc(var(--v) * 1deg))}}
@keyframes late{from{transform:scale(.88)}to{transform:scale(1.12)}}

/* nodos */
.nodo{position:absolute;left:0;top:0;width:156px;display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;outline:none}
.medalla{position:relative;width:78px;height:78px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c),white 38%),var(--c) 62%);border:4px solid var(--card);
  box-shadow:0 0 0 3px var(--c),0 12px 20px -8px rgba(40,30,10,.55);transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .3s;animation:flota 5s ease-in-out infinite alternate;animation-delay:var(--dl,0s)}
.medalla b{font-family:var(--serif);font-size:1.55rem;color:#fff;letter-spacing:.02em;text-shadow:0 2px 3px rgba(0,0,0,.25);font-weight:700}
.nodo:hover .medalla{transform:scale(1.1)}
.nodo.fall .medalla{background:radial-gradient(circle at 30% 25%,#c9c0af,#8f8574 65%);box-shadow:0 0 0 3px #a69c8a,0 12px 20px -8px rgba(40,30,10,.5)}
.nodo.fall .medalla::after{content:"✝";position:absolute;top:-6px;left:-4px;width:24px;height:24px;border-radius:50%;background:var(--card);color:#7d725f;font-size:.8rem;display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.nodo.sel .medalla{animation:halo 1.6s ease-in-out infinite;transform:scale(1.1)}
.mini{position:absolute;right:-14px;bottom:-6px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;color:#fff;border:3px solid var(--card);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--c),transparent 40%),0 4px 8px rgba(0,0,0,.3);background:color-mix(in srgb,var(--c),white 28%);transition:transform .2s}
.mini:nth-of-type(2){right:auto;left:-14px}
.mini:hover{transform:scale(1.2)}
.mini::before{content:"♥";position:absolute;top:-10px;right:-6px;font-size:.78rem;color:#e0526a;text-shadow:0 1px 0 #fff}
.etq{position:relative;margin-top:9px;width:100%;padding:7px 8px 8px;border-radius:14px;background:var(--card);border:1px solid var(--line);text-align:center;box-shadow:0 8px 18px -12px rgba(40,30,10,.6)}
.nodo.abierta .etq{border-color:var(--c)}
.tag{height:13px;font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:color-mix(in srgb,var(--c),black 10%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
:root[data-theme="dark"] .tag{color:color-mix(in srgb,var(--c),white 40%)}
.etq .nm{font-family:var(--serif);font-weight:600;font-size:.83rem;line-height:15px;height:30px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.etq .yr{font-size:.7rem;color:var(--muted);height:15px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pls{margin-top:6px;display:flex;flex-direction:column;gap:1px}
.pl{display:flex;align-items:center;gap:5px;height:21px;padding:0 6px;border-radius:7px;font-size:.7rem;background:color-mix(in srgb,var(--c) 10%,var(--white));text-align:left}
.pl:hover{background:color-mix(in srgb,var(--c) 22%,var(--white))}
.pl i{font-style:normal;flex:none;width:16px;text-align:center;color:#e0526a;font-size:.72rem}
.pl.ex{background:transparent;border:1px dashed var(--exline);color:var(--muted)}
.pl.ex i{color:var(--muted);font-size:.58rem;font-weight:600;text-transform:uppercase}
.pl span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* la manzana va ARRIBA: de ahí brotan las ramas de sus hijos */
.manzana{position:absolute;left:50%;top:-20px;margin-left:-15px;width:30px;height:30px;border-radius:50% 50% 46% 46%;border:0;padding:0;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--c),white 35%),var(--c) 70%);color:#fff;font-weight:700;font-size:.78rem;
  box-shadow:0 4px 8px rgba(0,0,0,.35);transition:transform .25s cubic-bezier(.3,1.6,.5,1);z-index:2}
.manzana::before{content:"";position:absolute;left:50%;top:-8px;width:14px;height:9px;margin-left:1px;border-radius:0 100% 0 100%;background:var(--hoja2);transform:rotate(-12deg);border:1px solid var(--hoja3)}
.manzana::after{content:"";position:absolute;left:50%;top:-6px;width:2px;height:8px;background:var(--madera);margin-left:-1px}
.manzana:hover{transform:scale(1.18)}
.nodo.abierta .manzana{background:var(--card);color:var(--c);box-shadow:0 0 0 3px var(--c),0 4px 8px rgba(0,0,0,.3)}
.nodo:focus-visible .medalla{outline:3px solid var(--gold);outline-offset:4px}
/* abuelos en la raíz */
.nodo.raiz{width:360px;flex-direction:row;justify-content:center;align-items:flex-start;gap:14px;cursor:default}
.nodo.raiz .ab{width:160px;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.nodo.raiz .medalla{width:92px;height:92px}
.nodo.raiz .medalla b{font-size:1.8rem}
.nodo.raiz .lazo{font-style:normal;font-size:1.7rem;color:#e0526a;margin-top:30px;animation:late 1.2s ease-in-out infinite alternate;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.nodo.raiz .etq{margin-top:10px}
.nodo.raiz .ab.fall .medalla{background:radial-gradient(circle at 30% 25%,#c9c0af,#8f8574 65%);box-shadow:0 0 0 3px #a69c8a,0 12px 20px -8px rgba(40,30,10,.5)}
@keyframes flota{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes halo{0%,100%{box-shadow:0 0 0 3px var(--c),0 0 0 8px color-mix(in srgb,var(--c),transparent 70%),0 12px 20px -8px rgba(40,30,10,.55)}50%{box-shadow:0 0 0 3px var(--c),0 0 0 15px color-mix(in srgb,var(--c),transparent 88%),0 12px 20px -8px rgba(40,30,10,.55)}}
:root[data-theme="dark"] .etq{box-shadow:0 8px 18px -12px #000}

/* barra del sol */
.hora{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:8;display:flex;align-items:center;gap:12px;padding:9px 16px;border-radius:999px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px);box-shadow:0 10px 28px -14px rgba(0,0,0,.5);width:min(520px,calc(100% - 250px))}
.hora svg{width:22px;height:22px;flex:none;color:#f0a21a} .hora svg.lu{color:#8fa0d8}
.hora input{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:14px;border-radius:999px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,#8fd0f0 0%,#fbe3a0 25%,#ff9a5c 50%,#4a3f8f 72%,#0b1030 100%);box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}
.hora input::-webkit-slider-thumb{-webkit-appearance:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--thumb) center/contain no-repeat;filter:drop-shadow(0 2px 5px rgba(0,0,0,.45));cursor:grab}
.hora input::-moz-range-thumb{width:36px;height:36px;border-radius:50%;border:0;background:var(--thumb) center/contain no-repeat;cursor:grab}
.hora button{flex:none;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 12px;font-size:.78rem;font-weight:500;white-space:nowrap}
.hora button:hover{border-color:var(--gold);color:var(--gold)}
.ayuda{bottom:76px}
#ruta button,.leyenda,.zoom button{backdrop-filter:blur(6px)}
@media (max-width:820px){
  .hora{width:calc(100% - 24px);bottom:10px;padding:7px 12px;gap:8px}
  .hora button span{display:none}
  .zoom{bottom:74px!important}
}
@media (orientation:landscape) and (max-height:520px){
  .hora{bottom:8px;padding:5px 12px;width:min(420px,calc(100% - 200px))}
  .hora input{height:10px}.hora svg{width:18px;height:18px}
  .zoom{bottom:62px!important;flex-direction:column!important}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* follaje en racimos (en lugar de hojas sueltas) */
.puf{transform-box:fill-box;transform-origin:center;animation:brisa var(--dur,4s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);stroke:rgba(15,50,20,.16);stroke-width:2}
.puf.p1{fill:var(--hoja1)} .puf.p2{fill:var(--hoja2)} .puf.p3{fill:var(--hoja3)}
@keyframes brisa{from{transform:translate(calc(var(--v) * -.32px),0) scale(.97)}to{transform:translate(calc(var(--v) * .32px),calc(var(--v) * -.09px)) scale(1.03)}}
.nodo.raiz{cursor:pointer}
.nodo.raiz .manzana{top:-30px}
/* móvil: barra siempre alcanzable */
body.frondoso{height:100dvh}
.hora{touch-action:none;bottom:calc(14px + env(safe-area-inset-bottom))}
.hora input{touch-action:none}

/* el suelo es sólido y no deja ver el fondo por debajo */
#lineas #suelo path{opacity:1}
#lineas #suelo .mont{fill:var(--c1);stroke:none}

/* árbol fijo: sin zoom ni arrastre en pantallas grandes */


/* versión compacta: tarjetas más chicas y todo más junto */
.nodo{width:128px}
.medalla{width:62px;height:62px}
.medalla b{font-size:1.25rem}
.etq{margin-top:7px;padding:5px 6px 6px;border-radius:12px}
.tag{height:12px;font-size:.55rem}
.etq .nm{font-size:.74rem;line-height:14px;height:28px}
.etq .yr{font-size:.65rem;height:14px;margin-top:1px}
.pls{margin-top:5px}
.pl{height:19px;font-size:.64rem;padding:0 5px}
.mini{width:28px;height:28px;font-size:.62rem;right:-11px;bottom:-4px}
.mini:nth-of-type(2){left:-11px}
.manzana{top:-17px;width:26px;height:26px;margin-left:-13px;font-size:.7rem}
.nodo.raiz{width:330px;gap:10px}
.nodo.raiz .ab{width:150px}
.nodo.raiz .medalla{width:76px;height:76px}
.nodo.raiz .medalla b{font-size:1.5rem}
.nodo.raiz .manzana{top:-26px}