body{ min-height:100vh; }
.app{
  width:100%; max-width:440px; margin:0 auto;
  display:flex; flex-direction:column; gap:18px;
  padding:20px 14px 60px;
}

/* ---------- header / account ---------- */
header.top{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.eyebrow-label{
  font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand);
}
h1{ font-family:'Baloo 2'; font-weight:700; font-size:28px; margin:0; color:var(--ink); }
.subtitle{ color:var(--ink-soft); font-size:14px; max-width:34ch; }

.account-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:10px 14px; box-shadow:var(--shadow-sm);
}
.account-who{ display:flex; align-items:center; gap:10px; min-width:0; }
.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--teal-soft);
  color:var(--teal-dark); font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.account-name{ font-weight:700; font-size:13.5px; color:var(--ink); }
.account-role{ font-size:11.5px; color:var(--ink-faint); }
.account-role.admin{ color:var(--brand); font-weight:700; }
.icon-btn{
  border:none; background:var(--surface-2); width:32px; height:32px; border-radius:50%;
  cursor:pointer; color:var(--ink-soft); font-size:15px; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.icon-btn:hover{ color:var(--ink); }

.plan-badge{
  align-self:center; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
}
.plan-badge.free{ color:var(--ink-faint); background:var(--surface-2); border:1px solid var(--line); }
.plan-badge.completo{ color:var(--brand-dark); background:var(--brand-soft); }

.sync-badge{
  align-self:center; display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-faint);
  background:var(--surface-2); border:1px solid var(--line);
  padding:4px 10px; border-radius:999px;
}
.sync-dot{ width:7px; height:7px; border-radius:50%; background:var(--success); }
.sync-badge.local .sync-dot{ background:var(--warn); }

/* ---------- selector de pacientes ---------- */
.patient-tabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.patient-tab{
  flex-shrink:0; padding:8px 16px; border-radius:99px; border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink-soft); font-weight:700; font-size:13.5px; cursor:pointer;
  white-space:nowrap;
}
.patient-tab.active{ background:var(--brand); border-color:var(--brand); color:#fff9f5; }
.patient-tab.add{ border-style:dashed; color:var(--ink-faint); }

/* ---------- main card / face ---------- */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:28px;
  box-shadow:var(--shadow); padding:24px 20px 22px;
}
.orientation-hint{ text-align:center; font-size:12.5px; color:var(--ink-faint); margin:0 0 6px; }
.face-wrap{ display:flex; justify-content:center; }
svg.face{ width:100%; max-width:260px; height:auto; overflow:visible; }

.eye{ cursor:pointer; outline:none; }
.eye .hit{ fill:transparent; }
.eye .ring{ fill:none; stroke-width:3; stroke-dasharray:5 6; opacity:0; transition:opacity .18s ease; }
.eye[data-side="derecho"] .ring{ stroke:var(--brand); }
.eye[data-side="izquierdo"] .ring{ stroke:var(--teal); }
.eye:hover .ring, .eye:focus-visible .ring{ opacity:1; }
.eye .eye-visual{ transform-box:fill-box; transform-origin:center; transition:opacity .2s ease, transform .18s ease; }
.eye .eye-patch{ opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.75); transition:opacity .22s ease, transform .22s ease; }
.eye.patched .eye-visual{ opacity:.12; }
.eye.patched .eye-patch{ opacity:1; transform:scale(1); }
.eye:hover .eye-visual, .eye:focus-visible .eye-visual{ transform:scale(1.04); }
@media (prefers-reduced-motion: reduce){ .eye .eye-patch, .eye .eye-visual, .eye .ring{ transition:none; } }

.face-labels{ display:flex; justify-content:space-between; padding:0 13%; margin-top:4px; }
.face-labels span{ font-weight:700; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }

.status{ margin-top:12px; text-align:center; }
.status-date{ font-size:13px; color:var(--ink-faint); font-weight:600; text-transform:capitalize; }
.status-line{ margin-top:6px; display:inline-flex; align-items:center; gap:8px; font-family:'Baloo 2'; font-size:17px; font-weight:600; color:var(--ink); }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:3px 12px; border-radius:999px; font-size:13px; font-weight:700; }
.pill.derecho{ background:var(--brand-soft); color:var(--brand-dark); }
.pill.izquierdo{ background:var(--teal-soft); color:var(--teal-dark); }
.status-empty{ color:var(--ink-faint); font-size:14px; margin-top:6px; }
.status-by{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:3px; font-weight:600; }
.hint-chip{ margin-top:10px; font-size:12.5px; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); display:inline-block; padding:6px 12px; border-radius:14px; }
.undo-link{ display:block; margin:8px auto 0; background:none; border:none; color:var(--ink-faint); font-size:12.5px; font-weight:600; text-decoration:underline; cursor:pointer; padding:4px; }
.undo-link:hover{ color:var(--warn); }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(12px);
  background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:600;
  padding:10px 18px; border-radius:14px; box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  z-index:80; max-width:88vw; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- temporizador ---------- */
.timer-card{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 20px 20px; }
.hourglass-wrap{ width:100%; max-width:150px; }
svg.hourglass{ width:100%; height:auto; display:block; }
.sand-rect{ transition:y 1s linear, height 1s linear; }
.sand-grain{ fill:var(--sand); opacity:0; animation:sandFall 1.1s linear infinite; }
.sand-grain-2{ animation-delay:.55s; }
@keyframes sandFall{ 0%{opacity:0;transform:translateY(0);} 10%{opacity:1;} 90%{opacity:1;} 100%{opacity:0;transform:translateY(7px);} }
.timer-card.idle .sand-grain, .timer-card.done .sand-grain{ animation-play-state:paused; opacity:0; }
.timer-text{ font-family:'Baloo 2'; font-weight:600; font-size:16px; text-align:center; color:var(--ink); margin:0; text-wrap:balance; }
.timer-card.idle .timer-text{ color:var(--ink-faint); font-family:'Figtree'; font-weight:600; font-size:14px; }
.timer-card.done{ animation:timerDonePulse 1.6s ease-in-out infinite; }
.timer-card.done .timer-text{ color:var(--success); }
@keyframes timerDonePulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.02);} }
.timer-card.locked{ position:relative; }
.timer-locked-note{ font-size:12.5px; color:var(--ink-faint); text-align:center; }
.timer-locked-note a{ color:var(--brand-dark); font-weight:700; text-decoration:none; }
@media (prefers-reduced-motion: reduce){ .sand-grain{animation:none;opacity:0;} .timer-card.done{animation:none;} .sand-rect{transition:none;} }

/* ---------- stats ---------- */
.stats-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px 8px; text-align:center; box-shadow:var(--shadow-sm); }
.stat .num{ font-family:'Baloo 2'; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }
.stat .lbl{ font-size:11px; color:var(--ink-faint); font-weight:600; margin-top:2px; }

.action-row{ display:flex; gap:10px; }
.history-btn{
  flex:1; padding:14px; border-radius:18px; border:none; cursor:pointer;
  background:var(--ink); color:var(--bg); font-family:'Baloo 2'; font-weight:600; font-size:15px;
  display:flex; align-items:center; justify-content:center; gap:8px; box-shadow:var(--shadow-sm);
}
.history-btn:hover{ filter:brightness(1.08); }
.history-btn.ghost{ background:var(--surface); color:var(--ink); border:1px solid var(--line); box-shadow:none; }

