:root{
--terracota:#D85A30; --terracota-oscuro:#B34523; --durazno:#E89B7B; --durazno-suave:#FBE9DF;
--crema:#FBF9F6; --blanco:#FFFFFF; --cacao:#3B2A20; --cacao-suave:#7D6A5C;
--salvia:#7C9869; --salvia-suave:#E4EDDD; --ambar:#E8A13C; --ambar-suave:#FBEFDA;
--lavanda:#6B4FA0; --lavanda-suave:#EFE9F8; --rojo:#C0392B; --rojo-suave:#FBE3DF;
--sombra:0 6px 24px rgba(92,46,26,.10);
/* MARCA (verde salvia) — color fijo del "cascarón": splash, login, nav, botones. NO lo pisan los temas. */
--marca:#3F7059; --marca-oscuro:#345E4A; --marca-claro:#E3F0E6; --marca-borde:#A9C79B;
--marca-menta:#E9F3EC; --marca-tenue:#D7E2CC; --marca-ambar:#E8A13C;
}
/* Temas: la pantalla de inicio usa salvia; cada ser querido tiene el suyo */
.tema-salvia{--terracota:#5F7F4E;--terracota-oscuro:#48633B;--durazno:#8FAE7C;--durazno-suave:#E2EAD8;--crema:#F7F5EC;--cacao:#333F2B;--cacao-suave:#6C7860;--ambar:#D88E28}
.tema-azul{--terracota:#2E6E75;--terracota-oscuro:#215257;--durazno:#6FA3A8;--durazno-suave:#D8E8E7;--crema:#F4F7F6;--cacao:#22383B;--cacao-suave:#5E7477;--ambar:#E07856}
.tema-lavanda{--terracota:#6B4FA0;--terracota-oscuro:#57408A;--durazno:#9C86C7;--durazno-suave:#E9E3F6;--crema:#F8F7FB;--cacao:#3A3151;--cacao-suave:#6F678A;--lavanda:#2E6E75;--lavanda-suave:#D8E8E7}
.tema-rosa{--terracota:#C0537E;--terracota-oscuro:#96395F;--durazno:#D98AA9;--durazno-suave:#F7DEE9;--crema:#FBF6F8;--cacao:#4B2338;--cacao-suave:#8A5B72;--ambar:#D88E28}
.selector-tema{display:flex;gap:12px;justify-content:center;margin:4px 0 14px}
.muestra{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:transform .15s ease;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.muestra.activa{border-color:var(--cacao);transform:scale(1.15)}
.puntito{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:1px}
.racha-hero{background:var(--terracota);border-radius:22px;color:#fff;padding:22px;text-align:center;margin-bottom:16px}
.racha-hero h2{font-size:42px}
.racha-hero p{font-size:14.5px;opacity:.95}
.medalla{background:var(--blanco);border-radius:18px;padding:14px 8px;text-align:center;box-shadow:var(--sombra)}
.medalla.bloqueada{opacity:.4;filter:grayscale(1)}
.medalla i{font-style:normal;font-size:28px;display:block;margin-bottom:5px}
.medalla b{font-size:12px;display:block;line-height:1.3}
#reporte-print{position:fixed;inset:0;background:#fff;z-index:100;overflow-y:auto}
body.modo-reporte .phone{display:none}
@media print{
body.modo-reporte{display:block;background:#fff}
#reporte-print{position:static;overflow:visible}
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:#EFE9E2;font-family:'Nunito',sans-serif;color:var(--cacao);min-height:100vh;display:flex;align-items:center;justify-content:center}
@keyframes selloGlifo{0%{transform:scale(2.1) rotate(-22deg);opacity:0}45%{transform:scale(.86) rotate(4deg);opacity:1}72%{transform:scale(1.06) rotate(-1deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes pulsoMenta{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hecha.recien .check::after,.hecha.recien.tarea{animation:none!important}}
h1,h2,h3,.brand{font-family:'Quicksand',sans-serif}
.phone{width:100%;max-width:414px;height:100vh;max-height:920px;background:var(--crema);position:relative;overflow:hidden;display:flex;flex-direction:column}
@media(min-width:500px){.phone{border-radius:36px;height:92vh;box-shadow:0 24px 80px rgba(92,46,26,.25)}}
.screen{flex:1;overflow-y:auto;padding:24px 20px 110px;display:none;animation:aparecer .35s ease}
.screen.activa{display:block}
@keyframes aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phone.grande .screen,.phone.grande #hoja{zoom:1.18}
/* Pantallas de bienvenida: cascarón verde salvia de marca */
.pantalla-auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;overflow-y:auto;background:var(--marca)}
.pantalla-auth .logo-grande{width:110px;height:110px;margin-bottom:18px}
.pantalla-auth h1{font-size:32px;color:#fff;font-weight:700;margin-bottom:6px}
.pantalla-auth .lema{font-size:16px;color:var(--marca-tenue);font-style:italic;margin-bottom:26px}
.pantalla-auth .campo label{color:#fff}
/* En el cascarón verde, el botón principal se invierte (blanco) para destacar */
.pantalla-auth .btn-primario{background:#fff;color:var(--marca);box-shadow:0 8px 24px rgba(0,0,0,.16)}
.form-auth{width:100%;max-width:320px;text-align:left}
.aviso{background:var(--ambar-suave);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:#7A5510;margin-top:14px}
.error{background:var(--rojo-suave);border-radius:14px;padding:12px 14px;font-size:13.5px;line-height:1.5;color:var(--rojo);margin-top:14px}
.enlace{background:none;border:none;color:#fff;font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;cursor:pointer;text-decoration:underline;margin-top:16px}
/* Logo camaleón: toma el color de donde vive. Por defecto, verde sobre crema. */
.logo-mini{display:flex;align-items:center;gap:8px;--logo-trazo:var(--marca);--logo-ojo:var(--marca)}
.logo-mini svg{width:34px;height:34px}
.logo-mini span{font-family:'Quicksand',sans-serif;font-weight:700;font-size:19px;color:var(--marca)}
/* ---------- INICIO: héroe verde de marca ---------- */
/* Va a sangre. El relleno lateral NO vive en la pantalla (ver #hoy) sino en .contenido:
así el héroe llega a los bordes sin márgenes negativos, que se descuadran con el zoom
del modo de letra grande. */
#hoy{padding:0 0 110px}
#hoy .contenido{padding:0 20px}
.hero-inicio{
background:var(--marca);
margin-bottom:18px;
padding:calc(24px + env(safe-area-inset-top)) 20px 22px;
border-radius:0 0 32px 32px;
position:relative;overflow:hidden;z-index:0;
}
/* Marca de agua del glifo, en blanco muy tenue: acento de esquina, nunca protagonista */
.hero-inicio::before{
content:"";position:absolute;right:-52px;top:-16px;width:190px;height:190px;z-index:-1;pointer-events:none;opacity:.13;
background:url("data:image/svg+xml,") no-repeat center/contain;
}
.hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
/* Sobre el verde, el logo se vuelve claro (los dos tonos de la marca) */
.hero-inicio .logo-mini{--logo-trazo:var(--marca-claro);--logo-ojo:var(--crema)}
.hero-inicio .logo-mini span{color:var(--crema)}
.hero-acciones{display:flex;gap:8px;align-items:center}
.btn-hero{width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s ease,transform .15s ease}
.btn-hero:active{transform:scale(.94)}
.btn-hero b{font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px}
/* La de emergencia se distingue: fondo blanco, cruz roja */
.btn-hero.emergencia{background:#fff;color:var(--rojo)}
/* --marca-claro (no --marca-tenue): pasa 4.5:1 de contraste sobre el verde */
.hero-fecha{font-size:12.5px;font-weight:700;color:var(--marca-claro);letter-spacing:.6px;text-transform:uppercase;margin-bottom:6px}
.hero-saludo{font-family:'Quicksand',sans-serif;font-size:28px;font-weight:700;color:#fff;line-height:1.2}
.hero-lema{font-size:14.5px;font-style:italic;color:var(--marca-claro);margin-top:6px}
.racha-familiar{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.25);border-radius:16px;padding:12px 15px;margin-top:18px;display:flex;align-items:center;gap:12px}
.racha-fuego{color:var(--marca-ambar);display:flex;flex-shrink:0}
.racha-txt{flex:1;min-width:0}
.racha-txt b{font-family:'Quicksand',sans-serif;font-size:15px;color:#fff;display:block}
.racha-txt p{margin-top:2px;font-size:12.5px;color:var(--marca-claro);line-height:1.35}
.racha-puntos{display:flex;gap:4px;flex-shrink:0}
.racha-puntos span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)}
.racha-puntos span.encendido{background:var(--marca-ambar)}
/* Tarjeta de ser querido: qué sigue de un vistazo */
.persona-txt{flex:1;min-width:0}
/* El chip "Sigue:" baja a su propio renglón: así se lee completo y no se corta */
.tarjeta-sq{flex-wrap:wrap;border-left:5px solid var(--terracota);cursor:pointer;transition:transform .15s ease}
.sigue-fila{flex-basis:100%;min-width:0}
.tarjeta-sq:active{transform:scale(.985)}
.tarjeta-sq.activa{box-shadow:var(--sombra),0 0 0 2px var(--marca-borde)}
.lista-sq{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.lista-sq .tarjeta{margin-bottom:0}
.sigue-chip{display:inline-block;max-width:100%;font-size:12.5px;font-weight:700;color:var(--terracota-oscuro);background:var(--durazno-suave);padding:5px 12px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
.sigue-chip.completo{color:var(--marca);background:var(--marca-menta)}
.sigue-chip.vacio{color:var(--cacao-suave);background:#F1EBE4}
.fila-familia{display:flex;justify-content:flex-end;margin:-4px 0 14px}
.fila-familia .sq-chip{display:inline-flex;align-items:center}
.racha{display:flex;align-items:center;gap:6px;background:var(--ambar-suave);border-radius:999px;padding:6px 12px;font-weight:700;font-size:14px;color:#9A6716}
.cabecera{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.saludo{font-size:24px;font-weight:700;line-height:1.25;margin-bottom:4px}
.subsaludo{color:var(--cacao-suave);font-size:15px;margin-bottom:20px}
.tarjeta{background:var(--blanco);border-radius:20px;padding:18px;box-shadow:var(--sombra);margin-bottom:16px}
.persona{display:flex;align-items:center;gap:14px}
.avatar{width:54px;height:54px;aspect-ratio:1;border-radius:50%;background:var(--durazno-suave);background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:19px;color:var(--terracota-oscuro);flex-shrink:0}
.persona h3{font-size:17px}
.persona p{font-size:13.5px;color:var(--cacao-suave)}
.anillo{margin-left:auto;position:relative;width:56px;height:56px;flex-shrink:0}
.anillo svg{transform:rotate(-90deg)}
.anillo b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Quicksand',sans-serif;font-weight:700;font-size:13px;color:var(--terracota)}
.titulo-seccion{font-size:17px;font-weight:700;margin:22px 0 12px;display:flex;align-items:center;gap:8px}
.leyenda{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.leyenda span{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px}
.tarea{display:flex;align-items:center;gap:13px;background:var(--blanco);border-radius:18px;padding:15px 16px;margin-bottom:10px;box-shadow:var(--sombra);cursor:pointer;transition:transform .15s ease;border-left:5px solid transparent}
.tarea:active{transform:scale(.98)}
.tarea.monitoreo{border-left-color:var(--lavanda);background:#FBF9FE}
.tarea.medicina{border-left-color:var(--terracota);background:#FDF6F2}
.check{width:28px;height:28px;border-radius:50%;border:2.5px solid var(--durazno);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s ease;position:relative}
.tarea.monitoreo .check{border-color:#B9A6DC}
/* Palomeado "Sello chalchihuitl": el glifo de jade se estampa y la tarjeta se tiñe menta */
.hecha .check{background:var(--marca)!important;border-color:var(--marca)!important}
.hecha .check::after{content:"";position:absolute;inset:3px;background:url("data:image/svg+xml,") no-repeat center/contain}
.hecha.recien .check::after{animation:selloGlifo .5s cubic-bezier(.34,1.56,.64,1) both}
.hecha.tarea{background:var(--marca-menta)!important}
.hecha.recien.tarea{animation:pulsoMenta .5s ease}
.hecha .textos h4{text-decoration:line-through;color:var(--cacao-suave)}
.tarea .textos{flex:1;min-width:0}
.tarea .textos h4{font-size:15.5px;font-weight:700}
.tarea .textos p{font-size:13px;color:var(--cacao-suave)}
.hora-pill{font-family:'Quicksand',sans-serif;font-size:12.5px;font-weight:700;color:var(--terracota);background:var(--durazno-suave);padding:5px 10px;border-radius:999px;flex-shrink:0;white-space:nowrap}
.tarea.monitoreo .hora-pill{color:var(--lavanda);background:var(--lavanda-suave)}
.valor-chip{display:inline-block;margin-top:5px;font-family:'Quicksand',sans-serif;font-size:12px;font-weight:700;color:var(--lavanda);background:var(--lavanda-suave);padding:3px 10px;border-radius:999px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
/* Dosis que cambian: la dosis de HOY (verde) y el aviso del próximo cambio (ámbar).
Estos chips dicen CUÁNTO se toma: se doblan en varias líneas, nunca se recortan con "…". */
.chip-dosis{color:#4A6B39;background:var(--salvia-suave);white-space:normal;line-height:1.35}
.chip-cambio{color:#9A6716;background:var(--ambar-suave);white-space:normal;line-height:1.35}
.firma{display:block;margin-top:4px;font-size:11.5px;color:var(--cacao-suave)}
.vacio{text-align:center;padding:30px 20px;color:var(--cacao-suave)}
.vacio .emoji{font-size:44px;display:block;margin-bottom:10px}
.vacio p{font-size:14.5px;line-height:1.6}
.entrada{display:flex;gap:12px;margin-bottom:18px}
.linea-tiempo{display:flex;flex-direction:column;align-items:center}
.punto{width:12px;height:12px;border-radius:50%;background:var(--durazno);margin-top:4px;flex-shrink:0}
.hilo{flex:1;width:2px;background:var(--durazno-suave)}
.burbuja{background:var(--blanco);border-radius:16px;padding:13px 15px;box-shadow:var(--sombra);flex:1;min-width:0}
.burbuja header{display:flex;justify-content:space-between;margin-bottom:5px;font-size:13px}
.burbuja header b{color:var(--terracota-oscuro)}
.burbuja header time{color:var(--cacao-suave)}
.burbuja p{font-size:14.5px;line-height:1.5}
.chips{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px}
.chip.bien{background:var(--salvia-suave);color:#4A6B39}
.chip.regular{background:var(--ambar-suave);color:#9A6716}
/* Navegación: pastillas con blur; la activa se rellena de menta verde */
nav{position:absolute;bottom:0;left:0;right:0;background:rgba(251,249,246,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1.5px solid #F0E7DD;display:none;padding:10px 12px calc(20px + env(safe-area-inset-bottom));gap:6px;z-index:5}
nav.visible{display:flex}
nav button{flex:1;background:none;border:none;border-radius:999px;font-family:'Quicksand',sans-serif;font-size:11px;font-weight:700;color:#A9998B;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;transition:background .2s ease}
nav button svg{width:22px;height:22px;stroke:#A9998B;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
nav button.activo{color:var(--marca);background:var(--marca-claro)}
nav button.activo svg{stroke:var(--marca)}
.btn-primario{background:var(--marca);color:#fff;border:none;border-radius:999px;padding:15px 32px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:16px;cursor:pointer;box-shadow:0 10px 28px rgba(63,112,89,.38);transition:transform .15s ease;width:100%}
.btn-primario:active{transform:scale(.97)}
.btn-primario:disabled{opacity:.6;cursor:wait}
.btn-secundario{background:var(--blanco);color:var(--marca);border:2px solid var(--marca-borde);border-radius:999px;padding:12px 20px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:15px;cursor:pointer}
.btn-flotante{position:absolute;right:20px;bottom:96px;width:58px;height:58px;border-radius:50%;background:var(--marca);color:#fff;border:none;font-size:28px;box-shadow:0 8px 24px rgba(63,112,89,.45);cursor:pointer;display:none;z-index:6}
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--cacao-suave)}
.campo input,.campo select,.campo textarea{width:100%;border:2px solid var(--durazno-suave);background:var(--blanco);border-radius:14px;padding:13px 14px;font-family:'Nunito',sans-serif;font-size:16px;color:var(--cacao);outline:none}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--durazno)}
.pista{font-size:12px;color:var(--cacao-suave);line-height:1.4;margin:-8px 0 14px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Etapas de "la dosis cambia con el tiempo" en el alta de medicamento */
.caja-fases{background:var(--salvia-suave);border-radius:16px;padding:14px 14px 6px;margin:-6px 0 14px}
.caja-fases .pista{margin:0 0 8px}
.btn-mas-fase{display:block;width:100%;border:2px dashed var(--salvia);background:none;border-radius:12px;padding:9px;font-family:'Nunito',sans-serif;font-size:13.5px;font-weight:700;color:#4A6B39;margin:0 0 10px;cursor:pointer}
.quitar-fase{float:right;font-size:12px;font-weight:700;color:var(--rojo);cursor:pointer;text-decoration:underline}
/* En la ficha: la etapa del plan de dosis que va HOY */
.seccion-ficha .dato.fase-actual{background:var(--salvia-suave);border-radius:10px;padding:6px 8px;border-bottom:none}
.seccion-ficha .dato.fase-actual b{color:#4A6B39}
.fila-botones{display:flex;gap:10px;margin-top:18px}
.fila-botones button{flex:1}
#velo{position:absolute;inset:0;background:rgba(58,36,22,.45);z-index:15;display:none;align-items:flex-end}
#velo.abierto{display:flex}
#hoja{background:var(--crema);border-radius:24px 24px 0 0;width:100%;max-height:86%;overflow-y:auto;padding:22px 20px 30px;animation:subir .3s ease}
@keyframes subir{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
#hoja h2{font-size:20px;margin-bottom:4px}
#hoja .sub{font-size:13.5px;color:var(--cacao-suave);margin-bottom:16px}
.seccion-ficha{background:var(--blanco);border-radius:16px;padding:14px 16px;box-shadow:var(--sombra);margin-bottom:12px}
.seccion-ficha h3{font-size:14px;margin-bottom:8px;color:var(--cacao-suave)}
.seccion-ficha .dato{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;border-bottom:1px dashed #F0E2D6;gap:10px}
.seccion-ficha .dato:last-child{border-bottom:none}
.seccion-ficha .dato b{text-align:right}
.sq-chip{border:2px solid var(--durazno-suave);background:var(--blanco);color:var(--cacao-suave);border-radius:999px;padding:7px 14px;font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all .15s ease}
.sq-chip.activa{background:var(--terracota);border-color:var(--terracota);color:#fff}
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:var(--cacao);color:#fff;font-size:14px;font-weight:600;padding:11px 20px;border-radius:999px;z-index:30;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap;max-width:90%}
.toast.visible{opacity:1}
.cargando{text-align:center;padding:40px;color:var(--cacao-suave);font-size:15px}
/* Pantalla de espera: cascarón verde con el logo dibujándose en bucle */
#espera{position:absolute;inset:0;z-index:40;background:var(--marca);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:30px;text-align:center;--logo-trazo:#E3F0E6;--logo-ojo:#FBF9F6}
#espera .espera-logo{width:88px;height:88px;margin-bottom:6px}
#espera .espera-logo svg{width:100%;height:100%}
#espera b{font-family:'Quicksand',sans-serif;font-size:17.5px;color:#fff}
#espera p{font-size:13.5px;color:var(--marca-claro);line-height:1.5;max-width:270px}
/* La espiral se traza y destraza; el ojo aparece cuando el trazo llega a él */
.logo-anima path{stroke-dasharray:100 100;animation:esperaTrazo 2.6s ease-in-out infinite}
.logo-anima circle{animation:esperaOjo 2.6s ease-in-out infinite}
@keyframes esperaTrazo{0%{stroke-dashoffset:100}55%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-100}}
@keyframes esperaOjo{0%,38%{opacity:0}55%,82%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.logo-anima path,.logo-anima circle{animation:none}}
/* Festejo al completar el día: logo brincando, corazoncitos flotando (mock de la dueña) */
#festejo .festejo-velo{position:absolute;inset:0;background:rgba(58,36,22,.5);z-index:22;animation:festAparece .25s ease}
#festejo .festejo-tarjeta{position:absolute;left:26px;right:26px;top:50%;transform:translateY(-50%);z-index:23;background:var(--crema);border-radius:26px;padding:28px 22px 22px;text-align:center;box-shadow:0 20px 60px rgba(43,29,18,.4);animation:festPop .45s ease}
#festejo .festejo-tarjeta h2{font-family:'Quicksand',sans-serif;font-size:21px;margin:10px 0 6px;color:var(--cacao)}
#festejo .festejo-tarjeta p{margin:0;font-size:14px;line-height:1.55;color:var(--cacao-suave)}
#festejo .festejo-icono{position:relative;width:110px;height:110px;margin:0 auto;display:flex;align-items:center;justify-content:center;--logo-trazo:#E3F0E6;--logo-ojo:#FBF9F6}
#festejo .festejo-circulo{position:absolute;inset:10px;border-radius:50%;background:var(--marca)}
#festejo .festejo-icono>svg:first-of-type{position:relative;width:66px;height:66px;animation:festBrinca 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes festAparece{from{opacity:0}to{opacity:1}}
@keyframes festPop{0%{transform:translateY(-50%) scale(.6);opacity:0}70%{transform:translateY(-50%) scale(1.08)}100%{transform:translateY(-50%) scale(1);opacity:1}}
@keyframes festBrinca{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.06,.96) rotate(-4deg)}50%{transform:translateY(0) scale(.96,1.05)}65%{transform:translateY(-6px) scale(1.02) rotate(3deg)}80%{transform:translateY(0) scale(1)}}
@keyframes festFlota{0%{transform:translateY(6px) scale(.5);opacity:0}25%{opacity:1}100%{transform:translateY(-46px) scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){#festejo .festejo-icono svg,#festejo .festejo-tarjeta,#festejo .festejo-velo{animation:none}}
.apapacho-dia{background:var(--durazno-suave);border-radius:22px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start}
.apapacho-dia b{font-family:'Quicksand',sans-serif;font-size:15px;color:var(--terracota-oscuro);display:block}
.apapacho-dia p{margin:5px 0 0;font-size:13.5px;line-height:1.5;color:var(--cacao-suave)}
/* Perfil (solo lectura) */
.perfil-hero{text-align:center;margin-bottom:16px}
.perfil-hero .avatar{margin:0 auto;box-shadow:var(--sombra)}
.perfil-hero h2{font-size:22px}
.gusta-estrella{background:linear-gradient(180deg,var(--durazno-suave),#fff);border:2px solid var(--durazno);border-radius:20px;padding:16px 18px;margin-bottom:12px;box-shadow:var(--sombra)}
.gusta-cabecera{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.gusta-cabecera b{font-family:'Quicksand',sans-serif;font-size:16px;color:var(--terracota-oscuro);display:block}
.gusta-cabecera p{margin:3px 0 0;font-size:12.5px;line-height:1.5;color:var(--cacao-suave)}
.gusta-lista{display:flex;flex-direction:column;gap:8px}
.gusta-item{background:#fff;border-radius:14px;padding:11px 14px;box-shadow:0 3px 12px rgba(92,46,26,.07)}
.gusta-label{display:block;font-size:12px;font-weight:700;color:var(--terracota);margin-bottom:2px}
.gusta-valor{display:block;font-size:14.5px;color:var(--cacao)}
/* Foto opcional en las notas de la bitácora */
.burbuja .foto-nota{display:block;margin-top:9px;width:100%;max-height:230px;object-fit:cover;border-radius:14px;background:var(--durazno-suave)}
.foto-prev-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foto-prev{width:64px;height:64px;border-radius:12px;object-fit:cover;flex-shrink:0}
.btn-foto-nota{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--marca-claro);color:var(--marca);border:none;border-radius:12px;padding:11px 16px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;cursor:pointer}
/* Íconos de trazo (identidad Apapacha) — heredan el color del texto */
.ico-btn{width:18px;height:18px;flex-shrink:0;vertical-align:-4px}
.btn-primario .ico-btn,.btn-secundario .ico-btn{margin-right:8px}
.ico-inline{width:1.05em;height:1.05em;flex-shrink:0;vertical-align:-0.15em;margin-right:.34em}
h2 .ico-inline,h3 .ico-inline{vertical-align:-0.12em}
.ico-xl{width:46px;height:46px;stroke-width:1.6}
.vacio .emoji .ico-xl{color:var(--terracota)}
.ico-medalla{width:30px;height:30px;stroke-width:1.7}
.ico-med{width:26px;height:26px;flex-shrink:0}
.ico-solo{width:19px;height:19px;flex-shrink:0}
.btn-quitar-foto{background:none;border:none;color:var(--rojo);font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;cursor:pointer;text-decoration:underline}
/* ---------- PLAN Y COBRO ---------- */
/* Banda de aviso antes del cobro: fija, no un modal que se pueda ignorar.
Avisar antes de cobrar sostiene el canal de doctores — no es un detalle. */
.banda-prueba{display:flex;gap:12px;align-items:flex-start;background:var(--ambar-suave);border:1.5px solid #EFD9AE;border-radius:18px;padding:14px 16px;margin-bottom:16px}
.banda-prueba>span,.banda-prueba>svg{color:#9A6716;flex-shrink:0}
.banda-prueba b{font-family:'Quicksand',sans-serif;font-size:15px;color:#7A5510;display:block}
.banda-prueba p{margin-top:3px;font-size:13px;line-height:1.45;color:#8A6520}
.btn-banda{margin-top:9px;background:#fff;border:1.5px solid #E0C48A;color:#7A5510;border-radius:999px;padding:8px 16px;font-family:'Quicksand',sans-serif;font-weight:700;font-size:13.5px;cursor:pointer}
/* Variante verde de la banda: aviso de consulta cercana en "Hoy" */
.aviso-consulta{background:var(--salvia-suave);border-color:#CFDFC2}
.aviso-consulta>span,.aviso-consulta>svg{color:#4A6B39}
.aviso-consulta b{color:#3D5A2F}
.aviso-consulta p{color:#4A6B39}
.aviso-consulta .btn-banda{border-color:#B5CCA2;color:#3D5A2F}
/* Entrada al plan desde Configuración */
.fila-plan{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--marca-claro);border:none;border-radius:16px;padding:14px 16px;margin-bottom:12px;cursor:pointer;color:var(--marca)}
.fila-plan>div{flex:1;min-width:0}
.fila-plan b{font-family:'Quicksand',sans-serif;font-size:15px;color:var(--marca-oscuro);display:block}
.fila-plan span{font-size:13px;color:#4E6E5C}
.fila-plan-ir{font-family:'Quicksand',sans-serif;font-weight:700;font-size:13.5px;color:var(--marca);flex-shrink:0}
/* Por qué llegó aquí (ej. quiso escanear y no tiene plan) */
.motivo-paywall{display:flex;gap:11px;align-items:flex-start;background:var(--durazno-suave);border-radius:16px;padding:13px 15px;margin-bottom:16px}
.motivo-paywall>svg{color:var(--terracota);flex-shrink:0}
.motivo-paywall p{font-size:13.5px;line-height:1.5;color:var(--terracota-oscuro)}
/* El precio, siempre repartido entre la familia */
.precio-hero{background:var(--marca);border-radius:22px;padding:20px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden}
.precio-hero b{font-family:'Quicksand',sans-serif;font-size:44px;font-weight:700;color:#fff;display:block;line-height:1}
.precio-hero>span{font-size:14px;color:var(--marca-claro);display:block;margin-top:4px}
.precio-hero p{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--marca-claro)}
.precio-hero p b{display:inline;font-size:inherit;color:#fff}
.incluye{background:var(--blanco);border-radius:20px;padding:16px 18px;box-shadow:var(--sombra);margin-bottom:16px}
.incluye-t{font-family:'Quicksand',sans-serif;font-weight:700;font-size:14px;color:var(--cacao-suave);margin-bottom:11px}
.incluye-i{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.45;margin-bottom:10px}
.incluye-i>svg{color:var(--marca);flex-shrink:0;margin-top:2px}
.incluye-libre{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;color:var(--cacao-suave);background:var(--marca-menta);border-radius:12px;padding:10px 12px;margin-top:4px}
.incluye-libre>svg{color:var(--marca);flex-shrink:0;margin-top:1px}
/* Fundadora: solo se muestra si quedan cupos — si no, no se deja ahí burlándose */
.fundadora{background:linear-gradient(180deg,var(--ambar-suave),#fff);border:2px solid var(--ambar);border-radius:20px;padding:16px 18px;margin-bottom:16px}
.fundadora-cupos{display:inline-block;background:var(--ambar);color:#4A3208;font-family:'Quicksand',sans-serif;font-weight:700;font-size:12px;padding:4px 11px;border-radius:999px;margin-bottom:8px}
.fundadora b{font-family:'Quicksand',sans-serif;font-size:16px;color:#7A5510;display:block}
.fundadora p{margin-top:5px;font-size:13px;line-height:1.5;color:#8A6520}
.fundadora-como{font-size:12.5px;color:#9A6716}
.fundadora-como b{display:inline;font-size:inherit;letter-spacing:.5px}
/* La promesa: pedimos tarjeta HOY pero no cobramos hoy. Sin letra chiquita. */
.promesa{display:flex;gap:12px;align-items:flex-start;background:var(--marca-menta);border-radius:18px;padding:14px 16px;margin-bottom:14px}
.promesa>svg{color:var(--marca);flex-shrink:0}
.promesa b{font-family:'Quicksand',sans-serif;font-size:14.5px;color:var(--marca-oscuro);display:block}
.promesa p{margin-top:3px;font-size:13px;line-height:1.5;color:#4E6E5C}
.promesa p b{display:inline;font-size:inherit}
.nota-legal{margin-top:12px;font-size:12px;line-height:1.5;color:var(--cacao-suave);text-align:center}
/* Cuando ya tiene plan, esta pantalla informa — no vende */
.plan-actual{background:var(--blanco);border-radius:20px;padding:16px 18px;box-shadow:var(--sombra);margin-bottom:16px}
.plan-chip{display:inline-block;background:var(--marca-menta);color:var(--marca);font-family:'Quicksand',sans-serif;font-weight:700;font-size:12px;padding:4px 11px;border-radius:999px;margin-bottom:8px}
/* Solo el nombre del plan es titular: el > evita que los de dentro de un
párrafo se vuelvan bloque y partan la frase en pedazos. */
.plan-actual>b{font-family:'Quicksand',sans-serif;font-size:17px;display:block}
.plan-actual p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--cacao-suave)}
.plan-actual p b{font-family:inherit;font-size:inherit;color:var(--cacao)}
.plan-aviso{color:var(--terracota-oscuro)}
/* Marca de agua del glifo (Parte 1 diseño): verde muy sutil sobre crema, esquina superior */
#bitacora{position:relative;z-index:0}
#bitacora::before{content:"";position:absolute;top:2px;right:-4px;width:138px;height:138px;z-index:-1;pointer-events:none;opacity:.05;background:url("data:image/svg+xml,") no-repeat center/contain}