:root{
  --superficie-100:#fff8ec; --superficie-alta:#ffffff; --borde:#e8dec8;
  --tinta:#1c2622; --tinta-suave:#5b6b63;
  --marca-verde:#1fae6e; --marca-verde-fuerte:#178457; --marca-verde-100:#e4f7ec; --sobre-marca-verde:#ffffff;
  --acento-naranja:#ff8a3d; --acento-naranja-fuerte:#b8501a; --acento-naranja-100:#ffeee0; --sobre-acento-naranja:#ffffff;
  --info-azul:#2f6fed; --info-azul-fuerte:#1f4fbf; --info-azul-100:#e8efff; --sobre-info-azul:#ffffff;
  --amarillo-vivo:#feba12; --amarillo-fuerte:#9c6b0a; --amarillo-100:#fff3d6;
  --alerta:#d53c42; --sobre-alerta:#ffffff;
  --sombra-tarjeta: 0 2px 8px rgba(28,38,34,0.10);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--superficie-100);font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--tinta);}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}
input,select{font-family:inherit;}
h1,h2,h3,p{margin:0;}
.display{font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;}

#app{max-width:460px;margin:0 auto;min-height:100vh;background:var(--superficie-100);display:flex;flex-direction:column;position:relative;}

.topbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:16px 20px 0 20px;}
.marca{display:flex;align-items:center;gap:6px;text-decoration:none;background:none;border:none;padding:0;}
.marca img{width:28px;height:auto;}
.marca .word{font-weight:800;font-size:17px;letter-spacing:-0.01em;}
.marca .word .k{color:var(--acento-naranja-fuerte);}
.marca .word .p{color:var(--tinta);}
.avatar{width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;}
.avatar-naranja{background:var(--acento-naranja-100);}
.avatar-azul{background:var(--info-azul-100);}

.back-btn{width:32px;height:32px;border-radius:9999px;background:var(--superficie-alta);box-shadow:var(--sombra-tarjeta);border:none;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tinta);text-decoration:none;}

.content{flex:1;padding:16px 20px 100px 20px;display:flex;flex-direction:column;gap:16px;}
.content.center{align-items:center;justify-content:center;text-align:center;}

.titulo-1{font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;font-weight:700;font-size:24px;}
.subtitulo{font-size:14px;color:var(--tinta-suave);}

.tarjeta{background:var(--superficie-alta);border-radius:16px;padding:14px;box-shadow:var(--sombra-tarjeta);}
.tarjeta-lg{background:var(--superficie-alta);border-radius:20px;padding:18px;box-shadow:var(--sombra-tarjeta);}

.banner-sol{display:flex;align-items:center;gap:10px;background:var(--acento-naranja-100);border-radius:16px;padding:12px 14px;font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;font-weight:600;font-size:14px;line-height:18px;}

/* Sol la cotorra: mascota unica que aparece y "reacciona" en todo PropiKids */
@keyframes solFlota{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-8px) rotate(-2deg);}}
.sol-mascota{animation:solFlota 3.2s ease-in-out infinite;cursor:pointer;transition:transform 0.15s ease;touch-action:manipulation;}
.sol-mascota:active{transform:scale(0.9);}
@keyframes solSalta{0%{transform:scale(1) rotate(0deg);}30%{transform:scale(1.18) rotate(-6deg);}60%{transform:scale(0.95) rotate(4deg);}100%{transform:scale(1) rotate(0deg);}}
.sol-salta{animation:solSalta 0.55s ease;}
.panel-sol{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:8px 4px 4px 4px;}
.panel-sol img{width:130px;height:auto;}
.panel-sol h2{font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;font-weight:700;font-size:19px;}
.panel-sol p{font-size:14px;color:var(--tinta-suave);line-height:20px;max-width:320px;}
.overlay-celebracion{position:fixed;inset:0;background:rgba(28,38,34,0.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;}
.tarjeta-celebracion{background:var(--superficie-alta);border-radius:24px;padding:26px 22px;max-width:320px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 12px 32px rgba(28,38,34,0.25);}
.tarjeta-celebracion img{width:120px;height:auto;}

.etiqueta{font-weight:700;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;color:var(--tinta-suave);display:flex;align-items:center;gap:8px;}
.contador{background:var(--superficie-100);border-radius:9999px;padding:1px 8px;font-size:11px;}

.tarea{display:flex;flex-direction:column;gap:8px;}
.tarea-fila{display:flex;align-items:center;gap:10px;}
.tarea-icono{font-size:26px;flex:none;width:32px;text-align:center;}
.tarea-titulo{font-weight:600;font-size:15px;}
.candado{margin-left:auto;font-size:16px;}
.chip{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;background:var(--superficie-100);border-radius:8px;padding:4px 9px;font-weight:700;font-size:12px;}
.tarea-bloqueada{border:2px dashed var(--alerta);opacity:0.9;}
.nota-bloqueo{font-size:11px;color:var(--alerta);}

.btn{border:none;border-radius:9999px;padding:12px 20px;font-weight:700;font-size:14px;text-align:center;text-decoration:none;display:inline-block;}
.btn-primario{background:var(--marca-verde-fuerte);color:var(--sobre-marca-verde);}
.btn-acento{background:var(--acento-naranja-fuerte);color:var(--sobre-acento-naranja);}
.btn-info{background:var(--info-azul-fuerte);color:var(--sobre-info-azul);}
.btn-sm{padding:7px 16px;font-size:13px;align-self:flex-end;}
.btn-bloque{display:block;width:100%;text-align:center;}
.btn[disabled]{opacity:0.5;cursor:default;}

.enlace{font-size:13px;font-weight:700;color:var(--acento-naranja-fuerte);text-decoration:none;background:none;border:none;padding:0;cursor:pointer;}

.navinferior{position:sticky;bottom:0;flex:none;height:66px;display:flex;border-top:1px solid var(--borde);background:var(--superficie-alta);}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:700;color:var(--tinta-suave);text-decoration:none;border:none;background:none;}
.nav-item.activo{color:var(--marca-verde-fuerte);}
.nav-item.activo.padre{color:var(--info-azul-fuerte);}
.nav-item .ni{font-size:19px;}
.nav-badge{position:absolute;top:2px;right:calc(50% - 20px);background:var(--alerta);color:var(--sobre-alerta);font-size:9px;font-weight:800;line-height:1;padding:2px 5px;border-radius:9999px;min-width:14px;text-align:center;}