/* ---------- sheet ---------- */
.scrim{ position:fixed; inset:0; background:rgba(30,22,16,.45); backdrop-filter:blur(1px); opacity:0; pointer-events:none; transition:opacity .22s ease; z-index:40; }
.scrim.show{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:50%; bottom:0; transform:translate(-50%,100%);
  width:100%; max-width:440px; max-height:86vh; overflow-y:auto;
  background:var(--surface); border-radius:26px 26px 0 0; box-shadow:var(--shadow);
  padding:16px 18px 26px; transition:transform .28s cubic-bezier(.32,.72,0,1); z-index:50;
}
.sheet.show{ transform:translate(-50%,0); }
.sheet-handle{ width:40px; height:4px; background:var(--line); border-radius:99px; margin:0 auto 12px; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.sheet-head h2{ font-family:'Baloo 2'; font-size:19px; margin:0; }

section.block{ margin-bottom:20px; }
.block-title{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }

.balance-bar{ height:12px; border-radius:99px; overflow:hidden; display:flex; background:var(--line); }
.balance-bar div{ height:100%; }
.balance-legend{ display:flex; justify-content:space-between; font-size:12px; color:var(--ink-soft); margin-top:6px; font-weight:600; }

.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal-heads{ margin-bottom:5px; }
.cal-heads span{ text-align:center; font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; }
.cal-cell{
  aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:var(--ink-faint); background:var(--surface-2);
  border:1px solid var(--line); position:relative;
}
.cal-cell.derecho{ background:var(--brand); color:#fff; border-color:transparent; }
.cal-cell.izquierdo{ background:var(--teal); color:#fff; border-color:transparent; }
.cal-cell.today{ box-shadow:0 0 0 2px var(--ink); }
.cal-cell.blank{ background:transparent; border-color:transparent; }
.cal-legend{ display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }
.cal-legend span{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft); font-weight:600; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }

.addform{
  display:none; background:var(--surface-2); border:1px solid var(--line); border-radius:16px;
  padding:14px; margin-top:10px; gap:10px; flex-direction:column;
}
.addform.show{ display:flex; }
.addform label{ font-size:12px; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:4px; }
.addform input[type="date"], .addform input[type="time"], .addform input[type="email"], .addform input[type="text"], .addform input[type="number"]{
  width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:13.5px;
}
.seg{ display:flex; gap:8px; }
.seg.wrap{ flex-wrap:wrap; }
.seg button{ flex:1; padding:9px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:700; font-size:13px; cursor:pointer; }
.seg.wrap button{ flex:1 1 calc(50% - 4px); }
.seg button.active[data-side="derecho"]{ background:var(--brand-soft); color:var(--brand-dark); border-color:var(--brand); }
.seg button.active[data-side="izquierdo"]{ background:var(--teal-soft); color:var(--teal-dark); border-color:var(--teal); }
.seg button.active{ background:var(--brand-soft); color:var(--brand-dark); border-color:var(--brand); }

.swatch-row{ display:flex; gap:10px; flex-wrap:wrap; }
.swatch{
  width:36px; height:36px; border-radius:50%; border:3px solid transparent;
  cursor:pointer; box-shadow:0 0 0 1px var(--line) inset; padding:0;
}
.swatch.active{ border-color:var(--ink); }
.addform .row-btns{ display:flex; gap:8px; margin-top:2px; }
.addform .row-btns button{ flex:1; padding:10px; border-radius:10px; border:none; font-weight:700; cursor:pointer; font-size:13px; }
.btn-save{ background:var(--ink); color:var(--bg); }
.btn-save.small{ padding:9px 14px; border-radius:10px; font-size:12.5px; margin-left:auto; flex:none; }
.btn-cancel{ background:transparent; color:var(--ink-faint); }

.add-toggle{
  background:none; border:1px dashed var(--line); color:var(--ink-soft); font-weight:700;
  font-size:12.5px; padding:8px 12px; border-radius:12px; cursor:pointer; width:100%; margin-top:10px;
}
.add-toggle:hover{ color:var(--ink); border-color:var(--ink-faint); }

.list{ display:flex; flex-direction:column; gap:8px; }
.row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
.row .side-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.row .side-dot.derecho{ background:var(--brand); }
.row .side-dot.izquierdo{ background:var(--teal); }
.row .txt{ flex:1; min-width:0; }
.row .d1{ font-size:13.5px; font-weight:700; color:var(--ink); text-transform:capitalize; }
.row .d2{ font-size:12px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.row .del{ border:none; background:none; color:var(--ink-faint); cursor:pointer; font-size:14px; padding:6px; border-radius:8px; flex-shrink:0; }
.row .del:hover{ color:var(--warn); background:var(--surface); }
.row.confirm{ background:var(--brand-soft); }
.row .confirm-actions{ display:flex; gap:6px; flex-shrink:0; }
.row .confirm-actions button{ border:none; border-radius:8px; padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; }
.yes-del{ background:var(--warn); color:#fff; }
.no-del{ background:var(--surface); color:var(--ink-soft); }

.empty-state{ text-align:center; padding:22px 10px; color:var(--ink-faint); font-size:13.5px; }
.empty-state .big{ font-size:30px; display:block; margin-bottom:6px; }

/* people / plan */
.people-list{ display:flex; flex-direction:column; gap:8px; }
.person-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); }
.person-row .p-name{ font-weight:700; font-size:13px; flex:1; }
.badge-admin{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--brand-dark); background:var(--brand-soft); padding:2px 8px; border-radius:99px; }

.upsell-box{
  background:linear-gradient(160deg, var(--brand-soft), var(--surface) 130%);
  border:1px solid var(--brand); border-radius:16px;
  padding:16px 18px; text-align:center;
}
.upsell-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color:#fff9f5; background:var(--brand); padding:3px 10px; border-radius:99px; margin-bottom:8px;
}
.upsell-box p{ font-size:13.5px; color:var(--brand-dark); line-height:1.5; margin:0 0 10px; }
.upsell-box .btn-brand{
  display:inline-block; background:var(--brand); color:#fff9f5; font-weight:700; font-size:13.5px;
  padding:10px 18px; border-radius:12px; text-decoration:none; border:none; cursor:pointer;
  box-shadow:0 8px 18px -10px rgba(225,103,63,.6);
}

.plan-lista{ list-style:none; margin:0 0 4px; padding:0; display:flex; flex-direction:column; gap:7px; }
.plan-lista li{ display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.plan-lista .ico{ flex-shrink:0; }

.redeem-row{ display:flex; gap:8px; }
.redeem-row input{ flex:1; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13.5px; text-transform:uppercase; letter-spacing:.05em; }

.codigo-item{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); font-size:13px; }
.codigo-item code{ font-weight:700; letter-spacing:.05em; }
.codigo-item .estado{ margin-left:auto; font-size:11px; font-weight:700; padding:2px 8px; border-radius:99px; }
.codigo-item .estado.libre{ background:var(--success-soft); color:var(--success); }
.codigo-item .estado.usado{ background:var(--surface); color:var(--ink-faint); border:1px solid var(--line); }

/* panel dueño: negocio */
.stat-tile{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:14px 8px; border-radius:14px; background:var(--surface-2); border:1px solid var(--line); }
.stat-tile .stat-num{ font-size:22px; font-weight:800; color:var(--brand-dark); font-variant-numeric:tabular-nums; }
.stat-tile .stat-label{ font-size:11px; color:var(--ink-faint); text-align:center; }
.cliente-item{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); font-size:12.5px; }
.cliente-item .c-top{ display:flex; align-items:center; gap:8px; }
.cliente-item .c-nombre{ font-weight:700; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cliente-item .c-plan{ font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:99px; flex-shrink:0; }
.cliente-item .c-plan.completo{ background:var(--success-soft); color:var(--success); }
.cliente-item .c-plan.free{ background:var(--surface); color:var(--ink-faint); border:1px solid var(--line); }
.cliente-item .c-meta{ color:var(--ink-faint); }

footer.note{ text-align:center; font-size:11.5px; color:var(--ink-faint); padding-top:4px; }

/* ---------- login / auth overlays ---------- */
.auth-overlay{
  position:fixed; inset:0; background:var(--bg); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:24px; overflow-y:auto;
}
.auth-box{
  width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line);
  border-radius:26px; box-shadow:var(--shadow); padding:30px 26px; text-align:center; margin:auto;
}
.auth-icon{ font-size:38px; margin-bottom:6px; }
.auth-box h2{ font-family:'Baloo 2'; font-size:22px; margin:0 0 4px; }
.auth-box p.muted{ color:var(--ink-soft); font-size:13.5px; margin:0 0 18px; }
.field{ text-align:left; margin-bottom:12px; }
.field label{ font-size:12px; font-weight:700; color:var(--ink-soft); display:block; margin-bottom:4px; }
.field input{ width:100%; padding:11px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:14px; }
.field input:focus{ outline:2px solid var(--teal); outline-offset:1px; }
.btn-primary{
  width:100%; padding:12px; border-radius:14px; border:none; cursor:pointer;
  background:var(--ink); color:var(--bg); font-weight:700; font-size:14.5px; font-family:'Baloo 2';
  margin-top:4px;
}
.btn-primary:hover{ filter:brightness(1.08); }
.btn-link{ background:none; border:none; color:var(--ink-faint); font-size:12.5px; text-decoration:underline; cursor:pointer; margin-top:12px; }
.auth-error{ color:var(--danger); font-size:12.5px; margin:0 0 12px; }
.auth-note{ color:var(--ink-faint); font-size:11.5px; margin-top:16px; line-height:1.5; }

