/* KIRO Kids (prototipo). Dos mundos con la misma esencia de KIRO:
   - Zona del niño: clara, cálida, botones grandes, letra redondeada (Baloo 2).
   - Zona de padres: el azul noche de KIRO (Plus Jakarta Sans + Fraunces). */
:root {
  --k-bg: #fff7ec;
  --k-bg-2: #ffeedd;
  --k-card: #ffffff;
  --k-ink: #2b2350;
  --k-ink-2: #5b5480;
  --k-blue: #4f7fe0;
  --k-purple: #8a6cf0;
  --k-yellow: #ffd166;
  --k-green: #3cc48f;
  --k-red: #ff7a7a;
  --k-line: #efe4d6;
  --k-shadow: 0 8px 0 rgba(43, 35, 80, 0.08), 0 14px 28px -14px rgba(43, 35, 80, 0.25);

  --p-bg: #0b1430;
  --p-card: rgba(22, 35, 76, 0.7);
  --p-card-2: rgba(40, 58, 115, 0.55);
  --p-ink: #eef2ff;
  --p-ink-2: #c3cdee;
  --p-ink-soft: #919ec8;
  --p-blue: #6cb8ff;
  --p-purple: #a28bff;
  --p-yellow: #ffd166;
  --p-green: #5fd3a8;
  --p-line: rgba(160, 185, 255, 0.16);

  --kids: "Baloo 2", "Plus Jakarta Sans", system-ui, sans-serif;
  --sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--kids); color: var(--k-ink); background: var(--k-bg); min-height: 100vh; -webkit-tap-highlight-color: transparent; }
body.con-player { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; cursor: pointer; }

