/* ===== Lámpara 365 · módulos premium (ritual, logros, perfil, compartir) ===== */ /* ---- Temas de color (clase en ) ---- */ html.tema-pergamino{--bg:#F6EEE1;--card:#FFFBF3;--ink:#2F261D;--muted:#65574A;--line:#E4D3BA;--accent:#8C5A2B;--accent-deep:#6E4520;--accent-ink:#FFFFFF;--soft:#F1E3CC;--gold:#B98D4F;--gold-ink:#6B4E1F} html.tema-salvia{--bg:#F3F5EF;--card:#FCFDF9;--ink:#232A24;--muted:#56625A;--line:#D9E1D2;--accent:#4F7457;--accent-deep:#3B5B42;--accent-ink:#FFFFFF;--soft:#E3ECDF;--gold:#BF9A63;--gold-ink:#6B5424} html.tema-noche{--bg:#15131B;--card:#201D29;--ink:#F2EDF4;--muted:#BEB5C9;--line:#352F45;--accent:#DBA8BE;--accent-deep:#EEC6D6;--accent-ink:#241522;--soft:#2E2639;--ok:#8CCFA9;--ok-soft:#21342A;--gold:#D8B67F;--gold-ink:#E2C18C;--shadow:none;color-scheme:dark} @media (prefers-color-scheme: dark){ html.tema-pergamino{--bg:#1C1812;--card:#28221A;--ink:#F3EADC;--muted:#C8B8A2;--line:#3D3326;--accent:#DDB27A;--accent-deep:#EBC794;--accent-ink:#2A1C0C;--soft:#3A2E1F;--gold:#D8B67F;--gold-ink:#E2C18C;--shadow:none} html.tema-salvia{--bg:#161B17;--card:#212822;--ink:#EBF1EA;--muted:#B5C2B6;--line:#334036;--accent:#9CC7A4;--accent-deep:#B5D9BB;--accent-ink:#13241A;--soft:#26352A;--gold:#D8B67F;--gold-ink:#E2C18C;--shadow:none} } html.tema-noche body{background:var(--bg) var(--grain)} /* ---- Tamaño de letra: escala toda la interfaz ---- */ html.letra-grande body{zoom:1.1} html.letra-muy-grande body{zoom:1.22} /* ---- Diálogos (hojas) ---- */ html:has(dialog[open]){overflow:hidden} dialog.l365{border:0;padding:0;color:var(--ink);background:var(--card);max-width:520px;width:100%; max-height:92vh;max-height:92dvh;overflow:auto;overscroll-behavior:contain;margin:auto auto 0;border-radius:26px 26px 0 0; box-shadow:0 -10px 40px rgba(20,10,14,.25);border-top:1px solid var(--gold)} dialog.l365::backdrop{background:rgba(29,20,24,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} @media (min-width:560px){dialog.l365{margin:auto;border-radius:26px;border:1px solid var(--gold)}} .hoja-cab{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px; padding:16px 16px 10px 20px;background:var(--card)} .hoja-cab h2{font-size:26px;line-height:1.15;margin:0} .hoja-cuerpo{padding:4px 20px calc(22px + env(safe-area-inset-bottom))} .icon-btn{flex:none;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink); display:grid;place-items:center;cursor:pointer;padding:0} .icon-btn svg{width:22px;height:22px} .icon-btn:focus-visible,.opcion:focus-within,.badge-btn:focus-visible,.seg label:focus-within{outline:2px solid var(--gold);outline-offset:3px} header.top .icon-btn{align-self:center} header.top{align-items:center} header.top .derecha{display:flex;align-items:center;gap:10px} /* ---- Hoy: botones extra ---- */ .btn .ic-lampara{display:inline-block;width:20px;height:20px;vertical-align:-4px;margin-right:8px} .fila-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px} .fila-acciones .btn{flex:1 1 140px;margin-top:0} .btn.gold{background:linear-gradient(135deg,#E3C38C,#C9A06A 55%,#A87E45);color:#2B1D0C;box-shadow:0 8px 22px -10px rgba(168,126,69,.8)} /* ---- El plan de {nombre} ---- */ .plan-intencion{border-color:var(--gold);background:linear-gradient(160deg,var(--soft),var(--card) 70%)} .plan-intencion .frase{font-family:var(--serif);font-style:italic;font-size:19.5px;line-height:1.35;margin:6px 0 6px;font-weight:500} .plan-intencion .ref{color:var(--accent-deep);font-weight:500;font-size:14.5px;margin:0} .plan-intencion .meta{font-size:13.5px;margin:8px 0 0} /* ---- Modo Lámpara (ritual) ---- */ dialog.ritual{max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;border:0;border-radius:0;padding:0; background:radial-gradient(120% 70% at 50% 30%,#3A2A24 0%,#1E1618 55%,#140F11 100%);color:#F6EDE6;overflow:auto} dialog.ritual::backdrop{background:#140F11} .ritual-in{min-height:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center; padding:calc(14px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom))} .ritual-top{width:100%;display:flex;justify-content:space-between;align-items:center} .ritual-top .eyebrow{color:#E2C18C;margin:0} dialog.ritual .icon-btn{background:transparent;border-color:rgba(226,193,140,.45);color:#F6EDE6} .ritual-lampara{width:min(62vw,240px);height:auto;margin:18px 0 6px;overflow:visible} .ritual-lampara .halo{transition:opacity 1.2s linear} .ritual-lampara .llama-in{animation:parpadeo 2.4s ease-in-out infinite alternate;transform-origin:100px 124px} @keyframes parpadeo{0%{transform:scale(1,1) skewX(0)}35%{transform:scale(.97,1.04) skewX(1.5deg)}70%{transform:scale(1.02,.97) skewX(-1.2deg)}100%{transform:scale(.99,1.03) skewX(.6deg)}} .ritual-lee{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:#E2C18C;margin:8px 0 4px} .ritual-lectura{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1.15;margin:0 0 6px} .ritual-sub{color:#D9C7C0;margin:0 0 4px;font-size:15px} .ritual-tiempo{font-family:var(--serif);font-size:54px;font-weight:500;letter-spacing:.02em;margin:14px 0 0;font-variant-numeric:tabular-nums lining-nums} .ritual-msg{color:#E9DCD5;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.35;margin:6px 0 0;min-height:2.7em;max-width:24em} .ritual-barra{width:100%;max-width:320px;height:4px;border-radius:9px;background:rgba(226,193,140,.18);overflow:hidden;margin:14px auto 0} .ritual-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,#C9A06A,#F3DDB0);transition:width 1s linear} .ritual-acciones{width:100%;max-width:360px;margin-top:auto;padding-top:22px} .ritual-acciones .btn.ghost{color:#F3DDB0;border-color:rgba(226,193,140,.6)} .ritual-acciones .btn:not(.ghost){background:linear-gradient(135deg,#E8C993,#C9A06A 60%,#A87E45);color:#2B1D0C;box-shadow:0 10px 30px -10px rgba(201,160,106,.7)} .ritual-acciones .btn:focus-visible,dialog.ritual .icon-btn:focus-visible{outline:2px solid #F3DDB0;outline-offset:3px} .ritual.listo .ritual-acciones .btn:not(.ghost){animation:latido 1.8s ease-in-out infinite} @keyframes latido{0%,100%{box-shadow:0 10px 30px -10px rgba(201,160,106,.7)}50%{box-shadow:0 0 0 8px rgba(201,160,106,.18),0 10px 30px -10px rgba(201,160,106,.9)}} /* ---- Celebración ---- */ dialog.celebra{max-width:none;max-height:none;width:100%;height:100%;height:100dvh;margin:0;padding:16px;border:0;border-radius:0; background:transparent;box-shadow:none;overflow:auto;place-items:center} dialog.celebra[open]{display:grid} dialog.celebra::backdrop{background:rgba(29,20,24,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .celebra-card{position:relative;z-index:1;max-width:420px;width:100%;border-radius:28px;border:1px solid var(--gold);text-align:center; background:radial-gradient(120% 70% at 50% 0%,var(--soft),var(--card) 60%);box-shadow:0 30px 60px -20px rgba(20,10,14,.5);animation:aparece .5s cubic-bezier(.2,.9,.3,1.2)} @keyframes aparece{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}} .celebra-in{padding:26px 22px 22px;position:relative;overflow:hidden;border-radius:28px} .celebra .sol{width:92px;height:92px;margin:0 auto 4px;display:block} .celebra h2{font-size:38px;line-height:1.08;margin:6px 0 6px} .celebra .sub{font-size:16.5px;margin:0 0 4px} .celebra .chip{display:inline-block;margin:10px 4px 0;padding:6px 14px;border-radius:99px;background:var(--card);border:1px solid var(--gold); color:var(--accent-deep);font-weight:600;font-size:14.5px} .celebra .medallas{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)} .celebra .medalla-fila{display:flex;align-items:center;gap:12px;text-align:left;margin:8px 0} .celebra .medalla-fila svg{width:58px;height:58px;flex:none} .celebra .medalla-fila b{display:block;font-family:var(--serif);font-size:21px;line-height:1.1} .celebra .medalla-fila span{display:block;font-size:13.5px;line-height:1.35;color:var(--muted);margin-top:2px} .lluvia{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0} .lluvia i{position:absolute;top:-6vh;display:block;will-change:transform,opacity;animation:caer var(--d,4s) cubic-bezier(.3,.1,.5,1) var(--r,0s) forwards;opacity:0} .lluvia i.petalo{width:12px;height:16px;border-radius:80% 0 80% 0;background:linear-gradient(135deg,#F4C6D0,#D9788E)} .lluvia i.destello{width:14px;height:14px;background:radial-gradient(circle,#FFF6DA 0 18%,#E3C38C 30%,transparent 62%); clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)} @keyframes caer{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--x,20px),112vh) rotate(var(--g,360deg))}} .brillo{position:absolute;left:50%;top:40px;width:200px;height:200px;margin-left:-100px;border-radius:50%;pointer-events:none; background:radial-gradient(circle,rgba(227,195,140,.55),transparent 65%);animation:respira 2.6s ease-in-out infinite alternate;z-index:0} .celebra-in > *{position:relative;z-index:1} .celebra-in > .brillo{position:absolute;z-index:0} @keyframes respira{from{transform:scale(.85);opacity:.7}to{transform:scale(1.1);opacity:1}} /* ---- Logros ---- */ .logros-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 8px;margin-top:6px} .badge-btn{background:none;border:0;padding:10px 2px 8px;border-radius:16px;cursor:pointer;color:inherit;font:inherit;text-align:center} .badge-btn svg{width:70px;height:70px;display:block;margin:0 auto 6px} .badge-btn b{display:block;font-size:13px;line-height:1.2;font-weight:600} .badge-btn span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.25} .badge-btn.bloq b{color:var(--muted);font-weight:500} .logros-cab{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .logros-cab h2{font-size:26px;margin:0} .cert-mini{display:flex;gap:14px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)} .cert-mini img{width:108px;height:auto;border-radius:6px;border:1px solid var(--gold);flex:none} .cert-mini p{margin:0;font-size:14.5px} .detalle-logro{text-align:center} .detalle-logro svg.grande{width:150px;height:150px;display:block;margin:4px auto 8px} .detalle-logro h3{font-size:30px;margin:4px 0 4px} /* ---- Vista de compartir / certificado ---- */ .vista-img{display:block;margin:6px auto 0;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);max-width:100%;height:auto} .vista-img.story{max-height:56vh;max-height:56dvh;width:auto;aspect-ratio:1080/1920} .vista-img.cert{width:100%;aspect-ratio:1600/1131;border-radius:6px;border-color:var(--gold)} .texto-compartir{font-size:14.5px;background:var(--bg);border:1px dashed var(--line);border-radius:14px;padding:10px 12px;margin:14px 0 0} .tabs-cert{display:flex;gap:6px;background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:4px;margin:4px 0 12px} .tabs-cert button{flex:1;border:0;background:none;color:var(--muted);font:600 13.5px var(--sans);border-radius:99px;padding:9px 4px;cursor:pointer;min-height:40px} .tabs-cert button[aria-pressed="true"]{background:var(--card);color:var(--accent-deep);box-shadow:var(--shadow);outline:1px solid var(--gold)} /* ---- Cuestionario y ajustes ---- */ .pasos{display:flex;gap:6px;justify-content:center;margin:0 0 6px} .pasos i{width:26px;height:4px;border-radius:9px;background:var(--line)} .pasos i.on{background:var(--accent)} .preg{font-size:30px;line-height:1.12;margin:6px 0 4px} .opciones{display:grid;gap:10px;margin:14px 0 0} .opciones.dos{grid-template-columns:1fr 1fr} .opcion{position:relative;display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:16px;padding:13px 14px;margin:0;cursor:pointer;background:var(--bg);font-weight:500;min-height:54px} .opcion input{position:absolute;opacity:0;width:1px;height:1px} .opcion .emo{font-size:22px;line-height:1;flex:none} .opcion small{display:block;color:var(--muted);font-weight:400;font-size:13px} .opcion:has(input:checked){border-color:var(--accent);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent)} .muestras{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px} .muestra{display:block;margin:0;cursor:pointer;text-align:center;font-size:12.5px;font-weight:500;border-radius:16px;padding:8px 2px;border:1px solid var(--line);position:relative} .muestra input{position:absolute;opacity:0;width:1px;height:1px} .muestra i{display:block;width:40px;height:40px;border-radius:50%;margin:0 auto 6px;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)} .muestra:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .muestra:focus-within{outline:2px solid var(--gold);outline-offset:2px} .seg{display:flex;border:1px solid var(--line);border-radius:99px;padding:4px;gap:4px;margin-top:8px;background:var(--bg)} .seg label{flex:1;margin:0;text-align:center;border-radius:99px;padding:9px 4px;cursor:pointer;font-weight:500;position:relative;min-height:42px;display:grid;place-items:center} .seg label input{position:absolute;opacity:0;width:1px;height:1px} .seg label:has(input:checked){background:var(--card);color:var(--accent-deep);font-weight:700;outline:1px solid var(--gold)} .seg label{white-space:nowrap}.seg label:nth-child(1){font-size:14px}.seg label:nth-child(2){font-size:15.5px}.seg label:nth-child(3){font-size:16.5px} input[type=time]{width:100%;border:1px solid var(--line);border-radius:14px;padding:12px 14px;font:inherit;font-size:16px;background:var(--bg);color:var(--ink);min-height:50px} .quiz-nav{display:flex;gap:10px;margin-top:20px} .quiz-nav .btn{margin-top:0} .quiz-nav .btn.ghost{flex:0 0 38%} .ajuste{padding:14px 0;border-bottom:1px solid var(--line)} .ajuste:last-child{border-bottom:0} .ajuste > p.eyebrow{margin-bottom:2px} @media (prefers-reduced-motion: reduce){ .ritual-lampara .llama-in,.brillo,.ritual.listo .ritual-acciones .btn:not(.ghost){animation:none} .celebra-card{animation:none} .ritual-lampara .halo,.ritual-barra i{transition:none} .lluvia{display:none} } /* ---- Accesibilidad: áreas táctiles de al menos 48px ---- */ a.btn{text-align:center;text-decoration:none} .btn.small{min-height:48px} .btn{min-height:48px} .check{position:relative} .check::after{content:"";position:absolute;inset:-9px;border-radius:50%} .list .linkbtn{min-height:44px;padding:0 6px} .linkbtn{min-height:32px} header.top h1{min-width:0;overflow-wrap:anywhere} .icon-btn.aa{display:flex;align-items:baseline;justify-content:center;gap:1px;font:600 24px/1 var(--serif);padding-top:2px} .instalar-uno{margin-top:10px} .toast{width:max-content;max-width:calc(100vw - 32px);text-align:center}