/* ---------- juego de vestir (plan completo) — portado de Ojitos de Mili ---------- */
.juego-entrar{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  padding:14px 16px; border-radius:20px; border:none; color:#fff;
  background:linear-gradient(120deg,#d0487e,#7e57c2 55%,#4a78c2); box-shadow:var(--shadow-sm);
  margin-top:10px;
}
.juego-entrar .je-emoji{ font-size:30px; }
.juego-entrar strong{ display:block; font-family:'Baloo 2'; font-size:17px; font-weight:700; }
.juego-entrar small{ display:block; font-size:12.5px; opacity:.9; }
.juego-entrar .je-flecha{ margin-left:auto; font-size:26px; opacity:.85; }

body.jugando, body.con-camara{ overflow:hidden; }
.juego{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  height:100vh; height:100dvh; max-width:560px; margin:0 auto;
  background:linear-gradient(180deg,var(--teal-soft),var(--bg) 45%);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.juego-top{ display:flex; align-items:center; gap:8px; padding:10px 12px 4px; }
.juego-titulo{ flex:1; min-width:0; line-height:1.1; }
.juego-titulo strong{ display:block; font-family:'Baloo 2'; font-size:20px; color:var(--ink); }
.juego-titulo small{ font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }
.juego-reloj{
  font-weight:800; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-soft);
  background:var(--surface); border:1px solid var(--line); padding:5px 10px; border-radius:99px;
}
.juego-reloj.poco{ color:var(--danger); border-color:var(--danger); }

.juego-genero{ display:flex; gap:8px; padding:4px 12px 2px; flex-shrink:0; overflow-x:auto; scrollbar-width:none; }
.juego-genero::-webkit-scrollbar{ display:none; }
.juego-genero button{ flex:1 0 auto; }
.juego-genero button{
  flex:1; padding:8px 4px; border-radius:99px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-soft); font-weight:800; font-size:12px; cursor:pointer; white-space:nowrap;
}
.juego-genero button.activo{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

.juego-personajes{ display:flex; gap:8px; overflow-x:auto; padding:6px 12px; scrollbar-width:none; flex-shrink:0; }
.juego-personajes::-webkit-scrollbar{ display:none; }
.jpersonaje{
  flex-shrink:0; width:62px; padding:4px 2px 5px; border-radius:16px; cursor:pointer;
  border:2px solid transparent; background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:1px;
}
.jpersonaje svg{ width:46px; height:46px; }
.jpersonaje span{ font-size:11px; font-weight:700; color:var(--ink-soft); }
.jpersonaje.activo{ border-color:var(--brand); background:var(--brand-soft); }
.jpersonaje.activo span{ color:var(--brand-dark); }

.juego-escenario{
  flex:1; min-height:0; display:flex; justify-content:center; align-items:center; margin:4px 12px;
  border-radius:24px; border:2px dashed transparent; transition:border-color .15s ease, background .15s ease;
  position:relative;
}
.juego-escenario.sobre{ border-color:var(--brand); background:var(--brand-soft); }
.juego-escenario svg{ height:100%; max-height:100%; width:auto; max-width:100%; overflow:visible; }
.juego-escenario svg.pop{ animation:juego-pop .32s ease; }
@keyframes juego-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.04) rotate(-1deg); } 100%{ transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ .juego-escenario svg.pop{ animation:none; } }