.perfil-card{display:flex;align-items:center;gap:14px;background:var(--superficie-alta);border-radius:20px;padding:16px;box-shadow:var(--sombra-tarjeta);border:none;width:100%;text-align:left;text-decoration:none;color:inherit;}
.perfil-card.padre{background:var(--tinta);color:#fff;}
.perfil-emoji{width:56px;height:56px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:28px;flex:none;}

.divisor-o{display:flex;align-items:center;gap:10px;}
.divisor-o .linea{flex:1;height:1px;background:var(--borde);}

.campo-grupo{display:flex;flex-direction:column;gap:6px;}
.campo-grupo label{font-weight:700;font-size:13px;}
.campo{width:100%;box-sizing:border-box;border:1.5px solid var(--borde);border-radius:14px;padding:12px 14px;font-size:15px;color:var(--tinta);background:var(--superficie-alta);}

.pote-fila{display:flex;gap:12px;}
.pote{flex:1;background:var(--superficie-alta);border-radius:20px;padding:14px 10px;box-shadow:var(--sombra-tarjeta);display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.pote-badge{width:40px;height:40px;border-radius:9999px;display:flex;align-items:center;justify-content:center;font-size:20px;}
.barra{width:100%;height:6px;border-radius:9999px;background:var(--superficie-100);overflow:hidden;}
.barra-fill{height:100%;border-radius:9999px;background:var(--marca-verde-fuerte);}

.pill{flex:1;text-align:center;border-radius:9999px;padding:9px 6px;font-weight:700;font-size:13px;border:1.5px solid var(--borde);background:var(--superficie-alta);color:var(--tinta-suave);cursor:pointer;}
.pill.activa{background:var(--info-azul-fuerte);color:var(--sobre-info-azul);border-color:var(--info-azul-fuerte);}

.stat-fila{display:flex;gap:12px;}
.stat-tarjeta{flex:1;background:var(--superficie-alta);border-radius:16px;padding:14px;box-shadow:var(--sombra-tarjeta);}
.stat-valor{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;}

.switch{width:38px;height:22px;border-radius:9999px;background:var(--borde);position:relative;flex:none;border:none;cursor:pointer;}
.switch.on{background:var(--marca-verde-fuerte);}
.switch .bolita{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:9999px;background:#fff;transition:left .15s;}
.switch.on .bolita{left:18px;}

.fab{position:fixed;right:calc(50% - 210px);bottom:84px;width:56px;height:56px;border-radius:9999px;background:var(--marca-verde-fuerte);color:var(--sobre-marca-verde);display:flex;align-items:center;justify-content:center;font-size:26px;border:none;box-shadow:0 8px 20px rgba(23,132,87,0.4);}
@media (max-width: 460px){ .fab{ right:20px; } }

.overlay{position:fixed;inset:0;background:rgba(28,38,34,0.45);display:flex;align-items:flex-end;justify-content:center;z-index:20;}
.hoja{background:var(--superficie-alta);border-radius:24px 24px 0 0;padding:20px;width:100%;max-width:460px;display:flex;flex-direction:column;gap:14px;}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--tinta);color:#fff;padding:10px 18px;border-radius:9999px;font-size:13px;font-weight:600;z-index:30;}

.chispa{color:var(--amarillo-vivo);}