/* ============================================================
   BABYRONDA — estilos v3 · "Fiesta ilustrada"
   Dirección basada en referencias de la clienta:
   crema cálida + blob sol + chispitas de confeti,
   botones menta pill en mayúsculas, Poppins + Baloo 2,
   tarjetas blancas con sombra suave. Sin bordes duros.
   ============================================================ */

:root{
  --primary:#5FC9AC;        /* menta (botones y acentos) */
  --primary-ink:#2F8E75;
  --soft:#FDE3A9;           /* sol: blobs y fondos tenues */
  --bg:#FFFBF2;             /* crema */
  --card:#FFFFFF;
  --ink:#51443C;
  --muted:#A2917F;
  --accent:#F2994A;         /* naranjo de los eyebrows */
  --gold:#F6C453;
  --ok:#5FC9AC;
  --warn:#E2795B;
  --radius:24px;
  --shadow:0 12px 32px rgba(81,68,60,.09);
  --shadow-btn:0 10px 22px color-mix(in srgb, var(--primary) 38%, transparent);
  --font-display:'Baloo 2', 'Poppins', sans-serif;
  --font-body:'Poppins', system-ui, sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{font-size:16.5px}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font-family:var(--font-body); line-height:1.6; overflow-x:hidden}

#app{position:relative; z-index:1; max-width:600px; margin:0 auto; padding:16px 16px 90px}

/* ---------- Tipos ---------- */
h1,h2,h3{font-family:var(--font-display); line-height:1.15; margin:.2em 0 .3em; font-weight:700}
h1{font-size:1.75rem}
h2{font-size:1.25rem}
h3{font-size:1.02rem}
.display{font-family:var(--font-display); font-weight:800; color:var(--ink); font-size:2.5rem; line-height:1.05; margin:0}
.eyebrow{text-transform:uppercase; letter-spacing:.32em; font-size:.66rem; font-weight:600; color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:.84rem}
.center{text-align:center}