.juego-armario{
  flex-shrink:0; background:var(--surface); border-radius:24px 24px 0 0; box-shadow:0 -10px 30px -20px rgba(42,39,64,.45);
  padding:10px 0 8px;
}
.juego-cats{ display:flex; gap:6px; overflow-x:auto; padding:0 12px 8px; scrollbar-width:none; }
.juego-cats::-webkit-scrollbar{ display:none; }
.juego-cats button{
  flex-shrink:0; display:flex; align-items:center; gap:5px; padding:7px 11px; border-radius:99px;
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); font-weight:700; font-size:12.5px; cursor:pointer;
}
.juego-cats button span{ font-size:15px; }
.juego-cats button.activo{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.juego-items{
  display:flex; gap:8px; overflow-x:auto; padding:8px 12px 6px; touch-action:pan-x; scrollbar-width:none;
}
.juego-items::-webkit-scrollbar{ display:none; }
.jitem{
  position:relative; flex-shrink:0; width:76px; height:76px; padding:6px; border-radius:18px; cursor:grab;
  border:2px solid var(--line); background:var(--surface-2); display:flex; align-items:center; justify-content:center;
}
.jitem svg{ width:100%; height:100%; pointer-events:none; }
.jitem.puesto{ border-color:var(--success); background:var(--success-soft); }
.jitem.puesto::after{
  content:'✓'; position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:var(--success); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.jitem.fantasma{ position:fixed; z-index:90; pointer-events:none; transform:scale(1.15) rotate(-4deg); box-shadow:var(--shadow); opacity:.95; }
.jtxt{ font-size:11px; font-weight:800; text-align:center; line-height:1.15; color:var(--ink-soft); }
.jcolor{ width:44px; height:44px; border-radius:50%; box-shadow:inset -6px -6px 0 rgba(0,0,0,.15), inset 5px 5px 0 rgba(255,255,255,.25); }
.juego-ayuda{ text-align:center; font-size:11.5px; color:var(--ink-faint); margin:2px 0 0; }

.juego-fin{
  position:absolute; inset:0; z-index:95; background:rgba(20,18,35,.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.juego-fin-box{ background:var(--surface); border-radius:26px; padding:26px 22px; text-align:center; max-width:320px; box-shadow:var(--shadow); }
.juego-fin-box .big{ font-size:48px; }
.juego-fin-box h2{ font-family:'Baloo 2'; margin:6px 0; color:var(--ink); }
.juego-fin-box p{ color:var(--ink-soft); font-size:14px; line-height:1.5; }
.juego-fin-box button{ margin-top:8px; width:100%; padding:12px; border:none; border-radius:14px; font-weight:700; font-size:15px; cursor:pointer; }

/* botones sobre el escenario del juego */
.juego-acciones{ display:flex; gap:8px; padding:2px 12px 0; flex-shrink:0; }
.juego-acciones button{
  flex:1; padding:8px 6px; border-radius:14px; border:1px solid var(--line); cursor:pointer;
  background:var(--surface); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; gap:6px;
}
.juego-acciones .ja-ico{ font-size:17px; line-height:1; }
.juego-acciones .ja-txt{ font-size:12.5px; font-weight:800; }
.juego-acciones .ja-foto{ background:linear-gradient(135deg,#d0487e,#7e57c2); color:#fff; border:none; }
.juego-acciones button.confirmar{ background:var(--danger); border-color:var(--danger); color:#fff; }


/* ---------- personalizar apariencia: vista previa en vivo + pestañas (como en Ojitos de Mili) ---------- */
.sheet-avatar{ padding-top:10px; }
.avatar-preview{
  position:sticky; top:-10px; z-index:2; margin:0 -18px 10px; padding:6px 0 10px;
  background:var(--surface); border-bottom:1px solid var(--line);
  display:flex; justify-content:center;
}
.avatar-preview svg.face{ height:220px; width:auto; max-width:none; overflow:visible; }
.face-preview .eye{ cursor:default; }
.avatar-tabs{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; scrollbar-width:none; }
.avatar-tabs::-webkit-scrollbar{ display:none; }
.avatar-tabs button{
  flex-shrink:0; padding:8px 13px; border-radius:99px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); font-weight:700; font-size:13px; cursor:pointer;
}
.avatar-tabs button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.avatar-actions{
  position:sticky; bottom:-26px; display:flex; gap:8px; margin:6px -18px -26px; padding:12px 18px 22px;
  background:var(--surface); border-top:1px solid var(--line);
}
.avatar-actions button{ flex:1; padding:12px; border-radius:12px; border:1px solid transparent; font-weight:700; font-size:14px; cursor:pointer; }
.avatar-actions .btn-cancel{ border-color:var(--line); }


/* ---------- cámara del juego de vestir (portada de Ojitos de Mili) ---------- */
.camara{ position:fixed; inset:0; z-index:85; max-width:560px; margin:0 auto; background:#000; color:#fff; display:flex; flex-direction:column; }
.cam-vista{ position:relative; flex:1; min-height:0; overflow:hidden; background:#111; }
.cam-vista video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam-vista video.selfie{ transform:scaleX(-1); }
.cam-sin{
  position:absolute; inset:0; display:flex; align-items:flex-start; justify-content:center; padding:70px 24px 0; text-align:center;
  background:linear-gradient(135deg,#f9c5d9,#d9c8f5 50%,#bfe3f7); color:#2a2740; font-weight:700;
}
.cam-sin small{ font-weight:500; font-size:12.5px; }
.cam-personaje{ position:absolute; touch-action:none; cursor:grab; filter:drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.cam-personaje svg{ width:100%; height:100%; overflow:visible; }
.cam-flash{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.cam-flash.activo{ animation:cam-flash .45s ease-out; }
@keyframes cam-flash{ 0%{ opacity:.95; } 100%{ opacity:0; } }
.cam-flash-full{ display:none; }
.cam-top{
  position:absolute; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; background:linear-gradient(rgba(0,0,0,.45),transparent);
}
.cam-ayuda{ font-size:12.5px; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.cam-btn{
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; font-size:18px; color:#fff;
  background:rgba(0,0,0,.4); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.cam-abajo{ flex-shrink:0; padding:10px 18px calc(env(safe-area-inset-bottom) + 14px); background:#000; }
.cam-tamano{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.cam-tamano input{ flex:1; accent-color:#e88fae; }
.cam-controles{ display:flex; align-items:center; justify-content:space-between; }
.cam-galeria{
  position:relative; width:52px; height:52px; border-radius:14px; border:2px solid rgba(255,255,255,.7); padding:0; overflow:hidden;
  background:rgba(255,255,255,.12); cursor:pointer; font-size:22px; display:flex; align-items:center; justify-content:center;
}
.cam-galeria img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam-disparo{
  width:74px; height:74px; border-radius:50%; cursor:pointer; background:#fff;
  border:6px solid rgba(255,255,255,.35); background-clip:padding-box; box-shadow:0 0 0 3px #fff;
}
.cam-disparo:active{ transform:scale(.93); }
.cam-resultado{
  position:absolute; inset:0; z-index:3; background:#000; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 18px);
}
.cam-resultado img{ max-width:100%; min-height:0; flex:1; object-fit:contain; border-radius:18px; }
.cam-res-botones{ display:flex; gap:10px; width:100%; max-width:420px; }
.cam-res-botones button{ flex:1; padding:13px 10px; border-radius:14px; border:none; font-weight:800; font-size:14px; cursor:pointer; }
#camOtra{ background:rgba(255,255,255,.15); color:#fff; }
.cam-borrar{ background:none; border:none; color:#ff9a8a; font-weight:700; font-size:13px; cursor:pointer; }
.cam-galeria-vista{
  position:absolute; inset:0; z-index:2; background:#111; overflow-y:auto;
  padding:calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 16px);
}
.cam-gal-top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; font-family:'Baloo 2'; font-size:19px; }
.cam-gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cam-gal-item{ aspect-ratio:3/4; padding:0; border:none; border-radius:10px; overflow:hidden; cursor:pointer; background:#222; }
.cam-gal-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-gal-vacio{ grid-column:1 / -1; text-align:center; color:#bbb; padding:40px 0; }
.cam-gal-nota{ font-size:12px; color:#aaa; text-align:center; margin-top:14px; line-height:1.5; }


/* cámara: poses, IA y parche */
.cam-poses{ display:flex; gap:6px; overflow-x:auto; margin-bottom:8px; scrollbar-width:none; }
.cam-poses::-webkit-scrollbar{ display:none; }
.cam-poses button, .cam-chip{
  flex-shrink:0; padding:7px 11px; border-radius:99px; border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1); color:#fff; font-weight:700; font-size:12.5px; cursor:pointer;
}
.cam-poses button.activo, .cam-chip.activo{ background:#fff; color:#2a2740; border-color:#fff; }
.cam-extras{ display:flex; gap:8px; margin-bottom:8px; }

/* poses animadas (en la foto queda la pose quieta) */
.cam-personaje svg{ transform-origin:50% 100%; }
.cam-personaje .brazo{ transform-box:view-box; }
.cam-personaje.pose-normal svg{ animation:cam-respira 2.4s ease-in-out infinite; }
.cam-personaje.pose-saludo .brazo-der{ transform-origin:202px 298px; animation:cam-saluda .45s ease-in-out infinite alternate; }
.cam-personaje.pose-abrazo svg{ animation:cam-mece 1.6s ease-in-out infinite; }
.cam-personaje.pose-victoria .brazo-der{ transform-origin:202px 298px; animation:cam-v 1s ease-in-out infinite; }
.cam-personaje.pose-corazon .corazon-manos{ transform-box:fill-box; transform-origin:center; animation:cam-late .8s ease-in-out infinite; }
.cam-personaje.pose-hurra svg{ animation:cam-salta .7s ease-in-out infinite; }
@keyframes cam-respira{ 50%{ transform:scale(1.015,.99); } }
@keyframes cam-saluda{ from{ transform:rotate(-14deg); } to{ transform:rotate(12deg); } }
@keyframes cam-mece{ 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } }
@keyframes cam-v{ 50%{ transform:rotate(-9deg); } }
@keyframes cam-late{ 50%{ transform:scale(1.18); } }
@keyframes cam-salta{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7%); } }
@media (prefers-reduced-motion: reduce){ .cam-personaje svg, .cam-personaje .brazo, .cam-personaje .corazon-manos{ animation:none !important; } }

/* realidad aumentada (js/ar.js) */
.cam-ra{ position:absolute; inset:0; width:100%; height:100%; }
.cam-vista video.oculto{ opacity:0; }
.cam-efectos{ align-items:center; }
.cam-efectos-titulo{ flex-shrink:0; font-size:12px; font-weight:800; color:#f6d26b; }
.cam-efectos button.activo{ background:#f6d26b; color:#2a2740; border-color:#f6d26b; }
.cam-btn.invisible{ visibility:hidden; }

/* cuenta regresiva de la foto */
.cam-cuenta{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none;
  font-weight:800; font-size:140px; color:#fff; text-shadow:0 6px 24px rgba(0,0,0,.45);
}
.cam-cuenta.late{ animation:cam-cuenta 1s ease-out; }
@keyframes cam-cuenta{ 0%{ transform:scale(1.8); opacity:0; } 25%{ transform:scale(1); opacity:1; } 100%{ transform:scale(.8); opacity:0; } }

/* ---- control del tratamiento (portado de Ojitos de Mili) ---- */
.btn-sacar{ display:block; margin:12px auto 0; padding:10px 18px; border-radius:14px; border:none; cursor:pointer; background:var(--success); color:#fff; font-weight:800; font-size:14px; box-shadow:0 4px 12px rgba(0,0,0,.12); }
.btn-sacar:active{ transform:scale(.97); }
.btn-sacar.hecho{ background:transparent; color:var(--ink-faint); font-weight:700; font-size:12.5px; border:1px dashed var(--line); box-shadow:none; }
.trat-sub{ font-size:12px; color:var(--ink-faint); margin:0 0 4px; }
.trat-label{ display:block; margin:14px 0 6px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.trat-input{ width:100%; padding:9px 10px; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:14px; font-family:inherit; }
.trat-check{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:12.5px; color:var(--ink-soft); }
#indDiasSeg button{ flex:1 1 36px; padding:9px 2px; }
.cal-cell.libre{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); color:var(--ink-faint); }

/* premio de la semana */
.premio-card{ padding:16px 16px 14px; text-align:center; background:linear-gradient(135deg, #fff6d6, #ffe3ef); border-color:#f3d58a; color:#5a4630; }
.premio-card.logrado{ background:linear-gradient(135deg, #e3f8e5, #fff6d6); border-color:#9bd4a0; animation:premio-brillo 2.4s ease-in-out infinite; }
@keyframes premio-brillo{ 50%{ box-shadow:0 0 0 6px rgba(155,212,160,.35), var(--shadow); } }
.pr-titulo{ font-family:'Baloo 2'; font-weight:800; font-size:17px; line-height:1.2; }
.pr-sub{ font-size:12.5px; font-weight:700; opacity:.8; margin-top:2px; }
.pr-dias{ display:flex; justify-content:center; gap:6px; margin-top:10px; }
.pr-dia{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.pr-dia i{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:17px; background:rgba(255,255,255,.75); border:2px dashed #e2c37a; }
.pr-dia.hecho i{ border-style:solid; border-color:#f2c14e; background:#fff; }
.pr-dia.libre i{ border-color:transparent; background:rgba(255,255,255,.35); }
.pr-dia.hoy i{ box-shadow:0 0 0 2px #e8578a; }
.pr-dia b{ font-size:10.5px; font-weight:800; opacity:.75; }
.pr-dia.futuro{ opacity:.55; }

/* aviso del próximo control */
.control-card{ display:block; width:100%; text-align:left; cursor:pointer; padding:12px 14px; border-radius:18px; margin-bottom:14px; background:var(--teal-soft); color:var(--teal-dark); border:1px solid var(--line); font-family:inherit; font-weight:800; font-size:13.5px; }
.control-card.pronto{ background:var(--brand-soft); color:var(--brand-dark); }

/* esta semana */
.semana{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; align-items:end; }
.sem-dia{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.sem-barra{ position:relative; width:100%; max-width:34px; height:88px; background:var(--surface-2); border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.sem-barra span{ position:absolute; left:0; right:0; bottom:0; background:var(--success); border-radius:7px 7px 0 0; transition:height .4s ease; }
.sem-dia.derecho .sem-barra span{ background:var(--brand); }
.sem-dia.izquierdo .sem-barra span{ background:var(--teal); }
.sem-dia.estimado .sem-barra span{ opacity:.45; }
.sem-dia.encurso .sem-barra span{ animation:sem-late 1.6s ease-in-out infinite; }
@keyframes sem-late{ 50%{ opacity:.6; } }
.sem-barra i{ position:absolute; left:0; right:0; border-top:2px dashed var(--ink-faint); z-index:1; }
.sem-dia.libre .sem-barra{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 4px, transparent 4px, transparent 8px); }
.sem-dia b{ font-size:11px; font-weight:800; color:var(--ink-soft); }
.sem-dia.hoy b{ color:var(--ink); text-decoration:underline; }
.sem-dia small{ font-size:10px; font-weight:700; color:var(--ink-faint); min-height:12px; }
.sem-dia.futuro{ opacity:.5; }

/* informe para el doctor */
.informe{ position:fixed; inset:0; z-index:90; background:#e9e6e1; display:flex; flex-direction:column; }
.informe-barra{ display:flex; align-items:center; gap:8px; padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; background:var(--surface); border-bottom:1px solid var(--line); }
.informe-barra strong{ flex:1; font-family:'Baloo 2'; font-size:18px; color:var(--ink); }
.informe-barra .btn-save.small{ margin-left:0; }
.informe-hoja{ flex:1; overflow-y:auto; margin:12px auto; width:calc(100% - 24px); max-width:720px; padding:22px 20px; background:#fff; color:#222; border-radius:10px; box-shadow:0 2px 12px rgba(0,0,0,.12); font-size:13px; line-height:1.45; }
.inf-cab h1{ font-family:'Baloo 2'; font-size:22px; margin:0; color:#222; }
.inf-cab p{ margin:2px 0 12px; color:#555; font-weight:600; }
.inf-ind{ background:#f4f1ec; padding:8px 10px; border-radius:8px; margin:0 0 12px; }
.inf-cifras{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:10px; }
.inf-cifras div{ border:1px solid #ddd; border-radius:8px; padding:8px 6px; text-align:center; }
.inf-cifras b{ display:block; font-size:18px; font-family:'Baloo 2'; color:#2f7d4a; }
.inf-cifras span{ font-size:11px; color:#555; line-height:1.25; display:block; }
@media (max-width:480px){ .inf-cifras{ grid-template-columns:repeat(2,1fr); } }
.inf-nota{ font-size:12px; color:#555; margin:0 0 6px; }
.informe-hoja h2{ font-family:'Baloo 2'; font-size:16px; margin:16px 0 6px; color:#222; }
.inf-tabla{ width:100%; border-collapse:collapse; font-size:12px; }
.inf-tabla th, .inf-tabla td{ border-bottom:1px solid #e5e5e5; padding:5px 6px; text-align:left; }
.inf-tabla th{ background:#f4f1ec; font-weight:800; }
.inf-tabla tr.falta td{ color:#b0413e; }
.inf-tabla small{ color:#888; }
.inf-preg{ margin:4px 0; padding-left:20px; }
.inf-pie{ margin-top:18px; font-size:11px; color:#888; border-top:1px solid #eee; padding-top:8px; }
body.con-informe{ overflow:hidden; }
@media print{
  body > *:not(#informe){ display:none !important; }
  body{ background:#fff !important; }
  .informe{ position:static; display:block !important; background:#fff; }
  .informe-barra{ display:none; }
  .informe-hoja{ box-shadow:none; margin:0; width:100%; max-width:none; padding:0; overflow:visible; }
  .inf-tabla tr{ break-inside:avoid; }
}
@media (prefers-reduced-motion: reduce){ .premio-card.logrado, .sem-dia.encurso .sem-barra span{ animation:none; } }

/* ---------- cámara estilo Snapchat (v17) ---------- */
.cam-fuente{ position:absolute; width:2px; height:2px; opacity:0; pointer-events:none; left:0; top:0; }
.cam-ra{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; display:block; }
.cam-top{ position:absolute; left:0; right:0; top:0; z-index:3; }
.cam-ayuda{ text-align:center; flex:1; padding:0 8px; }
.cam-lado{ position:absolute; right:10px; top:calc(env(safe-area-inset-top) + 72px); z-index:3; display:flex; flex-direction:column; gap:8px; }
.cam-lado .cam-btn{ width:38px; height:38px; font-size:16px; }
.cam-lado .cam-btn.activo{ background:#fff; color:#2a2740; }
.cam-rec{ position:absolute; top:62px; left:50%; transform:translateX(-50%); z-index:3; background:#e8375e; color:#fff; font-weight:800; font-size:13px; padding:4px 12px; border-radius:99px; animation:cam-parpadeo 1s steps(2) infinite; }
@keyframes cam-parpadeo{ 50%{ opacity:.7; } }
.cam-aviso{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); z-index:3; background:rgba(0,0,0,.55); color:#fff; font-weight:800; font-size:17px; padding:10px 18px; border-radius:16px; pointer-events:none; white-space:nowrap; }
.cam-aviso.sale{ animation:cam-aviso 1.4s ease-out forwards; }
@keyframes cam-aviso{ 0%{ opacity:0; transform:translate(-50%,-40%) scale(.9); } 15%,70%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 100%{ opacity:0; } }
.cam-abajo{ padding-top:8px; }
.cam-tabs{ display:flex; justify-content:center; gap:4px; margin-bottom:8px; }
.cam-tabs button{ background:none; border:none; color:rgba(255,255,255,.65); font-weight:800; font-size:13px; padding:6px 10px; border-radius:99px; cursor:pointer; }
.cam-tabs button.activo{ color:#2a2740; background:#fff; }
.cam-carrusel{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:none; }
.cam-carrusel::-webkit-scrollbar{ display:none; }
.cam-item{ flex:0 0 auto; width:62px; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none; color:#fff; cursor:pointer; scroll-snap-align:center; padding:0; }
.cam-item-e{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-size:26px; background:rgba(255,255,255,.14); border:2px solid transparent; transition:transform .15s; }
.cam-item-n{ font-size:10.5px; font-weight:700; line-height:1.15; text-align:center; opacity:.85; }
.cam-item.activo .cam-item-e{ border-color:#f6d26b; background:rgba(246,210,107,.25); transform:scale(1.08); }
.cam-item.activo .cam-item-n{ color:#f6d26b; opacity:1; }
.cam-pista{ width:52px; font-size:10px; line-height:1.3; color:rgba(255,255,255,.6); text-align:center; }
.cam-disparo{ position:relative; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:transform .15s; }
.cam-disparo.apretado{ transform:scale(.92); }
.cam-disparo.grabando{ transform:scale(1.12); background:#e8375e; }
.cam-disparo.grabando::after{ content:''; position:absolute; inset:-7px; border-radius:50%;
  background:conic-gradient(#e8375e calc(var(--p, 0) * 360deg), rgba(255,255,255,.25) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.cam-resultado video{ max-width:100%; min-height:0; flex:1; object-fit:contain; border-radius:18px; background:#000; }
.cam-gal-item{ position:relative; }
.cam-gal-item video{ width:100%; height:100%; object-fit:cover; display:block; }
.cam-gal-play{ position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; border-radius:99px; padding:2px 7px; }
@media (prefers-reduced-motion: reduce){ .cam-rec, .cam-aviso.sale{ animation:none; } }

/* sin cámara: el fondo de colores lo pinta ar.js en el canvas (con el personaje encima); acá solo va el aviso */
.cam-sin{ background:none; pointer-events:none; z-index:2; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.55); padding-top:108px; }
/* ---------- juegos con el parche ---------- */
.jp-entrar{ background:linear-gradient(120deg,#3fb8b0,#4a78c2 60%,#7e57c2); }

.jp{
  position:fixed; inset:0; z-index:70; display:flex; flex-direction:column;
  height:100vh; height:100dvh; max-width:560px; margin:0 auto;
  background:linear-gradient(180deg,var(--brand-soft),var(--bg) 40%);
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.jp-top{ display:flex; align-items:center; gap:10px; padding:10px 12px 6px; }
.jp-titulo{ flex:1; min-width:0; line-height:1.15; }
.jp-titulo strong{ display:block; font-family:'Baloo 2'; font-size:20px; color:var(--ink); }
.jp-titulo small{ font-size:12px; font-weight:700; color:var(--ink-faint); }
.jp-estrellas{ font-weight:800; font-size:14px; color:var(--warn); background:var(--surface); border:1px solid var(--line); padding:5px 11px; border-radius:99px; }
.jp-cuerpo{ flex:1; min-height:0; overflow-y:auto; padding:6px 14px 14px; display:flex; flex-direction:column; }

.jp-menu{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jp-tarjeta{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; cursor:pointer;
  padding:14px; border-radius:20px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); color:var(--ink);
}
.jp-tarjeta:first-child{ grid-column:1 / -1; }
.jp-tarjeta .jp-emoji{ font-size:30px; }
.jp-tarjeta strong{ font-family:'Baloo 2'; font-size:17px; }
.jp-tarjeta small{ font-size:12.5px; color:var(--ink-soft); }
.jp-nivel{ margin-top:6px; font-size:11px; font-weight:800; color:var(--teal); background:var(--teal-soft); padding:2px 8px; border-radius:99px; }
.jp-nota{ font-size:12px; color:var(--ink-faint); line-height:1.5; text-align:center; margin:16px 6px 0; }

.jp-aviso{ margin:auto; text-align:center; max-width:320px; }
.jp-aviso .big{ font-size:56px; }
.jp-aviso h2{ font-family:'Baloo 2'; color:var(--ink); margin:6px 0; }
.jp-aviso p{ color:var(--ink-soft); line-height:1.5; }

.jp-area{ flex:1; min-height:0; display:flex; flex-direction:column; }
.jp-consigna{ font-size:14px; color:var(--ink-soft); text-align:center; margin:0 0 10px; line-height:1.4; }
.jp-consigna strong{ color:var(--ink); }
.jp-cuenta{ display:inline-block; margin-left:6px; font-weight:800; color:var(--brand); background:var(--brand-soft); padding:1px 8px; border-radius:99px; }

/* diferencias */
.jp-dif{ flex:1; min-height:0; display:flex; gap:8px; }
.jp-dif-caja{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:6px; }
.jp-dif-caja svg{ width:100%; height:100%; max-height:100%; touch-action:manipulation; }
@media (max-aspect-ratio: 4/5){ .jp-dif{ flex-direction:column; } .jp-dif-caja{ min-height:0; } }
.jp-marca{ fill:none; stroke:#e8578a; stroke-width:5; animation:jp-aparece .3s ease; }
.jp-fallo{ fill:#c85a4a; font-size:34px; font-weight:800; text-anchor:middle; dominant-baseline:middle; animation:jp-desaparece .7s ease forwards; }
@keyframes jp-aparece{ from{ opacity:0; transform:scale(.6); transform-origin:center; } }
@keyframes jp-desaparece{ to{ opacity:0; } }

/* busca a… */
.jp-busca-obj{ display:flex; align-items:center; justify-content:center; gap:10px; font-weight:800; color:var(--ink-soft); margin-bottom:8px; }
.jp-busca-obj #jpObjetivo{ width:90px; height:90px; background:var(--surface); border:2px solid var(--brand); border-radius:16px; padding:3px; }
.jp-busca-obj svg{ width:100%; height:100%; }
.jp-busca{ position:relative; flex:1; min-height:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.jp-busca-item{ position:absolute; padding:0; border:none; background:none; cursor:pointer; border-radius:50%; }
.jp-busca-item svg{ width:100%; height:100%; pointer-events:none; }
.jp-busca-item.bien{ box-shadow:0 0 0 4px var(--success); background:var(--success-soft); }
.jp-busca-item.mal{ animation:jp-no .35s ease; }
@keyframes jp-no{ 25%{ transform:translateX(-5px); } 75%{ transform:translateX(5px); } }

/* une los puntos */
.jp-puntos{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; }
.jp-puntos svg{ width:100%; height:100%; max-width:520px; touch-action:manipulation; }
.jp-relleno{ opacity:0; transition:opacity .5s ease; }
.jp-puntos svg.completa .jp-relleno{ opacity:.85; }
.jp-lineas line{ stroke:var(--ink); stroke-width:1.2; stroke-linecap:round; }
.jp-dot .v{ fill:var(--ink-faint); }
.jp-dot text{ fill:var(--ink); font-weight:800; }
.jp-dot.siguiente .v{ fill:#e8578a; animation:jp-late 1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.jp-dot.hecho .v{ fill:var(--success); }
.jp-dot.hecho text{ fill:var(--ink-faint); }
@keyframes jp-late{ 50%{ transform:scale(1.5); } }

/* caminito */
.jp-camino{ position:relative; flex:1; min-height:0; background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; touch-action:none; }
.jp-camino canvas{ position:absolute; inset:0; }
.jp-viajero{ position:absolute; pointer-events:none; filter:drop-shadow(0 3px 5px rgba(0,0,0,.25)); }

/* burbujas */
.jp-burbujas{ position:relative; flex:1; min-height:0; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,#cfeaf7,#e9f6fb); }
.jp-burbuja{
  position:absolute; bottom:0; padding:0; border-radius:50%; cursor:pointer; font-size:16px;
  border:2px solid rgba(255,255,255,.9);
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95) 0 12%, rgba(173,216,255,.55) 13% 60%, rgba(186,160,255,.5));
  box-shadow:inset -4px -6px 10px rgba(120,140,255,.25);
  animation:jp-subir linear forwards;
}
.jp-burbuja.estrella{ background:radial-gradient(circle at 32% 30%, #fff 0 12%, rgba(255,224,130,.75) 13% 65%, rgba(255,190,90,.6)); }
.jp-burbuja.pop{ animation:jp-pop .22s ease-out forwards; }
@keyframes jp-subir{ from{ transform:translateY(100%); } to{ transform:translateY(calc(-1 * var(--alto))); } }
@keyframes jp-pop{ to{ transform:scale(1.6); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .jp-dot.siguiente .v{ animation:none; } }

/* mensaje breve y premio */
.jp-mensaje{
  position:absolute; left:50%; bottom:calc(env(safe-area-inset-bottom) + 26px); transform:translateX(-50%);
  background:var(--ink); color:var(--bg); font-weight:700; font-size:13.5px; padding:9px 14px; border-radius:14px;
  opacity:0; pointer-events:none; white-space:nowrap; max-width:92%;
}
.jp-mensaje.ver{ animation:jp-msj 2.2s ease forwards; }
@keyframes jp-msj{ 10%,80%{ opacity:1; } 100%{ opacity:0; } }
.jp-premio{ position:absolute; inset:0; z-index:5; background:rgba(20,18,35,.5); display:flex; align-items:center; justify-content:center; padding:24px; }
.jp-premio-box{ background:var(--surface); border-radius:26px; padding:24px 20px; text-align:center; width:100%; max-width:320px; box-shadow:var(--shadow); }
.jp-premio-box .big{ font-size:40px; letter-spacing:4px; animation:jp-aparece .4s ease; }
.jp-premio-box h2{ font-family:'Baloo 2'; margin:6px 0 2px; color:var(--ink); }
.jp-premio-box p{ color:var(--ink-soft); margin:0 0 14px; }
.jp-premio-box button{ width:100%; padding:12px; border:none; border-radius:14px; font-weight:700; font-size:15px; cursor:pointer; margin-top:6px; }

.jp .juego-reloj{ flex-shrink:0; }
/* ---------- 🍰 cocinita (js/cocina.js) ---------- */
.coc{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; position:relative; }
.coc-pedido{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:7px 9px; }
.coc-cliente{ width:50px; height:50px; flex-shrink:0; border-radius:50%; background:var(--surface-2); border:2px solid var(--line); }
.coc-pedido-txt{ flex:1; min-width:0; }
.coc-pedido-txt small{ display:block; font-size:11.5px; font-weight:700; color:var(--ink-faint); }
.coc-pedido-txt strong{ display:block; font-family:'Baloo 2'; font-size:16px; line-height:1.15; color:var(--ink); }
.coc-lista{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.coc-chip{ display:inline-flex; align-items:center; gap:2px; font-size:11.5px; font-weight:800; color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:1px 7px 1px 3px; white-space:nowrap; }
.coc-chip svg{ width:20px; height:20px; }
.coc-chip b{ font-size:10px; color:var(--brand); margin-left:3px; }
.coc-verlista{ font-size:11.5px; font-weight:800; color:var(--teal); background:var(--teal-soft); border:none; border-radius:99px; padding:3px 10px; cursor:pointer; }
.coc-meta{ position:relative; width:96px; height:90px; flex-shrink:0; padding:0; cursor:zoom-in; background:linear-gradient(#fdf6ec,#f6e7d2); border:2px solid var(--brand); border-radius:14px; }
.coc-meta svg{ width:100%; height:100%; }
.coc-meta span{ position:absolute; right:-6px; bottom:-6px; font-size:13px; background:var(--surface); border-radius:50%; padding:2px; box-shadow:0 1px 4px rgba(0,0,0,.2); }
.coc-mesa{ flex:1; min-height:140px; background:linear-gradient(#fdf6ec,#f3e2c8); border:1px solid var(--line); border-radius:18px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.coc-mesa svg{ width:100%; height:100%; touch-action:manipulation; }
.coc-mesa svg.coc-no{ animation:jp-no .35s ease; }
.coc-mesa svg.coc-si{ animation:coc-si .6s ease; }
@keyframes coc-si{ 40%{ transform:scale(1.06); } }
.coc-pz{ cursor:pointer; }
.coc-pop{ animation:coc-pop .28s cubic-bezier(.3,1.6,.5,1); transform-box:fill-box; transform-origin:center; }
@keyframes coc-pop{ from{ transform:scale(.3); opacity:.4; } }
.coc-acciones{ display:flex; gap:6px; }
.coc-acciones button{ flex:1; padding:9px 4px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:800; font-size:13px; cursor:pointer; }
.coc-acciones .coc-listo{ flex:1.3; background:var(--success); border-color:var(--success); color:#fff; }
.coc-bandeja{ max-height:40vh; overflow-y:auto; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:4px 8px 8px; }
.coc-sec{ font-size:10.5px; font-weight:800; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em; margin:6px 2px 4px; }
.coc-fila{ display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:5px; }
.coc-ing{ display:flex; flex-direction:column; align-items:center; gap:1px; padding:4px 2px 3px; border-radius:12px; border:2px solid transparent; background:var(--surface-2); cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.coc-ing svg{ width:34px; height:34px; pointer-events:none; }
.coc-ing span{ font-size:9.5px; font-weight:700; color:var(--ink-soft); line-height:1.1; text-align:center; pointer-events:none; }
.coc-ing:active{ transform:scale(.94); }
.coc-ing.activo{ border-color:var(--brand); background:var(--brand-soft); }
.coc-fantasma{ position:fixed; width:56px; height:56px; margin:-28px 0 0 -28px; pointer-events:none; z-index:200; filter:drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.coc-fantasma svg{ width:100%; height:100%; }
.coc-grande{ position:absolute; inset:0; z-index:5; background:rgba(253,246,236,.97); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:18px; cursor:zoom-out; padding:10px; }
.coc-grande svg{ width:100%; flex:1; min-height:0; }
.coc-grande p{ font-weight:800; color:#6b5a48; margin:6px 0 0; text-align:center; }
@media (prefers-reduced-motion: reduce){ .coc-pop, .coc-mesa svg.coc-si, .coc-mesa svg.coc-no{ animation:none; } }

/* piano mágico (js/juegos-parche.js) */
.jp-piano{ position:relative; flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); border-radius:18px; overflow:hidden; background:#2a2740; touch-action:manipulation; }
.jp-carril{ position:relative; border-right:2px solid rgba(255,255,255,.08); background:linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--c) 35%, transparent)); }
.jp-carril span{ position:absolute; left:0; right:0; bottom:8px; text-align:center; font-size:26px; opacity:.8; }
.jp-tecla{
  position:absolute; top:0; width:21%; height:100px; border:none; border-radius:18px; cursor:pointer; padding:0;
  background:var(--c); box-shadow:inset 0 -8px 0 rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.3); font-size:34px;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; will-change:transform;
}
.jp-tecla.pop{ animation:jp-tecla-pop .26s ease forwards; }
@keyframes jp-tecla-pop{ to{ opacity:0; filter:brightness(1.6); scale:1.25; } }

/* quitar acceso (solo admin) */
.p-quitar{ font-size:11.5px; font-weight:800; color:var(--danger); background:transparent; border:1px solid var(--danger); padding:4px 10px; border-radius:99px; cursor:pointer; }
.p-quitar.confirmar{ background:var(--danger); color:#fff; }
.p-quitar:disabled{ opacity:.6; cursor:default; }
/* ---------- juegos para peques (js/juegos-peques.js) ---------- */
.pq-no{ animation:jp-no .35s ease; }
.pq-fantasma{ position:fixed; z-index:200; pointer-events:none; transform:translate(-50%,-50%) scale(1.08); filter:drop-shadow(0 8px 10px rgba(0,0,0,.3)); margin:0; }
.pq-levantada{ opacity:.3; }
/* rompecabezas */
.pz{ flex:1; min-height:0; display:flex; flex-direction:column; gap:10px; align-items:center; }
.pz-tablero{ position:relative; display:grid; height:52%; aspect-ratio:320/440; background:var(--surface); border:3px solid var(--line); border-radius:14px; overflow:hidden; }
.pz-guia{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; pointer-events:none; filter:grayscale(1); }
.pz-hueco{ position:relative; border:1.5px dashed var(--line); }
.pz-hueco svg{ position:absolute; inset:0; width:100%; height:100%; animation:jp-aparece .25s ease; }
.pz-tablero.listo .pz-hueco{ border-color:transparent; }
.pz-bandeja{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.pz-pieza{ width:78px; padding:0; border:2px solid var(--line); border-radius:8px; background:var(--surface); cursor:grab; touch-action:none; overflow:hidden; }
.pz-pieza svg{ width:100%; height:100%; display:block; pointer-events:none; }
.pz-pieza.elegida{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
/* memoria */
.mem{ flex:1; min-height:0; display:grid; gap:10px; align-content:center; max-width:460px; margin:0 auto; width:100%; }
.mem-carta{ aspect-ratio:3/4; border:none; border-radius:14px; cursor:pointer; padding:4px; position:relative; background:linear-gradient(135deg,#b392d6,#f28bb0); box-shadow:0 3px 8px rgba(0,0,0,.2); transition:transform .25s ease; }
.mem-dorso{ font-size:34px; color:#fff; }
.mem-cara{ display:none; width:100%; height:100%; }
.mem-carta.abierta{ background:var(--surface); transform:rotateY(180deg) scaleX(-1); }
.mem-carta.abierta .mem-dorso{ display:none; }
.mem-carta.abierta .mem-cara{ display:block; }
.mem-carta.pareja{ box-shadow:0 0 0 4px var(--success); }
/* pintar */
.pin-hoja{ flex:1; min-height:0; background:#fff; border-radius:18px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:8px; }
.pin-hoja svg{ width:100%; height:100%; touch-action:manipulation; }
.pin-zona{ cursor:pointer; transition:fill .15s ease; }
.pin-pop{ animation:jp-aparece .25s ease; }
.pin-paleta{ display:grid; grid-template-columns:repeat(9,1fr); gap:6px; margin-top:10px; }
.pin-color{ aspect-ratio:1; border-radius:50%; border:2px solid rgba(0,0,0,.15); background:var(--c); cursor:pointer; padding:0; }
.pin-color.activo{ border-color:var(--ink); transform:scale(1.12); box-shadow:0 0 0 3px var(--surface); }
/* encaja la forma */
.fo-huecos{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; align-content:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px; }
.fo-hueco{ aspect-ratio:1; display:flex; align-items:center; justify-content:center; background:var(--surface-2); border-radius:14px; }
.fo-hueco svg, .fo-pieza svg{ width:86%; height:86%; pointer-events:none; }
.fo-hueco.lleno{ animation:jp-aparece .25s ease; }
.fo-bandeja{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.fo-pieza{ width:78px; height:78px; padding:0; border:none; background:none; cursor:grab; touch-action:none; }
.fo-pieza.elegida{ background:var(--brand-soft); border-radius:14px; }
/* encuentra el color */
.co-escena{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:6px; background:linear-gradient(#e6f4fb,#fdf6ec); border-radius:18px; padding:8px; }
.co-cosa{ padding:0; border:none; background:none; cursor:pointer; border-radius:50%; }
.co-cosa svg{ width:100%; height:100%; pointer-events:none; }
.co-cosa.bien{ background:rgba(111,191,115,.3); animation:jp-aparece .3s ease; }
/* sombras */
.so-sombra{ flex:1; min-height:0; display:flex; justify-content:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:8px; }
.so-sombra svg{ height:100%; filter:brightness(0); opacity:.85; transition:filter .5s ease, opacity .5s ease; }
.so-sombra.revelada svg{ filter:none; opacity:1; }
.so-ops{ display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr)); gap:8px; margin-top:10px; }
.so-op{ display:flex; flex-direction:column; align-items:center; padding:6px 4px; border-radius:14px; border:2px solid var(--line); background:var(--surface); cursor:pointer; }
.so-op svg{ width:70px; height:96px; pointer-events:none; }
.so-op span{ font-size:11.5px; font-weight:800; color:var(--ink-soft); }
.so-op.bien{ border-color:var(--success); background:var(--success-soft); }

/* elegir cuántas cartas / piezas */
.pq-elegir{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:0 0 8px; }
.pq-elegir span{ font-size:12.5px; font-weight:800; color:var(--ink-soft); }
.pq-elegir button{ min-width:40px; padding:6px 10px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:800; font-size:13px; cursor:pointer; }
.pq-elegir button.activo{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- 💃 fiesta de baile (js/fiesta.js) ---------- */
.fi-entrar{ background:linear-gradient(120deg,#f28bb0,#b392d6 55%,#4a78c2); }
.fi{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; height:100vh; height:100dvh; max-width:560px; margin:0 auto;
  background:linear-gradient(180deg,var(--brand-soft),var(--bg) 40%); padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.fi-cuerpo{ flex:1; min-height:0; overflow-y:auto; padding:4px 14px 18px; display:flex; flex-direction:column; gap:10px; }
.fi-escenario{ position:relative; flex-shrink:0; height:46vh; min-height:260px; border-radius:22px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 110%, #5b3f8f 0%, #2a1f4a 45%, #150f28 100%); }
.fi-luces{ position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at 20% 0%, hsl(var(--h, 320) 90% 65% / .7), transparent 45%),
    radial-gradient(circle at 80% 0%, hsl(calc(var(--h, 320) + 120) 90% 65% / .7), transparent 45%),
    radial-gradient(circle at 50% 0%, hsl(calc(var(--h, 320) + 240) 90% 70% / .5), transparent 40%); }
.fi-luces.pulso{ animation:fi-pulso .35s ease-out; }
@keyframes fi-pulso{ from{ opacity:1; } to{ opacity:.55; } }
.fi-bailarines{ position:absolute; left:0; right:0; bottom:0; top:22px; display:flex; align-items:flex-end; justify-content:center; gap:2%; padding:0 3% 14px; }
.fi-vacio{ color:#fff; font-weight:800; margin:auto; }
.fi-bailarin{ position:relative; flex:1; max-width:34%; height:100%; display:flex; align-items:flex-end; justify-content:center; transform-origin:50% 100%; }
.fi-bailarin svg{ width:100%; max-height:100%; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.fi-sombra{ position:absolute; bottom:-4px; left:18%; right:18%; height:10px; border-radius:50%; background:rgba(0,0,0,.35); }
.fi-bailarin.paso-brinco{ animation:fi-brinco var(--dur,450ms) ease-out; }
.fi-bailarin.paso-lado-izq{ animation:fi-lado-izq var(--dur,450ms) ease-in-out; }
.fi-bailarin.paso-lado-der{ animation:fi-lado-der var(--dur,450ms) ease-in-out; }
.fi-bailarin.paso-giro{ animation:fi-giro var(--dur,450ms) ease-in-out; }
.fi-bailarin.paso-inclina{ animation:fi-inclina var(--dur,450ms) ease-in-out; }
.fi-bailarin.paso-agacha{ animation:fi-agacha var(--dur,450ms) ease-in-out; }
.fi-bailarin.paso-aplauso{ animation:fi-aplauso var(--dur,450ms) ease-in-out; }
@keyframes fi-brinco{ 40%{ transform:translateY(-14%) scale(1.02,.98); } 70%{ transform:translateY(0) scale(1.04,.94); } }
@keyframes fi-lado-izq{ 50%{ transform:translateX(-12%) rotate(-6deg); } }
@keyframes fi-lado-der{ 50%{ transform:translateX(12%) rotate(6deg); } }
@keyframes fi-giro{ 50%{ transform:scaleX(-1); } }
@keyframes fi-inclina{ 30%{ transform:rotate(-10deg); } 70%{ transform:rotate(10deg); } }
@keyframes fi-agacha{ 50%{ transform:scale(1.06,.86); } }
@keyframes fi-aplauso{ 25%{ transform:scale(1.08); } 50%{ transform:scale(.98); } 75%{ transform:scale(1.08); } }
.fi-confeti{ position:absolute; top:-10px; width:8px; height:12px; border-radius:2px; animation:fi-cae 1.6s linear forwards; pointer-events:none; }
@keyframes fi-cae{ to{ transform:translateY(46vh) rotate(540deg); opacity:.2; } }
.fi-pausa{ position:absolute; right:10px; top:10px; z-index:2; border:none; border-radius:99px; padding:6px 12px; font-weight:800; font-size:12px; background:rgba(255,255,255,.85); color:#2a2740; cursor:pointer; }
.fi-modo button.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.fi-panel{ background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:12px; }
.fi-ayuda, .fi-nota, .fi-estado{ font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:0 0 8px; }
.fi-nota{ font-size:11.5px; color:var(--ink-faint); }
.fi-estado{ font-weight:800; color:var(--ink); }
.fi-grande{ width:100%; padding:12px; border-radius:14px; border:none; font-weight:800; font-size:15px; cursor:pointer; margin-bottom:8px; }
.fi-medidor{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin-bottom:8px; }
.fi-medidor span{ display:block; height:100%; width:0; background:linear-gradient(90deg,#8fd48f,#f2cf5b,#f28bb0); transition:width .08s linear; }
.fi-lista{ display:flex; flex-direction:column; gap:6px; }
.fi-cancion{ display:flex; align-items:center; gap:6px; justify-content:space-between; font-size:13px; font-weight:700; color:var(--ink); padding:6px 0; border-top:1px solid var(--line); }
.fi-cancion div{ display:flex; gap:4px; flex-shrink:0; }
.fi-cancion button{ border:1px solid var(--line); background:var(--surface-2); color:var(--ink-soft); border-radius:99px; padding:4px 8px; font-size:11px; font-weight:800; cursor:pointer; }
.fi-video{ aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; margin-bottom:10px; }
.fi-video iframe{ width:100%; height:100%; border:0; }
.fi-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.fi-chips button{ border:1px solid var(--line); background:var(--surface-2); color:var(--ink); border-radius:99px; padding:7px 11px; font-size:12.5px; font-weight:700; cursor:pointer; }
.fi-chips button.activo{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fi-pegar{ display:flex; gap:8px; align-items:center; }
.fi-input{ flex:1; min-width:0; padding:10px 12px; border-radius:12px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:14px; user-select:text; -webkit-user-select:text; }
.fi-input.error{ border-color:var(--danger); }
.fi-sec{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin:4px 0 0; }
.fi-personajes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:6px; }
.fi-pj{ position:relative; display:flex; flex-direction:column; align-items:center; padding:4px 2px; border-radius:14px; border:2px solid transparent; background:var(--surface); cursor:pointer; }
.fi-pj svg{ width:48px; height:48px; pointer-events:none; }
.fi-pj span{ font-size:10.5px; font-weight:700; color:var(--ink-soft); text-align:center; line-height:1.1; }
.fi-pj.activo{ border-color:var(--brand); background:var(--brand-soft); }
.fi-pj b{ position:absolute; top:2px; right:4px; font-size:11px; color:#fff; background:var(--brand); border-radius:99px; min-width:18px; line-height:18px; text-align:center; }
@media (prefers-reduced-motion: reduce){ .fi-bailarin[class*="paso-"], .fi-confeti, .fi-luces.pulso{ animation:none; } }
/* elegir cuántas cartas / piezas */
.pq-elegir{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:0 0 8px; }
.pq-elegir span{ font-size:12.5px; font-weight:800; color:var(--ink-soft); }
.pq-elegir button{ min-width:40px; padding:6px 10px; border-radius:99px; border:1px solid var(--line); background:var(--surface); color:var(--ink-soft); font-weight:800; font-size:13px; cursor:pointer; }
.pq-elegir button.activo{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- botones Historial · Configuración ---------- */
.action-row-2 .history-btn{ flex-direction:column; gap:2px; padding:10px 6px; font-size:13.5px; line-height:1.15; }
.action-row-2 .history-btn span{ font-size:20px; }

/* ---------- Configuración (grupos que se abren y cierran) ---------- */
.cfg-intro{ font-size:12.5px; color:var(--ink-faint); margin:-6px 0 12px; }
details.cfg{ border:1px solid var(--line); border-radius:16px; background:var(--surface); margin-bottom:10px; overflow:hidden; }
details.cfg[open]{ background:var(--surface-2); }
details.cfg > summary{
  list-style:none; display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer;
  -webkit-user-select:none; user-select:none;
}
details.cfg > summary::-webkit-details-marker{ display:none; }
details.cfg > summary::after{ content:'›'; margin-left:auto; font-size:22px; line-height:1; color:var(--ink-faint); transition:transform .2s ease; }
details.cfg[open] > summary::after{ transform:rotate(90deg); }
.cfg-ico{ width:38px; height:38px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; font-size:19px; background:var(--surface-2); border:1px solid var(--line); }
details.cfg[open] .cfg-ico{ background:var(--surface); }
.cfg-txt{ min-width:0; display:flex; flex-direction:column; }
.cfg-txt strong{ font-family:'Baloo 2'; font-size:15.5px; color:var(--ink); line-height:1.2; }
.cfg-txt small{ font-size:12px; font-weight:600; color:var(--ink-faint); line-height:1.3; }
.cfg-txt small:empty{ display:none; }
.cfg-cuerpo{ border-top:1px solid var(--line); padding:14px 14px 16px; }
.sheet-config .upsell-box{ margin-top:0; }