:root{--fondo:#1C1622;--crema:#F4ECDC;--lila:#C9B6E4;--oxido:#D99A6C;--salvia:#A9C1A0;--texto:#E2DCCF;--suave:#CFC6D8;--tenue:#A99DB4;--apagado:#8E8299;
--tarjeta:#2A2232;--tarjeta2:#241C2B;--borde:#4A3E57;--linea:#33293D;--chip:#352B3F;--titulos:'Cormorant Garamond',Georgia,serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--fondo)}
body{color:var(--texto);font:16px/1.5 'Lora',Georgia,serif;-webkit-text-size-adjust:100%}
a{color:var(--lila);text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,p{margin:0}
#app{max-width:480px;min-height:100dvh;margin:auto;display:flex;flex-direction:column}
.pantalla{flex:1;padding:calc(env(safe-area-inset-top) + 48px) 22px 20px;display:flex;flex-direction:column;gap:18px}
.detalle{padding-top:calc(env(safe-area-inset-top) + 28px)}
.fecha{font-size:13px;color:var(--tenue);letter-spacing:.08em;text-transform:uppercase}
.h-grande{font:600 40px/1 var(--titulos);color:var(--crema)}
.h-area{font:600 44px/1 var(--titulos);color:var(--crema)}
.encabezado{display:flex;flex-direction:column;gap:4px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}
.rotulo{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--lila);letter-spacing:.06em;text-transform:uppercase}
.h-transito{font:600 28px/1.1 var(--titulos);color:var(--crema)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--chip);color:#DDD4E4}
.caja-luna{background:var(--tarjeta2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;color:var(--crema)}
.caja-luna small{font-size:12px;color:var(--tenue)}
.caja-luna b{font-size:15px;font-weight:400}
.caja-luna span{font-size:13px;line-height:1.35;color:var(--suave)}
.fila{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--tarjeta);color:var(--crema);min-height:44px}
.fila .t{display:flex;flex-direction:column;gap:1px}
.fila b{font:600 19px var(--titulos)}
.fila small{font-size:13px;color:var(--suave)}
.fila.mes{background:var(--tarjeta2);padding:16px 18px;border-radius:16px}
.fila.mes b{font-size:20px}
.fila.ritual{background:none;border:1px solid #5A3E30;font-size:14px}
.nav{position:sticky;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:8px 8px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--linea);background:var(--fondo)}
.nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;font-size:11px;color:var(--apagado)}
.nav a.activa{color:var(--crema)}
.volver{display:flex;align-items:center;gap:4px;font-size:15px;min-height:44px;width:fit-content;color:var(--lila)}
.luna-cab{display:flex;gap:14px;align-items:center}
.luna-cab h1{font:600 32px/1.05 var(--titulos);color:var(--crema)}
.luna-cab small{font-size:12px;color:var(--tenue);letter-spacing:.08em;text-transform:uppercase}
.luna-cab div div{font-size:14px;color:var(--lila)}
.diario{border-radius:18px;padding:16px}
.pregunta{font:italic 500 21px/1.3 var(--titulos);color:var(--crema)}
.etiqueta{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--suave)}
.anterior p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
select.campo{appearance:auto;padding:0 10px}
textarea,.campo{width:100%;border-radius:12px;border:1px solid var(--borde);background:var(--tarjeta2);color:var(--crema);font:inherit;font-size:16px}
textarea{background:var(--fondo);padding:12px;line-height:1.5;resize:none}
.campo{height:48px;padding:0 14px}
.campo:disabled{color:var(--apagado)}
.pie{display:flex;justify-content:space-between;align-items:center;gap:12px}
.privado{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tenue)}
.btn{height:44px;padding:0 20px;border:0;border-radius:12px;font-size:15px;font-weight:500;background:var(--lila);color:var(--fondo)}
.btn:disabled{background:var(--chip);color:var(--apagado);cursor:default}
.btn.hecho{background:var(--chip);color:var(--lila)}
.cta{width:100%;height:54px;border:0;border-radius:16px;font-size:16px;font-weight:500;background:var(--lila);color:var(--fondo)}
.cta:disabled{background:#3B3145;color:var(--apagado);cursor:default}
.nota{font-size:13px;line-height:1.45;color:var(--suave);background:var(--tarjeta);border-radius:12px;padding:10px 12px}
.aviso-clave{color:var(--oxido);font-size:13px;line-height:1.45}
.error{color:var(--oxido);font-size:13px}
.anterior{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:16px;background:var(--tarjeta2)}
.anterior small{font-size:12px;color:var(--tenue)}
.anterior p{font-size:14px;line-height:1.45;color:var(--suave);font-style:italic;white-space:pre-wrap}
.calendario{background:var(--tarjeta2);border-radius:18px;padding:12px 12px 10px;display:flex;flex-direction:column;gap:6px}
.sem,.dias{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.sem{text-align:center;font-size:11px;color:var(--tenue)}
.dias{row-gap:2px}
.dia{height:38px;border:0;border-radius:10px;background:none;font-size:13px;color:var(--texto);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0}
.dia i{width:4px;height:4px;border-radius:50%;background:transparent}
.dia.sel{background:var(--lila);color:var(--fondo);font-weight:500}
.sel-dia{border-top:1px solid var(--linea);padding-top:8px;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.4;color:var(--suave)}
.sel-dia b{font-weight:500;color:var(--crema)}
.lista{display:flex;flex-direction:column;gap:8px}
.frase{font:italic 500 22px/1.3 var(--titulos);color:var(--crema)}
.h-seccion{font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--lila)}
.fecha-clave{display:flex;gap:14px;align-items:baseline;padding:12px 14px;border-radius:14px;background:var(--tarjeta2);font-size:14px;line-height:1.4}
.fecha-clave b{font:600 24px var(--titulos);color:var(--crema);min-width:32px}
.pendiente{color:var(--tenue);font-style:italic}
.seccion{display:flex;flex-direction:column;gap:8px}
.bloque{background:var(--tarjeta);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:14px}
.par{display:flex;justify-content:space-between;align-items:center;gap:12px}
.par span:first-child{color:var(--suave)}
.par span:last-child,.crema{color:var(--crema)}
.interruptor-fila{display:flex;justify-content:space-between;align-items:center;min-height:52px}
.interruptor-fila small{display:block;font-size:12px;color:var(--suave)}
.switch{flex:none;width:50px;height:30px;border:0;border-radius:15px;padding:3px;display:flex;justify-content:flex-start;background:#3B3145}
.switch i{width:24px;height:24px;border-radius:50%;background:var(--tenue)}
.switch[aria-checked=true]{background:var(--lila);justify-content:flex-end}
.switch[aria-checked=true] i{background:var(--fondo)}
.enlaces{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.enlace{background:none;border:0;padding:0;font-size:13px;color:var(--lila)}
.enlace.tenue{color:var(--tenue)}
.dos{display:flex;gap:8px}
.dos a{flex:1;min-height:40px;border-radius:10px;border:1px solid var(--borde);font-size:13px;display:flex;align-items:center;justify-content:center}
.onb{flex:1;padding:calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 28px);display:flex;flex-direction:column;gap:20px}
.onb-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.atras{width:44px;height:44px;border:0;background:none;padding:0;display:flex;align-items:center}
.puntos{display:flex;gap:6px}
.puntos span{height:6px;width:6px;border-radius:3px;background:#3B3145}
.puntos span.pasado{background:#8E7BA8}
.puntos span.actual{width:18px;background:var(--lila)}
.onb-cuerpo{flex:1;display:flex;flex-direction:column;gap:16px}
.onb-cuerpo h1{font:600 34px/1.1 var(--titulos);color:var(--crema)}
.onb-cuerpo>p{font-size:15px;color:var(--suave)}
.bienvenida{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px}
.bienvenida h1{font-size:44px;line-height:1.05}
.sello{display:block;width:190px;height:190px;max-width:60vw;max-height:60vw}
.bienvenida h1+.firma{margin-top:-14px;font:italic 500 22px var(--titulos);color:var(--oxido)}
.bienvenida .lema{font:italic 500 21px/1.35 var(--titulos);color:#DDD4E4}
.bienvenida .resumen{font-size:15px;color:var(--suave);max-width:300px}
.pestanas{display:flex;gap:8px;background:var(--tarjeta2);border-radius:12px;padding:4px}
.pestanas button{flex:1;min-width:0;padding:0 4px;font-size:13px;height:40px;border:0;border-radius:9px;background:none;font-size:14px;color:var(--suave)}
.pestanas button[aria-pressed=true]{background:var(--lila);color:var(--fondo)}
.pasos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.pasos li{display:flex;gap:14px;align-items:center;padding:14px;border-radius:14px;background:var(--tarjeta);font-size:15px;line-height:1.4;color:var(--crema)}
.pasos li span{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--lila);color:var(--lila);font-size:14px;display:flex;align-items:center;justify-content:center}
.pasos.texto li{display:block;color:var(--texto)}
.marca{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--texto);min-height:44px;cursor:pointer}
.marca input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--lila)}
.opcion{display:flex;align-items:center;gap:14px;width:100%;padding:16px;border-radius:16px;background:var(--tarjeta2);border:1.5px solid #3B3145;text-align:left}
.opcion[aria-pressed=true]{background:#2F2638;border-color:var(--lila)}
.opcion .t{display:flex;flex-direction:column;gap:2px;flex:1}
.opcion b{font-size:16px;font-weight:400;color:var(--crema)}
.opcion small{font-size:13px;color:var(--suave)}
.opcion .check{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #6B5E78}
.opcion[aria-pressed=true] .check{background:var(--lila);border:6px solid #2F2638;outline:1.5px solid var(--lila)}
.ahorro{font-size:12px;padding:4px 9px;border-radius:999px;background:var(--lila);color:var(--fondo)}
.demo{font-size:12px;color:var(--oxido);text-align:center;padding:6px 16px 0}