/* OJAI · Más vida. Funciona sobre fondos claros y oscuros: usa el color de texto de cada pantalla. */

/* Compañero Ojai flotante */
.vida-mate{position:fixed;right:18px;bottom:84px;z-index:var(--o-capa-mate);display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.vida-mate[hidden]{display:none}
.vida-mate>*{pointer-events:auto}
.vida-mate-body{width:74px;height:74px;padding:0;border:0;background:radial-gradient(circle at 50% 70%,color-mix(in srgb,var(--emo,var(--o-emo-amor)) 45%,transparent),transparent 68%);cursor:pointer;border-radius:50%}
.vida-mate-body img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 10px #0005);animation:mate-float 5s ease-in-out infinite;transform-origin:50% 90%}
.vida-mate-body img.hop{animation:mate-hop .8s cubic-bezier(.3,1.5,.5,1) 1,mate-float 5s ease-in-out .8s infinite}
.vida-mate-bubble{position:relative;max-width:260px;padding:14px 34px 12px 16px;border-radius:20px 20px 4px 20px;background:var(--o-crema);color:var(--o-ciruela-tierra);box-shadow:0 14px 34px #0004;border-top:4px solid var(--emo,var(--o-emo-amor));animation:mate-in .35s ease}
.vida-mate-bubble[hidden]{display:none}
.vida-mate-bubble p{margin:0 0 8px;font-family:var(--o-letra-alma);font-size:15px;line-height:1.4}
.vida-mate-close{position:absolute;top:6px;right:8px;border:0;background:none;font-size:20px;color:var(--o-i-lila-45);cursor:pointer}
body[data-view=home] .vida-mate{bottom:84px}
@keyframes mate-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes mate-hop{0%{transform:none}30%{transform:translateY(3px) scale(1.05,.94)}60%{transform:translateY(-16px) rotate(-5deg)}100%{transform:none}}
@keyframes mate-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}

/* Botón de mochila */
.bag-btn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:7px 14px;border-radius:30px;border:1px dashed currentColor;background:transparent;color:inherit;font-size:13px;font-weight:600;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s}
.bag-btn:hover{opacity:1}
.bag-btn[aria-pressed=true]{border-style:solid;background:#f6c7a833;opacity:1}
.bag-btn.pop{animation:bag-pop .6s cubic-bezier(.3,1.6,.5,1)}
.vida-mate-bubble .bag-btn{color:var(--o-lavanda);font-size:12px;min-height:30px;padding:4px 10px}
@keyframes bag-pop{40%{transform:scale(1.1) rotate(-3deg)}}

/* Frase de anclaje */
.anchor{margin:18px 0;padding:18px 20px;border-radius:20px;background:linear-gradient(120deg,#fff3dc,var(--o-i-durazno-91) 60%,var(--o-i-lila-92));color:var(--o-ciruela-tierra)}
.anchor-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--o-i-rosa-47);margin:0 0 6px;font-weight:700}
.anchor-text{font-family:var(--o-letra-alma);font-size:clamp(19px,2.2vw,24px);line-height:1.4;margin:0 0 10px}
.anchor .bag-btn{color:var(--o-lavanda)}

/* Micro-meditación */
.micro{text-align:center;padding:10px 0}
.micro-orb{position:relative;width:130px;height:130px;margin:6px auto 10px}
.micro-orb span,.micro-orb::before{content:"";position:absolute;inset:0;border-radius:50%}
.micro-orb span{background:radial-gradient(circle at 45% 40%,var(--o-crema),var(--emo,var(--o-durazno-vivo)) 70%);transform:scale(.7);opacity:.8;box-shadow:0 0 30px color-mix(in srgb,var(--emo,var(--o-durazno-vivo)) 50%,transparent)}
.micro-orb::before{border:1px solid color-mix(in srgb,var(--emo,var(--o-durazno-vivo)) 60%,transparent);transform:scale(.8);opacity:0}
.micro.on .micro-orb span,.micro-orb.on span{animation:micro-breathe 10s cubic-bezier(.37,0,.63,1) infinite}
.micro.on .micro-orb::before,.micro-orb.on::before{animation:micro-ring 10s cubic-bezier(.37,0,.63,1) infinite}
.micro-line{font-family:var(--o-letra-alma);font-size:20px;line-height:1.45;min-height:3em;max-width:460px;margin:0 auto;transition:opacity .4s,filter .4s}
.micro-line.fading{opacity:0;filter:blur(3px)}
.micro-bar{height:4px;max-width:320px;margin:12px auto;border-radius:4px;background:#0001;overflow:hidden}
.micro-bar i{display:block;height:100%;width:0;background:var(--emo,var(--o-coral))}
.micro-actions{justify-content:center}
.micro-voice{font-size:13px;display:flex;align-items:center;gap:6px}
.micro-voice input{width:18px;min-height:18px}
@keyframes micro-breathe{0%,100%{transform:scale(.7);opacity:.7}40%{transform:scale(1);opacity:1}}
@keyframes micro-ring{0%,100%{transform:scale(.8);opacity:0}40%{transform:scale(1.35);opacity:.8}70%{opacity:.2}}

/* Ritual de cierre y despedida */
.vida-ritual{width:min(520px,92vw);border:0;border-radius:34px;padding:38px 28px 30px;text-align:center;color:var(--o-blanco);background:linear-gradient(180deg,var(--o-ciruela),var(--o-rosa) 60%,var(--o-durazno))}
.vida-ritual::backdrop{background:#120b16cc;backdrop-filter:blur(8px)}
.vida-ritual h2{font-size:clamp(30px,5vw,42px);margin:6px 0 10px;color:var(--o-blanco)}
.vida-ritual .daily-kicker{color:var(--o-arena)}
.vida-ritual .micro-orb{--emo:var(--o-halo-calido);width:110px;height:110px}
.ritual-step{font-size:14px;opacity:.85}
.ritual-phrase{font-family:var(--o-letra-alma);font-size:22px;line-height:1.4;margin:12px 0}
.ritual-q{font-family:var(--o-letra-alma);font-size:17px;opacity:.9}
.vida-ritual .bag-btn{color:var(--o-blanco)}
.vida-ritual .emo-btn{background:var(--o-blanco);color:var(--o-ciruela-noche);border-color:var(--o-blanco);min-height:40px;padding:8px 18px;border-radius:30px;font-weight:600;cursor:pointer}
.vida-ritual .emo-btn.ghost{background:transparent;color:var(--o-blanco)}
.farewell-ojai{width:150px;margin:10px auto;display:block;animation:mate-float 5s ease-in-out infinite}

/* Mapa de patrones */
.pmap-wrap{margin:40px 0 20px}
.pmap-scroll{overflow-x:auto;border-radius:24px;background:#ffffff0d;border:1px solid #ffffff1f;padding:10px}
.pmap{min-width:720px;width:100%;height:auto;display:block}
.pmap .ph{fill:currentColor;font-size:13px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.pmap .pl{fill:none;opacity:.45;transition:opacity .3s}
.pmap.focus .pl{opacity:.08}
.pmap.focus .pl.on{opacity:.9}
.pmap .pn{cursor:pointer}
.pmap .pn rect{stroke:#fff6;stroke-width:1;transition:transform .3s}
.pmap .pn text{font-size:13px;fill:var(--o-ciruela-noche);font-weight:600;pointer-events:none}
.pmap .pn.on rect{stroke:var(--o-blanco);stroke-width:3}
.pmap .pn:focus{outline:none}
.pmap .pn:focus rect{stroke:#f9cb71;stroke-width:3}
.pmap-sug{margin:18px 0;padding:18px 20px;border-left:3px solid var(--accent,#f29e87);background:#ffffff0a;border-radius:0 18px 18px 0}
.pmap-sug p{margin:4px 0 10px}
.pmap-empty{margin:30px 0;padding:24px;border:1px dashed #ffffff40;border-radius:22px}
.closing-q{font-family:var(--o-letra-alma);font-size:clamp(22px,2.6vw,30px);line-height:1.3;margin:26px 0;padding-left:18px;border-left:3px solid var(--accent,#f29e87)}

/* Historias con decisiones */
.story-choice{margin:24px 0;padding:20px;border-radius:22px;background:#ffffff0d;border:1px solid #ffffff22}
.choice-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.choice-btn{border:1px solid currentColor;border-radius:30px;padding:10px 16px;font-size:14px;background:transparent;color:inherit;cursor:pointer;transition:background .2s,color .2s}
.choice-btn[aria-pressed=true]{background:var(--paper,var(--o-i-durazno-91));color:var(--dark,#213c38);border-color:transparent}
.choice-answer{font-family:var(--o-letra-alma);font-size:19px;line-height:1.45;min-height:1.5em;margin:10px 0 0}

/* Reto Ojai semanal (Santuario) */
.san-weekly{background:linear-gradient(180deg,var(--o-i-durazno-91),var(--o-niebla));color:var(--o-ciruela-tierra)}
.weekly-card{max-width:980px;margin:auto;display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:center;padding:30px;border-radius:30px;background:var(--o-crema-luz);border:1px solid var(--o-i-durazno-91);border-top:6px solid var(--emo)}
.weekly-ojai{width:170px;filter:drop-shadow(0 14px 14px #4a2f5a33);animation:mate-float 6s ease-in-out infinite}
.weekly-card h2{font-family:var(--o-letra-alma);font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-.01em;margin:8px 0 14px}
.weekly-card .daily-kicker{color:var(--o-i-rosa-47)}
.weekly-state{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.weekly-state button{border:1px solid #d9b8ab;background:var(--o-blanco);color:var(--o-ciruela-tierra);border-radius:30px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer}
.weekly-state button[aria-pressed=true]{background:var(--o-coral);border-color:var(--o-coral);color:var(--o-blanco)}
.weekly-label{font-size:13px;font-weight:700;color:var(--o-i-lila-39b)}
.weekly-card textarea{background:var(--o-blanco);min-height:90px;border-color:#e5d3cb;color:var(--o-ciruela-tierra)}
.weekly-msg{font-size:13px;color:var(--o-i-rosa-47);min-height:1.2em;margin:6px 0 0}
.weekly-past{margin-top:12px;font-size:14px}
.weekly-past summary{cursor:pointer;color:var(--o-lavanda-suave)}
.weekly-past div{padding:10px 0;border-bottom:1px solid #eee}
.weekly-past p{margin:4px 0}
.weekly-ref{font-family:var(--o-letra-alma);color:var(--o-i-lila-39b)}

/* Mochila (Santuario) */
.san-bag{background:radial-gradient(ellipse at 50% 0%,#5a3e6a,var(--o-i-lila-10) 70%)}
.bag-wrap{max-width:900px;margin:auto}
.bag-empty{text-align:center;opacity:.8;font-family:var(--o-letra-alma);font-size:18px}
.bag-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.bag-list li{position:relative;padding:18px 36px 14px 18px;border-radius:20px;background:var(--o-crema);color:var(--o-ciruela-tierra);box-shadow:0 10px 24px #0003;animation:mate-in .4s ease}
.bag-list p{font-family:var(--o-letra-alma);font-size:17px;line-height:1.4;margin:0 0 8px}
.bag-list small{font-size:11px;color:var(--o-i-lila-50)}
.bag-remove{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;color:var(--o-i-lila-50);cursor:pointer}

@media(max-width:860px){
 .vida-mate{right:12px;bottom:72px}
 .vida-mate-body{width:58px;height:58px}
 .vida-mate-bubble{max-width:220px}
 .weekly-card{grid-template-columns:1fr;text-align:center;padding:22px}
 .weekly-ojai{width:120px;margin:auto}
 .weekly-state{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.vida-mate-body img,.weekly-ojai,.farewell-ojai,.micro-orb span,.micro-orb::before{animation:none!important}}
body[data-ojai-motion=off] .vida-mate-body img{animation:none!important}
.vida-ritual .emo-tip{color:var(--o-blanco);opacity:.8}

/* Orbe de la micro-meditación: mismo lenguaje traslúcido que la respiración de cada emoción */
.micro-orb span{background:radial-gradient(circle at 34% 28%,#ffffffe0 0%,#ffffff66 26%,color-mix(in srgb,var(--emo,var(--o-durazno-vivo)) 18%,#ffffff26) 62%,color-mix(in srgb,var(--emo,var(--o-durazno-vivo)) 30%,transparent) 100%);border:1px solid #ffffff8c;box-shadow:inset 0 0 24px #ffffff80,0 12px 34px color-mix(in srgb,var(--emo,var(--o-durazno-vivo)) 22%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:.95}
.micro-orb::before{border:1px solid #ffffffa6;filter:blur(.3px)}
.micro-orb::after{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background:radial-gradient(circle,color-mix(in srgb,var(--emo,var(--o-durazno-vivo)) 32%,transparent) 0%,transparent 66%);filter:blur(14px);opacity:.8}
.micro-orb{isolation:isolate}
@media (max-width:767px){.vida-mate{bottom:140px}.vida-mate-bubble{max-width:min(260px,calc(100vw - 32px))}}