.demo-banner { position: sticky; top: 0; z-index: 5; background: #2b2350; color: #fff; font: 600 0.78rem/1.3 var(--sans); padding: 6px 16px; text-align: center; }
.demo-banner button { background: none; border: 1px solid rgba(255,255,255,0.4); color: #fff; border-radius: 99px; padding: 1px 10px; margin-left: 6px; font-size: 0.74rem; }

/* ---------- Zona niño ---------- */
.scr-kids { max-width: 560px; margin: 0 auto; padding: 18px 16px 40px; background:
  radial-gradient(circle at 15% 0%, rgba(255, 209, 102, 0.35), transparent 40%),
  radial-gradient(circle at 100% 20%, rgba(138, 108, 240, 0.18), transparent 40%); min-height: calc(100vh - 30px); }
.kids-title { font-size: 2rem; font-weight: 800; margin: 8px 0 18px; text-align: center; }
.kids-h2 { font-size: 1.25rem; font-weight: 800; margin: 22px 0 10px; }

.quien-wrap { display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.quien-logo { width: 140px; height: 140px; border-radius: 34px; box-shadow: var(--k-shadow); animation: flota 3s ease-in-out infinite; }
@keyframes flota { 50% { transform: translateY(-6px) rotate(-1deg); } }
.quien-ninos { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.quien-nino { width: 140px; padding: 18px 10px 14px; border: 3px solid var(--k-line); background: var(--k-card); border-radius: 28px; box-shadow: var(--k-shadow); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform 0.2s var(--bounce); color: var(--k-ink); }
.quien-nino:active { transform: scale(0.95); }
.quien-nino:hover { transform: translateY(-3px); border-color: var(--k-purple); }
.quien-av { font-size: 4rem; line-height: 1; }
.quien-nombre { font-size: 1.35rem; font-weight: 800; }
.btn-padres { background: #fff; border: 2px dashed #cfc3e8; color: var(--k-ink-2); border-radius: 99px; padding: 10px 22px; font-weight: 700; }

.nino-top { display: flex; align-items: center; gap: 12px; }
.nino-avatar-btn { width: 64px; height: 64px; border-radius: 50%; border: 4px solid #fff; background: var(--k-yellow); font-size: 2.2rem; box-shadow: var(--k-shadow); }
.nino-saludo { flex: 1; }
.nino-hola { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.nino-nivel { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.nino-nivel-barra { flex: 1; height: 12px; border-radius: 99px; background: #f0e6d8; overflow: hidden; }
.nino-nivel-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--k-yellow), #ffb238); border-radius: 99px; transition: width 0.6s var(--ease); }
.nino-estrellas { font-weight: 800; }
.nino-pegatinas { width: 48px; height: 48px; border-radius: 16px; border: none; background: #fff; font-size: 1.5rem; box-shadow: var(--k-shadow); }

.objetivo-nino { margin-top: 16px; background: linear-gradient(135deg, #4f7fe0, #8a6cf0); color: #fff; border-radius: 24px; padding: 14px 16px; box-shadow: var(--k-shadow); }
.objetivo-nino-tag { font-size: 0.8rem; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.05em; }
.objetivo-nino p { margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; }

.misiones { display: flex; flex-direction: column; gap: 12px; }
.mision { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--k-card); border: 3px solid var(--k-line); border-radius: 24px; padding: 14px; box-shadow: var(--k-shadow); color: var(--k-ink); animation: entra 0.5s var(--ease) both; transition: transform 0.15s; }
.mision:active { transform: scale(0.97); }
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }
.mision-ic { font-size: 2.4rem; width: 60px; height: 60px; display: grid; place-items: center; background: var(--k-bg-2); border-radius: 18px; flex: none; }
.mision-txt { flex: 1; display: flex; flex-direction: column; }
.mision-txt b { font-size: 1.15rem; line-height: 1.2; }
.mision-txt small { color: var(--k-ink-2); font-size: 0.92rem; }
.mision-ok { font-size: 1.3rem; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--k-green); color: #fff; }
.mision.is-hecha { border-color: #bfeedd; background: #f4fffa; }
.mision.is-hecha .mision-ok { background: transparent; }

.juntos-nino { margin-top: 16px; border-radius: 24px; padding: 14px 16px; background: #fff3c9; border: 3px dashed #ffd166; }
.juntos-tag { font-size: 0.8rem; font-weight: 800; color: #9a6b00; text-transform: uppercase; letter-spacing: 0.05em; }
.juntos-fila { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.juntos-ic { font-size: 2.2rem; }
.juntos-fila b { font-size: 1.1rem; }
.juntos-fila p { margin: 0; color: var(--k-ink-2); }

.caras-rapidas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cara { background: #fff; border: 3px solid var(--k-line); border-radius: 20px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; color: var(--k-ink); transition: transform 0.2s var(--bounce); }
.cara span { font-size: 2.2rem; line-height: 1.1; }
.cara small { font-weight: 700; font-size: 0.85rem; }
.cara.is-on { border-color: var(--k-purple); background: #f3eeff; transform: scale(1.05); }

/* Franja 10-12: un poco más sobria */
body[data-franja="10-12"] .scr-kids { background: radial-gradient(circle at 15% 0%, rgba(108, 184, 255, 0.25), transparent 40%), radial-gradient(circle at 100% 20%, rgba(138, 108, 240, 0.2), transparent 40%); }
body[data-franja="10-12"] .nino-avatar-btn { background: #cfe3ff; }

/* ---------- Reproductor (tipo Duolingo) ---------- */
.player { position: fixed; inset: 0; z-index: 20; background: var(--k-bg); display: flex; flex-direction: column; max-width: 640px; margin: 0 auto; animation: entra 0.3s var(--ease); }
.player-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.player-x { width: 44px; height: 44px; border-radius: 14px; border: none; background: #fff; font-size: 1.2rem; box-shadow: var(--k-shadow); color: var(--k-ink); }
.player-juntos { flex: none; background: #fff3c9; color: #9a6b00; border-radius: 99px; padding: 6px 10px; font-weight: 800; font-size: 0.85rem; }
.misiones-juntos { margin: -4px 0 10px; color: var(--k-ink-2); font-weight: 600; }
.player-barra { flex: 1; height: 16px; border-radius: 99px; background: #f0e6d8; overflow: hidden; }
.player-barra span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--k-green), #5fd3a8); border-radius: 99px; transition: width 0.5s var(--ease); }
.player-body { flex: 1; overflow-y: auto; padding: 8px 20px 20px; text-align: center; }
.player-body.is-in { animation: entra 0.35s var(--ease); }
.player-foot { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 2px solid var(--k-line); background: #fff; }
.k-btn { width: 100%; border: none; border-radius: 18px; padding: 15px; font-size: 1.2rem; font-weight: 800; color: #fff; background: var(--k-blue); box-shadow: 0 5px 0 #2f4fb8; transition: transform 0.1s; }
.k-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #2f4fb8; }
.k-btn:disabled { background: #d9d2e6; box-shadow: 0 5px 0 #bdb3cf; color: #fff; }
.k-btn.is-ok { background: var(--k-green); box-shadow: 0 5px 0 #239a6c; }
.k-btn.is-ghost { background: #fff; color: var(--k-ink-2); box-shadow: 0 5px 0 var(--k-line); border: 2px solid var(--k-line); }

.p-emoji { font-size: 5rem; margin: 18px 0 6px; animation: flota 3s ease-in-out infinite; }
.fin-kiro img { width: 130px; border-radius: 30px; }
.p-escena { font-size: 4.2rem; margin: 12px 0 4px; letter-spacing: 6px; }
.p-titulo { font-size: 1.6rem; font-weight: 800; margin: 6px 0; line-height: 1.2; }
.p-pregunta { font-size: 1.35rem; font-weight: 800; margin: 6px 0; line-height: 1.25; }
.p-texto { font-size: 1.2rem; line-height: 1.45; color: var(--k-ink-2); margin: 8px auto; max-width: 30em; }
.p-pista { color: var(--k-ink-2); margin: 2px 0 12px; }
body[data-franja="10-12"] .p-texto { font-size: 1.08rem; }

.p-opciones { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; text-align: left; }
.p-opciones.is-grandes { grid-template-columns: repeat(2, 1fr); text-align: center; }
.p-op { display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--k-line); border-bottom-width: 6px; border-radius: 20px; padding: 12px 14px; color: var(--k-ink); transition: transform 0.15s var(--bounce), border-color 0.15s; }
.is-grandes .p-op { flex-direction: column; gap: 4px; padding: 16px 8px; }
.p-op-e { font-size: 2.4rem; line-height: 1; }
.is-grandes .p-op-e { font-size: 3.2rem; }
.p-op-t { font-weight: 700; font-size: 1.05rem; line-height: 1.25; }
.p-op.is-sel { border-color: var(--k-blue); background: #eef4ff; transform: scale(1.02); }
.p-op.is-ok { border-color: var(--k-green); background: #e9fbf3; }
.p-op.is-mal { border-color: var(--k-red); background: #fff0f0; animation: tiembla 0.35s; }
.p-op.is-tachada { opacity: 0.35; }
@keyframes tiembla { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.p-feedback { margin-top: 16px; padding: 12px 14px; border-radius: 18px; font-size: 1.08rem; font-weight: 700; text-align: left; animation: entra 0.3s var(--ease); }
.p-feedback.is-ok { background: #e3f9ef; color: #146b4a; }
.p-feedback.is-mal { background: #fff1e6; color: #8a4b00; }

.termo { max-width: 360px; margin: 18px auto 0; }
.termo-cara { font-size: 4.5rem; transition: transform 0.2s var(--bounce); }
.termo input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; border-radius: 99px; background: linear-gradient(90deg, #3cc48f, #ffd166 50%, #ff7a7a); outline: none; margin-top: 10px; }
.termo input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 42px; height: 42px; border-radius: 50%; background: #fff; border: 5px solid var(--k-ink); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.termo input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 5px solid var(--k-ink); }
.termo-etq { display: flex; justify-content: space-between; font-weight: 700; color: var(--k-ink-2); margin-top: 6px; }

.p-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.p-chip { background: #fff; border: 3px solid var(--k-line); border-radius: 99px; padding: 8px 14px; font-weight: 700; color: var(--k-ink); }
.p-chip.is-sel { border-color: var(--k-purple); background: #f3eeff; }

.globo { font-size: 5rem; margin: 30px auto 10px; transition: transform 3s ease-in-out; display: inline-block; }
.globo.is-in { transform: scale(1.9); }
.globo.is-out { transform: scale(0.8); }
.cuadrado { width: 150px; height: 150px; margin: 30px auto 10px; border-radius: 26px; border: 6px solid var(--k-blue); position: relative; transition: background-color 1s, transform 4s ease-in-out; }
.cuadrado.is-in { transform: scale(1.15); background: rgba(79, 127, 224, 0.15); }
.cuadrado.is-hold, .cuadrado.is-hold2 { background: rgba(138, 108, 240, 0.15); }
.cuadrado.is-out { transform: scale(0.9); background: transparent; }
.resp-guia { font-size: 1.4rem; font-weight: 800; min-height: 2em; }

.rutina { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; text-align: left; }
.rutina.is-grande { grid-template-columns: repeat(2, 1fr); text-align: center; }
.rut-paso { position: relative; display: flex; align-items: center; gap: 12px; background: #fff; border: 3px solid var(--k-line); border-bottom-width: 6px; border-radius: 20px; padding: 12px; color: var(--k-ink); transition: transform 0.2s var(--bounce); }
.is-grande .rut-paso { flex-direction: column; padding: 16px 8px; }
.rut-e { font-size: 1.3rem; font-weight: 800; }
.is-grande .rut-e { font-size: 3rem; }
.rut-t { font-weight: 700; font-size: 1.05rem; }
.rut-st { position: absolute; top: -10px; right: -6px; font-size: 1.8rem; }
.rut-paso.is-hecho { border-color: var(--k-green); background: #effcf6; transform: rotate(-1deg); }
.rut-paso.is-hecho .rut-st { animation: pega 0.4s var(--bounce); }
@keyframes pega { from { transform: scale(2.5) rotate(-30deg); opacity: 0; } }

.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confeti i { position: absolute; top: -12px; width: 10px; height: 16px; border-radius: 3px; animation: cae 1.6s ease-in forwards; }
@keyframes cae { to { transform: translateY(105vh) rotate(540deg); } }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 70; background: #2b2350; color: #fff; font: 600 0.95rem/1.35 var(--sans); padding: 12px 16px; border-radius: 16px; max-width: min(92vw, 420px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); animation: entra 0.3s var(--ease); }

/* ---------- PIN ---------- */
.pin-modal { position: fixed; inset: 0; z-index: 40; background: rgba(11, 20, 48, 0.75); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; }
.pin-card { width: 100%; max-width: 330px; background: #15214a; color: var(--p-ink); border-radius: 26px; padding: 22px 18px; text-align: center; font-family: var(--sans); }
.pin-card h2 { margin: 0 0 4px; font-family: var(--serif); font-style: italic; }
.pin-card p { color: var(--p-ink-2); margin: 0 0 14px; }
.pin-puntos { display: flex; gap: 14px; justify-content: center; margin-bottom: 14px; }
.pin-puntos i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--p-ink-soft); }
.pin-puntos i.is-on { background: var(--p-yellow); border-color: var(--p-yellow); }
.pin-puntos.is-mal { animation: tiembla 0.35s; }
.pin-error { color: #ff8f85 !important; font-weight: 600; }
.pin-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-k { height: 58px; border-radius: 18px; border: 1px solid var(--p-line); background: rgba(40, 58, 115, 0.55); color: var(--p-ink); font-size: 1.4rem; font-weight: 700; }
.pin-k:active { background: rgba(108, 184, 255, 0.3); }
.pin-k.is-vacia { visibility: hidden; }
.pin-cancelar { margin-top: 12px; background: none; border: none; color: var(--p-ink-soft); font-weight: 600; }

/* ---------- Zona de padres (esencia KIRO) ---------- */
.padres { font-family: var(--sans); color: var(--p-ink); background: radial-gradient(circle at 10% 0%, rgba(108, 184, 255, 0.18), transparent 40%), radial-gradient(circle at 90% 10%, rgba(162, 139, 255, 0.18), transparent 45%), var(--p-bg); min-height: 100vh; padding-bottom: 90px; }
.p-top { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; padding: 14px 16px; }
.p-logo { width: 44px; height: 44px; border-radius: 12px; }
.p-top > div { flex: 1; }
.p-fam { margin: 0; font-weight: 800; }
.p-sem { margin: 0; color: var(--p-ink-soft); font-size: 0.85rem; }
.p-salir { background: rgba(255,255,255,0.08); border: 1px solid var(--p-line); color: var(--p-ink); border-radius: 99px; padding: 6px 12px; font-weight: 600; font-size: 0.85rem; }
.p-main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.p-card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 22px; padding: 16px; margin: 12px 0; backdrop-filter: blur(8px); }
.p-card-h { margin: 0 0 10px; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--p-blue); }
.p-eyebrow { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--p-yellow); }
.p-serif { font-family: var(--serif); font-style: italic; font-weight: 600; margin: 4px 0 8px; font-size: 1.5rem; }
.p-h { margin-top: 10px; }
.p-sub { color: var(--p-ink-2); margin: 0 0 6px; }
.p-objetivo { background: linear-gradient(135deg, rgba(108, 184, 255, 0.22), rgba(162, 139, 255, 0.26)); }
.p-objetivo details summary { cursor: pointer; color: var(--p-blue); font-weight: 700; }
.p-objetivo details p { color: var(--p-ink-2); line-height: 1.5; }
.p-tarea, .p-juntos, .p-nino { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--p-line); }
.p-tarea:first-of-type, .p-juntos:first-of-type, .p-nino:first-of-type { border-top: none; }
.p-tarea > div, .p-juntos > div, .p-nino > div { flex: 1; }
.p-tarea p, .p-juntos p, .p-nino p { margin: 2px 0; color: var(--p-ink-2); font-size: 0.9rem; line-height: 1.4; }
.p-tarea small, .p-juntos small, .p-nino small { color: var(--p-ink-soft); font-size: 0.8rem; }
.p-juntos-ic, .p-nino-av { font-size: 1.9rem; width: 46px; height: 46px; display: grid; place-items: center; background: var(--p-card-2); border-radius: 14px; flex: none; }
.p-juntos.is-hecho { opacity: 0.6; }
.p-franja { font-weight: 500; color: var(--p-ink-soft); font-size: 0.8rem; }
.p-btn { border: none; border-radius: 99px; padding: 10px 16px; font-weight: 700; color: #0b1430; background: linear-gradient(135deg, var(--p-blue), var(--p-purple)); width: 100%; margin-top: 8px; }
.p-btn-sm { width: auto; padding: 7px 12px; font-size: 0.82rem; margin-top: 0; flex: none; }
.p-btn-ghost { background: rgba(255,255,255,0.06); color: var(--p-ink); border: 1px solid var(--p-line); }
.p-lectura-btn { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--p-card-2); border: 1px solid var(--p-line); color: var(--p-ink); border-radius: 16px; padding: 12px 14px; margin-top: 8px; }
.p-lectura-btn small { color: var(--p-ink-soft); flex: none; }
.p-lista { margin: 0; padding-left: 18px; color: var(--p-ink-2); line-height: 1.7; }
.p-cierre p { color: var(--p-ink-2); margin: 0; line-height: 1.5; }
.p-mapa-fila { padding: 10px 0; border-top: 1px solid var(--p-line); }
.p-mapa-fila:first-of-type { border-top: none; }
.p-mapa-fila p { margin: 3px 0; color: var(--p-ink-2); font-size: 0.9rem; line-height: 1.45; }
.p-mapa-fila.is-mal b { color: #ffb4a8; }
.p-nivel { display: flex; gap: 14px; align-items: center; }
.p-nivel-img { width: 80px; height: 80px; border-radius: 20px; }
.p-nivel > div { flex: 1; }
.p-barra { height: 10px; border-radius: 99px; background: var(--p-card-2); overflow: hidden; margin: 6px 0; }
.p-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--p-yellow), #ffb238); }
.p-nivel small { color: var(--p-ink-soft); }
.p-ajuste { padding: 10px 0; border-top: 1px solid var(--p-line); }
.p-ajuste p { margin: 2px 0; color: var(--p-ink-2); font-size: 0.9rem; }
.p-ajuste a { color: var(--p-blue); }

.p-chat { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 290px); min-height: 260px; overflow-y: auto; padding: 10px 0; }
.p-msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; line-height: 1.45; font-size: 0.95rem; animation: entra 0.3s var(--ease); }
.p-msg.is-kiro { align-self: flex-start; background: var(--p-card-2); border: 1px solid var(--p-line); }
.p-msg.is-yo { align-self: flex-end; background: linear-gradient(135deg, var(--p-blue), var(--p-purple)); color: #0b1430; font-weight: 500; }
.p-msg.is-typing { display: flex; gap: 4px; }
.p-msg.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-ink-2); animation: punto 1.2s infinite; }
.p-msg.is-typing i:nth-child(2) { animation-delay: 0.15s; }
.p-msg.is-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: 0.4; } }
.p-chat-form { display: flex; gap: 8px; align-items: flex-end; background: var(--p-card); border: 1px solid var(--p-line); border-radius: 22px; padding: 6px; }
.p-chat-form textarea { flex: 1; resize: none; border: none; background: transparent; color: var(--p-ink); font: 16px/1.4 var(--sans); padding: 8px 10px; outline: none; }
.p-chat-form button { width: 44px; height: 44px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--p-blue), var(--p-purple)); color: #0b1430; font-size: 1.1rem; }
.p-crisis { font-size: 0.78rem; color: var(--p-ink-soft); text-align: center; }
.p-crisis a { color: var(--p-blue); font-weight: 700; }

.p-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; background: rgba(14, 23, 52, 0.92); backdrop-filter: blur(10px); border-top: 1px solid var(--p-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.p-nav button { background: none; border: none; color: var(--p-ink-soft); display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.72rem; font-weight: 700; padding: 4px 8px; }
.p-nav button span { font-size: 1.3rem; line-height: 1.2; }
.p-nav button.is-on { color: var(--p-ink); }
.p-nav-kiro span img { width: 30px; height: 30px; border-radius: 9px; }

.k-modal { position: fixed; inset: 0; z-index: 50; background: rgba(5, 10, 26, 0.6); backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.k-modal-card { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; background: #15214a; color: var(--p-ink); border-radius: 24px; padding: 20px 18px 14px; font-family: var(--sans); animation: entra 0.3s var(--ease); }
.k-modal-card label { display: block; font-weight: 700; font-size: 0.88rem; margin: 10px 0 4px; }
.k-modal-card textarea { width: 100%; border-radius: 12px; border: 1px solid var(--p-line); background: var(--p-card-2); color: var(--p-ink); font: 15px/1.4 var(--sans); padding: 10px; }
.p-lect { color: var(--p-ink-2); line-height: 1.65; font-size: 1rem; }
@media (min-width: 640px) { .k-modal { align-items: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Fase 2: cuenta, hijos, carga ---------- */
.scr-centro .quien-wrap { min-height: 80vh; justify-content: center; }
.bienv-lede { text-align: center; font-size: 1.1rem; color: var(--k-ink-2); max-width: 26em; margin: 0 0 22px; line-height: 1.4; }
.bienv-lede a { color: var(--k-blue); font-weight: 700; }
.bienv-nota { text-align: center; color: var(--k-ink-2); font-size: 0.92rem; margin-top: 14px; }
.scr-centro .k-btn, .quien-wrap > .k-btn { max-width: 360px; margin-bottom: 10px; }
.kids-title-sm { font-size: 1.6rem; margin: 4px 0 6px; text-align: left; }
.form-card { background: var(--k-card); border: 3px solid var(--k-line); border-radius: 28px; padding: 20px 18px; box-shadow: var(--k-shadow); }
.form-lede { color: var(--k-ink-2); margin: 0 0 12px; line-height: 1.4; }
.form-card label { display: block; font-weight: 700; margin: 12px 0 4px; }
.form-card input[type="text"], .form-card input[type="password"], .form-card input[type="email"], .form-card input[type="month"], .form-card select {
  width: 100%; font: 600 1.05rem var(--kids); color: var(--k-ink); background: #fffaf3; border: 2px solid var(--k-line); border-radius: 14px; padding: 11px 12px; outline: none; }
.form-card input:focus, .form-card select:focus { border-color: var(--k-purple); }
.opc { font-weight: 500; color: var(--k-ink-2); }
.hint { margin: 4px 0 0; font-size: 0.88rem; color: var(--k-ink-2); line-height: 1.35; }
.check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; line-height: 1.35; font-size: 0.95rem; }
.check input { width: 22px; height: 22px; flex: none; margin-top: 2px; accent-color: var(--k-purple); }
.check a { color: var(--k-blue); }
.form-error { color: #c0392b; font-weight: 700; margin: 10px 0 0; }
.form-card .k-btn { margin-top: 14px; }
.link-btn { display: block; margin: 12px auto 0; background: none; border: none; color: var(--k-ink-2); font-weight: 700; text-decoration: underline; }
.codigo-input { font-size: 2rem !important; letter-spacing: 0.4em; text-align: center; margin-top: 6px; }
.hijos-lista { display: flex; flex-direction: column; gap: 8px; }
.hijo-fila { display: flex; align-items: center; gap: 10px; background: #fffaf3; border: 2px solid var(--k-line); border-radius: 18px; padding: 8px 10px; }
.hijo-av { font-size: 2rem; }
.hijo-fila > div { flex: 1; display: flex; flex-direction: column; }
.hijo-fila small { color: var(--k-ink-2); }
.mini-btn { background: #fff; border: 2px solid var(--k-line); border-radius: 99px; padding: 4px 10px; font-weight: 700; color: var(--k-ink); }
.mini-btn.is-peligro { color: #c0392b; }
.hijo-form { margin-top: 6px; border-top: 2px dashed var(--k-line); padding-top: 4px; }
.avatares { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.avatar { min-width: 0; padding: 0; font-size: 1.5rem; aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--k-line); background: #fffaf3; transition: transform 0.15s var(--bounce); }
.avatar.is-on { border-color: var(--k-purple); background: #f3eeff; transform: scale(1.08); }
.pin-ok { width: 100%; margin-top: 12px; border: none; border-radius: 99px; padding: 12px; font-weight: 800; color: #0b1430; background: linear-gradient(135deg, var(--p-blue), var(--p-purple)); }
.pin-ok:disabled { opacity: 0.4; }
.cargando { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 247, 236, 0.92); font-weight: 700; color: var(--k-ink-2); }
.cargando img { width: 90px; border-radius: 22px; animation: flota 1.6s ease-in-out infinite; }
.p-aviso { background: rgba(255, 209, 102, 0.12); border: 1px dashed rgba(255, 209, 102, 0.5); color: var(--p-ink-2); border-radius: 16px; padding: 10px 12px; margin: 8px 0; font-size: 0.9rem; line-height: 1.4; }
.p-ejemplo { display: inline-block; margin-left: 6px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #0b1430; background: var(--p-yellow); border-radius: 99px; padding: 1px 8px; vertical-align: middle; }
.k-modal-card input { width: 100%; border-radius: 12px; border: 1px solid var(--p-line); background: var(--p-card-2); color: var(--p-ink); font: 16px var(--sans); padding: 10px; }
.k-modal-card .form-error { color: #ff8f85; }

/* ---------- Fase 3: recomendación, aviso, reservas, chat ---------- */
.p-aviso-psi { border-color: rgba(255, 209, 102, 0.45); }
.p-aviso-psi p { color: var(--p-ink-2); line-height: 1.5; margin: 6px 0; }
.p-urgente { background: rgba(255, 120, 120, 0.12); border: 1px solid rgba(255, 120, 120, 0.4); border-radius: 12px; padding: 8px 10px; }
.p-urgente a, .p-aviso-psi a { color: var(--p-yellow); font-weight: 700; }
.p-textarea { width: 100%; margin-top: 8px; border-radius: 12px; border: 1px solid var(--p-line); background: var(--p-card-2); color: var(--p-ink); font: 15px/1.4 var(--sans); padding: 10px; }
.p-opcion { position: relative; }
.p-opcion.is-recomendada { border-color: var(--p-blue); box-shadow: 0 0 0 3px rgba(108, 184, 255, 0.18); }
.p-opcion h3 { margin: 6px 0; }
.p-cargando { height: 6px; border-radius: 99px; background: var(--p-card-2); overflow: hidden; position: relative; margin-top: 10px; }
.p-cargando span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 99px; background: linear-gradient(90deg, var(--p-blue), var(--p-purple)); animation: pBarra 1.6s ease-in-out infinite; }
@keyframes pBarra { 0% { left: -40%; } 100% { left: 100%; } }
.p-huecos { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.p-huecos .p-btn { margin-top: 0; }
.p-huecos .p-btn::first-letter { text-transform: uppercase; }
.p-msg br + br { display: none; }
#p-fin-triage { margin: 10px 0; }