/* ---------- Hero: blob sol + chispitas ---------- */
.hero{text-align:center; padding:56px 10px 18px; position:relative}
.hero::before{
  content:""; position:absolute; z-index:-1; left:50%; top:-70px;
  width:340px; height:300px; transform:translateX(-50%);
  background:var(--soft);
  border-radius:47% 53% 58% 42% / 55% 48% 52% 45%;
  opacity:.9;
}
.hero::after{ /* chispitas de confeti */
  content:""; position:absolute; z-index:-1; inset:-30px 0 auto 0; height:230px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='230'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='5'%3E%3Cpath d='M18 40l10 -6' stroke='%23F2994A'/%3E%3Cpath d='M240 30l8 8' stroke='%235FC9AC'/%3E%3Cpath d='M30 170l11 3' stroke='%23F28BA8'/%3E%3Cpath d='M228 160l-4 11' stroke='%23F6C453'/%3E%3Cpath d='M12 108l12 -2' stroke='%235FC9AC'/%3E%3Cpath d='M248 100l-11 5' stroke='%23F28BA8'/%3E%3C/g%3E%3Cg fill='%23F2994A'%3E%3Ccircle cx='52' cy='22' r='3.4'/%3E%3Ccircle cx='214' cy='196' r='3.4'/%3E%3C/g%3E%3Cg fill='%235FC9AC'%3E%3Ccircle cx='206' cy='64' r='3'/%3E%3Ccircle cx='44' cy='206' r='3'/%3E%3C/g%3E%3Cg fill='%23F28BA8'%3E%3Ccircle cx='66' cy='120' r='2.6'/%3E%3Ccircle cx='196' cy='120' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center top;
}
.hero .logo-img{width:98px; height:98px; object-fit:contain; border-radius:50%; background:#fff; box-shadow:var(--shadow); padding:8px}
.hero .big-emoji{
  font-size:2.7rem; display:inline-flex; align-items:center; justify-content:center;
  width:92px; height:92px; background:#fff; border-radius:50%; box-shadow:var(--shadow);
}
.hero .display{margin-top:6px}
.hero-rule{height:6px}

/* ---------- Tarjetas ---------- */
.card{position:relative; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:26px 22px; margin:16px 0}
.card.sunny{background:linear-gradient(180deg, color-mix(in srgb, var(--soft) 55%, #fff), #fff 75%)}

/* ---------- Botones pill ---------- */
button, .btn{
  font-family:var(--font-body); font-weight:600;
  border:none; border-radius:999px; cursor:pointer;
  padding:15px 26px; min-height:52px;
  background:#fff; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .12s ease, box-shadow .15s ease, opacity .12s;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; font-size:.95rem;
}
button:active{transform:scale(.97)}
.btn-primary{
  background:var(--primary); color:#fff; box-shadow:var(--shadow-btn);
  text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; font-weight:700;
}
.btn-secondary{
  background:#fff; color:var(--primary-ink); box-shadow:0 6px 16px rgba(81,68,60,.10);
  border:2px solid color-mix(in srgb, var(--primary) 55%, #fff);
  text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; font-weight:700;
}
.btn-ghost{background:transparent; box-shadow:none; color:var(--primary-ink); font-weight:600; min-height:auto; padding:8px 10px; text-decoration:underline}
.btn-ghost:active{transform:none}
.btn-danger{background:#fff; color:var(--warn); border:2px solid color-mix(in srgb, var(--warn) 55%, #fff); box-shadow:0 6px 16px rgba(81,68,60,.08); font-size:.8rem}
.btn-block{width:100%}
.btn-sm{padding:9px 16px; min-height:40px; font-size:.74rem}
button:disabled{opacity:.45; cursor:not-allowed}

/* ---------- Formularios ---------- */
label.field{display:block; margin:15px 0}
label.field > span{display:block; font-weight:600; font-size:.85rem; margin-bottom:7px}
input[type=text], input[type=number], input[type=date], select, textarea{
  width:100%; font-family:var(--font-body); font-size:1rem;
  padding:14px 16px; border-radius:16px;
  border:1.5px solid #EFE7DB; background:#FFFDF9; color:var(--ink); outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); background:#fff}
input[type=color]{width:54px; height:46px; border:none; border-radius:14px; background:#fff; padding:4px; cursor:pointer; box-shadow:var(--shadow)}

/* ---------- Chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:8px 0}
.chip{border-radius:16px; padding:10px 13px; font-size:1.3rem; min-height:auto; line-height:1; background:#fff; box-shadow:0 4px 12px rgba(81,68,60,.08)}
.chip.selected{background:color-mix(in srgb, var(--primary) 16%, #fff); box-shadow:0 0 0 2.5px var(--primary), 0 4px 12px rgba(81,68,60,.08)}
.chip.text{font-size:.85rem; font-weight:600; color:var(--ink)}
.swatch{display:inline-flex; width:42px; height:42px; border-radius:12px; overflow:hidden}
.swatch i{flex:1}

/* ---------- Pills de estado ---------- */
.pill{display:inline-block; padding:5px 14px; border-radius:999px; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.pill.locked{background:#F2EDE4; color:#AA9C8C}
.pill.open{background:color-mix(in srgb, var(--ok) 18%, #fff); color:var(--primary-ink); animation:pulse 1.7s ease-in-out infinite}
.pill.closed{background:color-mix(in srgb, var(--gold) 30%, #fff); color:#9A7318}
.pill.win{background:var(--gold); color:#6E5312}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
@media (prefers-reduced-motion: reduce){ .pill.open{animation:none} }

/* ---------- Filas de juego ---------- */
.game-row{display:flex; align-items:center; gap:14px; padding:15px 0; border-bottom:1px solid #F3EDE3}
.game-row:last-child{border-bottom:none}
.game-row .icon{font-size:1.7rem; width:54px; height:54px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--soft) 60%, #fff); border-radius:18px; flex-shrink:0}
.game-row .meta{flex:1; min-width:0}
.game-row .meta h3{margin:0}
.game-actions{display:flex; flex-wrap:wrap; gap:9px; margin-top:12px}

/* ---------- Ranking ---------- */
.rank-row{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #F3EDE3}
.rank-row:last-child{border-bottom:none}
.rank-pos{width:38px; height:38px; border-radius:50%; background:#F5EFE6; color:var(--muted); font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0}
.rank-row.top1 .rank-pos{background:var(--gold); color:#6E5312}
.rank-row .avatar{font-size:1.45rem}
.rank-row .pts{margin-left:auto; font-family:var(--font-display); font-weight:700; color:var(--primary-ink)}

/* ---------- Tabs ---------- */
.tabs{display:flex; gap:6px; margin:18px 0 4px; overflow-x:auto; padding:4px 2px 8px; justify-content:center}
.tabs button{border-radius:999px; padding:10px 16px; min-height:auto; font-size:.82rem; font-weight:600; white-space:nowrap; background:transparent; box-shadow:none; color:var(--muted)}
.tabs button.active{background:#fff; box-shadow:var(--shadow); color:var(--primary-ink)}

/* ---------- Preguntas ---------- */
.q-card{border-radius:20px; padding:20px 18px; margin:16px 0; background:#fff; box-shadow:var(--shadow)}
.q-num{font-size:.64rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--accent)}
.opt-btn{
  display:flex; width:100%; text-align:left; margin:10px 0;
  background:#FFFDF9; border:1.5px solid #EFE7DB;
  border-radius:16px; padding:15px 17px; font-weight:500; color:var(--ink);
  justify-content:flex-start; box-shadow:none; min-height:auto; font-size:.95rem;
}
.opt-btn.selected{border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, #fff); font-weight:700; box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent)}
.opt-btn.correct{border-color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, #fff); font-weight:700}
.opt-btn.wrong{border-color:var(--warn); background:color-mix(in srgb, var(--warn) 9%, #fff)}

/* ---------- Foto (¿Quién es este bebé?) ---------- */
.polaroid{display:block; background:#fff; padding:9px; border-radius:22px; box-shadow:var(--shadow); margin:4px auto 16px; max-width:320px}
.polaroid img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; background:var(--soft)}
.polaroid .cap{text-align:center; font-size:.8rem; font-weight:600; color:var(--muted); margin-top:8px; text-transform:uppercase; letter-spacing:.18em}
.polaroid.small{max-width:120px; padding:6px; margin:0 auto}
.polaroid.small img{border-radius:12px}

/* ---------- Compartir ---------- */
.share-box{display:flex; gap:8px; align-items:center}
.share-box input{flex:1; font-size:.85rem; background:#FFF6E4; border-color:transparent}
#qr-holder{display:flex; justify-content:center; margin:16px 0 6px}
#qr-holder canvas{border-radius:20px; box-shadow:var(--shadow); background:#fff; padding:10px}

/* ---------- Toast / banner ---------- */
#toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(140%);
  background:var(--ink); color:#fff; padding:14px 24px; border-radius:999px;
  font-weight:600; font-size:.9rem; box-shadow:0 10px 26px rgba(0,0,0,.25); z-index:99;
  transition:transform .3s ease; max-width:90vw; text-align:center;
}
#toast.show{transform:translateX(-50%) translateY(0)}
.demo-banner{
  background:#FFF3D6; color:#9A7318; font-weight:600; font-size:.78rem;
  text-align:center; padding:10px 16px; border-radius:16px; margin-bottom:8px;
}

/* ---------- Revelación del ganador ---------- */
#reveal{
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px; text-align:center; overflow-y:auto;
}
#reveal .count{font-family:var(--font-display); font-weight:800; font-size:7rem; color:var(--accent); animation:pop .9s ease}
@keyframes pop{0%{transform:scale(.3); opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1)}}
#reveal .winner-name{font-family:var(--font-display); font-weight:800; font-size:2.6rem; color:var(--primary-ink); line-height:1.1; animation:pop .7s ease}
#reveal .standings{width:100%; max-width:420px; margin-top:18px; text-align:left}

/* ---------- Confeti ---------- */
.confetti{position:fixed; top:-12px; z-index:210; font-size:1.3rem; pointer-events:none; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg); opacity:.85}}
@media (prefers-reduced-motion: reduce){ .confetti{display:none} }

/* ---------- Detalles ---------- */
.divider{border:none; border-top:1px solid #F3EDE3; margin:22px 0}
.footer-note{text-align:center; margin-top:38px; font-size:.76rem; color:var(--muted)}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grow{flex:1}
.answer-table{width:100%; border-collapse:collapse; font-size:.88rem}
.answer-table th,.answer-table td{padding:9px 6px; border-bottom:1px solid #F3EDE3; text-align:left; vertical-align:top}
.answer-table th{font-size:.64rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted)}
.logo-preview{width:72px; height:72px; object-fit:contain; border-radius:16px; background:#fff; box-shadow:var(--shadow); padding:5px}

button:focus-visible, input:focus-visible, .opt-btn:focus-visible{outline:3px solid var(--primary-ink); outline-offset:2px}

@media(min-width:700px){
  html{font-size:17.5px}
  .display{font-size:3rem}
}

/* ---------- Recuerdo (PDF) ---------- */
.k-entry{page-break-inside:avoid; break-inside:avoid}
.k-name{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--primary-ink); margin-bottom:10px}
.k-line{display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #F3EDE3; font-size:.92rem}
.k-line:last-child{border-bottom:none}
.k-q{color:var(--muted)}
.k-a{font-weight:700; text-align:right; white-space:nowrap}
.k-msg{
  margin:12px 0 4px; padding:14px 18px; font-size:1.02rem; line-height:1.65;
  background:color-mix(in srgb, var(--soft) 40%, #fff);
  border-left:4px solid var(--primary); border-radius:0 16px 16px 0;
}

@media print{
  body{background:#fff !important}
  .no-print, .demo-banner, #toast{display:none !important}
  #app{max-width:100%; padding:0}
  .card{box-shadow:none; border:1.5px solid #EFE7DB; margin:10px 0}
  .hero::after{display:none}
  @page{margin:14mm}
}