/* ============================================================
   Mundial Swaps '26 · Design System
   Paleta inspirada en los mockups: navy + green + violet + amber
   ============================================================ */

:root {
  /* Colors */
  --navy:        #0B1E4F;
  --navy-deep:   #071639;
  --navy-ink:    #03102B;
  --navy-soft:   #14306B;
  --green:       #19E88A;
  --green-deep:  #0FB96C;
  --green-soft:  #e6faf0;
  --green-ink:   #062E1E;
  --violet:      #7B4CFF;
  --violet-deep: #5B2EDB;
  --violet-soft: #EEE6FF;
  --coral:       #FF5C5C;
  --coral-deep:  #D63535;
  --amber:       #FFC642;
  --amber-deep:  #E6A90A;
  --cream:       #F6F3EC;
  --paper:       #FFFFFF;
  --ink:         #0D1426;
  --ink-soft:    #2E3A57;
  --ink-mute:    #4A556D;
  --line:        #E6E3DA;
  --line-dark:   #D7D3C6;

  /* Typography */
  --font-display: 'Fredoka', 'Nunito', system-ui, sans-serif;
  --font-body:    'Nunito', system-ui, sans-serif;

  /* Shadows */
  --sh-sm: 0 1px 2px rgba(8,18,45,0.08);
  --sh-md: 0 6px 18px rgba(8,18,45,0.12);
  --sh-lg: 0 18px 42px rgba(8,18,45,0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-body);
  background: #000;
  color: #fff;
  min-height: 100vh;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

#root {
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at top, var(--navy-soft) 0%, #000 70%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}

input, button, select, textarea {
  font-family: inherit;
}

button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ============================================================
   Device frame — iPhone-ish shell for each screen
   ============================================================ */

/* Mobile phone frame (default) */
.device[data-kind="mobile"] {
  width: 390px; height: 844px;
  background: #000;
  border-radius: 48px;
  padding: 10px;
  border: 1.5px solid #2a2a2a;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55), inset 0 0 0 1.5px rgba(255,255,255,0.08);
  position: relative;
  flex-shrink: 0;
}
.device[data-kind="mobile"]::before {
  content: '';
  position: absolute;
  top: 14px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 30px;
  background: #000; border-radius: 18px;
  z-index: 10;
}
.device[data-kind="mobile"] .screen {
  width: 100%; height: 100%;
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}

/* Default para cualquier .screen — misma especificidad (0,1,0) que
   las reglas .screen-xxx, que ganan por orden de fuente (están más abajo).
   Antes vivía en .device[data-kind="mobile"] .screen con especificidad
   (0,2,1), lo que rompía los overrides de las pantallas dark. */
.screen {
  background: var(--cream);
  color: var(--ink);
  position: relative;
}

/* Desktop browser frame (admin) */
.device[data-kind="desktop"] {
  width: min(1100px, 96vw);
  aspect-ratio: 900 / 680;
  background: #1a1a1a;
  border-radius: 14px;
  padding: 32px 4px 4px;
  border: 1px solid #333;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
  position: relative;
  flex-shrink: 0;
}
.device[data-kind="desktop"]::before {
  content: '';
  position: absolute;
  top: 11px; left: 14px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #FF5F57;
  box-shadow: 16px 0 0 #FEBC2E, 32px 0 0 #28C840;
  z-index: 10;
}
.device[data-kind="desktop"] .screen {
  width: 100%; height: 100%;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  background: var(--navy-ink);
  color: #fff;
}

/* Fallback si no tiene data-kind (compat con código legado) */
.device:not([data-kind]) {
  width: 390px; height: 844px;
  background: #000;
  border-radius: 48px;
  padding: 10px;
  border: 1.5px solid #2a2a2a;
  box-shadow: 0 30px 60px rgba(0,0,0,0.55);
  position: relative;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  #root {
    padding: 0;
    min-height: 100vh;
    min-height: 100svh;
    min-height: var(--app-height, 100svh);   /* JS la recalcula desde window.innerHeight */
  }
  .device[data-kind="mobile"] {
    width: 100vw;
    height: 100vh;                            /* fallback navegadores viejos */
    height: 100svh;                           /* fallback CSS-only */
    height: var(--app-height, 100svh);        /* fuente de la verdad: alto medido por JS — siempre coincide con el viewport visible, así el menú no queda cortado por la barra del navegador */
    border-radius: 0; padding: 0; border: none;
    box-shadow: none;
  }
  /* Cuando el chat-thread está visible, el device debe usar dvh para que
     no quede un hueco entre el input bar y el teclado virtual. */
  .device[data-kind="mobile"]:has(.chat-thread) {
    height: 100dvh;
  }
  .device[data-kind="mobile"]::before { display: none; }
  .device[data-kind="mobile"] .screen { border-radius: 0; }
}

/* ============================================================
   Typography helpers
   ============================================================ */

.t-display  { font-family: var(--font-display); font-weight: 700; }
.t-h1       { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 0.95; letter-spacing: -1px; }
.t-h2       { font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -0.5px; }
.t-h3       { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.1; }
.t-h4       { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.15; }
.t-label    { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.5px; color: var(--ink-soft); text-transform: uppercase; }
.t-mute     { color: var(--ink-mute); }
.t-soft     { color: var(--ink-soft); }

/* ============================================================
   Phone header (navy gradient top)
   ============================================================ */

.phone-header {
  position: relative;
  padding: 56px 18px 18px;
  background: var(--navy);
  color: #fff;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  overflow: hidden;
}
.phone-header.violet { background: var(--violet-deep); }
.phone-header.green  { background: var(--green-deep); color: var(--navy-ink); }
.phone-header.amber  { background: linear-gradient(135deg, var(--amber), #FF9A3D); color: var(--navy-ink); }
.phone-header-row {
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.phone-header h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; margin: 0; line-height: 1.1;
}
.phone-header .sub {
  font-size: 13px; opacity: 0.75; margin-top: 2px;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 12px;
  border: none; background: rgba(255,255,255,0.15);
  color: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  transition: background 0.15s;
  flex-shrink: 0;
}
.icon-btn:hover { background: rgba(255,255,255,0.25); }

/* ============================================================
   Confetti pattern (geometric shapes scattered in the bg)
   ============================================================ */

.confetti {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  opacity: 0.14;
}
.confetti > * { position: absolute; }

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  border: 2px solid transparent;
  font-family: var(--font-display);
  font-weight: 700; font-size: 17px;
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn .sub { font-size: 12px; font-weight: 500; opacity: 0.75; }

.btn-primary {
  background: var(--green);
  color: var(--navy-ink);
  border-color: var(--green-deep);
  box-shadow: 0 4px 0 var(--green-deep), 0 8px 18px rgba(8,18,45,0.18);
}
.btn-primary:active:not(:disabled) { box-shadow: 0 2px 0 var(--green-deep), 0 4px 8px rgba(8,18,45,0.15); }

.btn-violet {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet-deep);
  box-shadow: 0 4px 0 var(--violet-deep), 0 8px 18px rgba(8,18,45,0.18);
}
.btn-violet:active:not(:disabled) { box-shadow: 0 2px 0 var(--violet-deep), 0 4px 8px rgba(8,18,45,0.15); }

.btn-amber {
  background: var(--amber);
  color: var(--navy-ink);
  border-color: var(--amber-deep);
  box-shadow: 0 4px 0 var(--amber-deep), 0 8px 18px rgba(8,18,45,0.18);
}

.btn-danger {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral-deep);
  box-shadow: 0 4px 0 var(--coral-deep), 0 8px 18px rgba(8,18,45,0.18);
}

.btn-ghost {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

.btn-white {
  background: #fff;
  color: var(--navy);
  border-color: var(--line);
}

/* ============================================================
   Chips, badges
   ============================================================ */

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 11px;
  background: rgba(123, 76, 255, 0.13);
  color: var(--violet);
  border: 1px solid rgba(123, 76, 255, 0.27);
}
.chip.green  { background: rgba(25,232,138,0.13); color: var(--green-deep); border-color: rgba(25,232,138,0.4); }
.chip.amber  { background: rgba(255,198,66,0.2);  color: var(--amber-deep); border-color: rgba(230,169,10,0.3); }
.chip.coral  { background: rgba(255,92,92,0.13);  color: var(--coral-deep); border-color: rgba(214,53,53,0.3); }
.chip.white  { background: rgba(255,255,255,0.2); color: #fff; border-color: rgba(255,255,255,0.4); }

.safety-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(25, 232, 138, 0.15);
  border: 1px solid rgba(25, 232, 138, 0.35);
  color: var(--green);
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
}

/* ============================================================
   Cards & inputs
   ============================================================ */

.card {
  background: var(--paper);
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-sm);
}

.input-wrap {
  margin-top: 6px;
  padding: 14px;
  border-radius: 14px;
  background: var(--paper);
  border: 2px solid var(--line);
  display: flex; align-items: center; gap: 8px;
  transition: border-color 0.15s;
}
.input-wrap:focus-within { border-color: var(--green); }
.input-wrap input {
  flex: 1; border: none; outline: none;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700; font-size: 18px;
  color: var(--ink);
}
.input-wrap .prefix {
  font-family: var(--font-body);
  font-size: 14px; color: var(--ink-mute);
}

/* ============================================================
   Bottom tab bar (kid navigation)
   ============================================================ */

/* ============================================================
   OPCIÓN 1 (guardada): Pill azul claro estilo Material 3 / Telegram
   --- bloque comentado para volver fácilmente ---
   .tabbar {
     position: absolute; bottom: 0; left: 0; right: 0;
     padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px));
     background: #ffffff;
     border-top: 1px solid rgba(0,0,0,0.06);
     box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
     display: flex; justify-content: space-around; align-items: center; gap: 4px;
     z-index: 50;
   }
   .tabbar button { border:none; background:transparent; color:#2b3340; border-radius:999px;
     padding:8px 14px; display:inline-flex; align-items:center; justify-content:center;
     cursor:pointer; position:relative; transition:all 0.18s; }
   .tabbar button.active { background: rgba(30,136,229,0.14); color: #1E88E5; }
   .tabbar button.active .tab-svg { stroke: #1E88E5; stroke-width: 2.2; }
   ============================================================ */

/* ============================================================
   OPCIÓN 3 (guardada): motion_tab_bar — notch + labels en inactivos
   --- bloque comentado para volver fácilmente ---
   Ver historial: tabbar con padding 14px 4px, align-items:flex-end,
   labels visibles también en inactivos (.tab-label sin display:none),
   círculo activo 56×56 con doble anillo blanco 6px + outline gris.
   ============================================================ */

/* ============================================================
   OPCIÓN 2 (activa): ff_navigation_bar — círculo elevado, color
   azul marino (--navy: #0B1E4F)
   ============================================================ */
.tabbar {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 14px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #ffffff;
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 -4px 14px rgba(0,0,0,0.06);
  display: flex; justify-content: space-around; align-items: center; gap: 4px;
  z-index: 50;
  overflow: visible;
}
/* En mobile: fixed al viewport visible — no depende del alto del .device */
@media (max-width: 480px) {
  .tabbar {
    position: fixed;
    bottom: 0;
  }
}
.tabbar button {
  border: none;
  background: transparent;
  color: #8a8f99;
  padding: 6px 4px 4px;
  min-width: 0;
  flex: 1 1 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 4px;
  font-family: var(--font-body);
  font-weight: 700; font-size: 11px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s;
}
.tabbar button:active { transform: scale(0.96); }
.tabbar button .tab-icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 28px; height: 28px;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, color 0.25s;
}
.tabbar button .tab-svg {
  width: 26px; height: 26px;
  display: block;
}
.tabbar button .tab-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: color 0.25s;
}
/* ─── Activo: círculo azul marino flotando POR ARRIBA del tabbar ─── */
.tabbar button.active {
  color: var(--navy, #0B1E4F);
}
.tabbar button.active .tab-icon {
  width: 52px; height: 52px;
  background: var(--navy, #0B1E4F);
  color: #fff;
  border-radius: 50%;
  box-shadow:
    0 4px 12px rgba(11,30,79,0.45),
    0 0 0 5px #fff;
  transform: translateY(-22px);
}
.tabbar button.active .tab-svg {
  stroke: #fff;
  stroke-width: 2.2;
  width: 26px; height: 26px;
}
.tabbar button.active .tab-label {
  /* Label del activo: azul marino bold; sube cerca del círculo elevado para
     que no quede demasiado separado al levantarse el icono. */
  color: var(--navy, #0B1E4F);
  font-weight: 800;
  margin-top: -10px;
}
/* Badge de notificaciones — punto/contador arriba a la derecha del icono */
.tab-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  background: #FF1A1A;
  color: #fff;
  border-radius: 999px;
  font-size: 9px; font-weight: 800;
  min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20);
  pointer-events: none;
  animation: tabBadgePulse 2.2s ease-in-out infinite;
}
@keyframes tabBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}
/* Legacy overrides removed — el tab activo ya tiene su propio estilo arriba
   (pill azul claro). Mantenemos solo el reset para que SVGs y PNGs viejos
   no rompan si el cliente tiene el JS cacheado. */
.tabbar button .tab-icon svg { display: block; }
.tabbar button .tab-icon img {
  width: 24px; height: 24px;
  object-fit: contain;
  display: block;
}

/* ============================================================
   Screen: Onboarding (01)
   ============================================================ */

.screen-onboarding {
  background: radial-gradient(ellipse at 50% 0%, var(--navy-soft) 0%, var(--navy-ink) 70%);
  color: #fff;
  text-align: center;
  padding: 60px 24px 44px;
  justify-content: space-between;
}
.screen-onboarding .mascot-wrap {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
.screen-onboarding .mascot-wrap .shout {
  position: absolute; top: -8px; right: -22px;
  background: var(--amber); color: var(--navy-ink);
  padding: 4px 10px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; transform: rotate(8deg);
  box-shadow: var(--sh-md);
}
.screen-onboarding h1 { margin-top: 18px; color: #fff; }
.screen-onboarding h1 .swaps { color: var(--green); }
.screen-onboarding h1 .year  { color: var(--amber); font-size: 28px; margin-left: 6px; }
.screen-onboarding p.tagline {
  font-size: 16px; opacity: 0.85;
  max-width: 280px; margin: 14px auto 0;
  line-height: 1.4;
}
.screen-onboarding p.tagline b { color: var(--green); }
.screen-onboarding .safety-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-top: 20px;
}
.screen-onboarding .safety-row .mini {
  display: flex; gap: 8px; font-size: 11px; opacity: 0.7;
}
.screen-onboarding .legal {
  text-align: center; margin-top: 10px;
  font-size: 11px; opacity: 0.55;
}

/* ============================================================
   Screen: Login select (02)
   ============================================================ */

.screen-login {
  background: var(--navy-deep); color: #fff;
  padding: 22px 20px 12px;
  position: relative;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
.screen-login h2 { color: #fff; margin: 0; }
.screen-login .intro {
  font-size: 13.5px; opacity: 0.7; margin-top: 3px;
}
.screen-login .role-cards {
  margin-top: 40px;
  display: flex; flex-direction: column; gap: 12px;
}
.role-card {
  border: none; padding: 17px 19px;
  border-radius: 24px; cursor: pointer;
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 16px;
  text-align: left;
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), 0 14px 28px rgba(0,0,0,0.25);
  transition: transform 0.1s, box-shadow 0.1s;
}
.role-card:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.2); }
.role-card.kid {
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: var(--navy-ink);
  border: 2px solid var(--green-deep);
}
.role-card.adult {
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: var(--navy-ink);
  border: 2px solid var(--amber-deep);
}
.role-card.parent {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  border: 2px solid var(--violet-deep);
}
.role-card .mascot-slot {
  width: 96px; height: 96px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.role-card .mascot-slot img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25));
  pointer-events: none;
  user-select: none;
}
.role-card .meta { flex: 1; min-width: 0; }
.role-card .kicker {
  font-size: 11px; font-weight: 700;
  opacity: 0.75; letter-spacing: 1px;
}
.role-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; margin: 0; line-height: 1;
}
.role-card .desc { font-size: 13px; margin-top: 4px; opacity: 0.85; }
.role-card .chev { font-size: 28px; flex-shrink: 0; }
.screen-login .coppa-note {
  margin-top: 8px;
  padding: 9px 12px; border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 11px; line-height: 1.4;
  color: rgba(255,255,255,0.8);
}
.screen-login .coppa-note b { color: var(--green); }
.screen-login .footer-link {
  text-align: center; margin-top: 10px;
  font-size: 13px; color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.screen-login .footer-link button {
  border: 2px solid var(--green); background: rgba(110,217,143,0.12);
  color: var(--green); font-weight: 800;
  font-family: inherit; cursor: pointer;
  padding: 8px 18px; font-size: 14px;
  border-radius: 999px; margin-left: 8px;
  transition: background 0.15s, transform 0.1s;
}
.screen-login .footer-link button:hover {
  background: rgba(110,217,143,0.25);
}
.screen-login .footer-link button:active { transform: scale(0.97); }

/* ============================================================
   Screen: Register (03)
   ============================================================ */

.screen-register { background: var(--cream); }
.screen-register .body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 24px;
}
.screen-register .section { margin-top: 18px; }
.screen-register .section:first-child { margin-top: 0; }
.screen-register .age-grid {
  margin-top: 6px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.screen-register .age-btn {
  width: 44px; height: 44px; border-radius: 12px;
  border: 2px solid var(--line); background: #fff;
  color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  cursor: pointer;
  transition: transform 0.08s;
}
.screen-register .age-btn.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.screen-register .country-strip {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  padding: 4px 2px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.screen-register .country-strip::-webkit-scrollbar { height: 6px; }
.screen-register .country-strip::-webkit-scrollbar-thumb {
  background: rgba(11,30,79,0.25); border-radius: 3px;
}
.country-chip {
  flex: 0 0 calc((100% - 24px) / 5);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 4px 6px;
  border: 2px solid var(--line); border-radius: 10px;
  background: #fff; cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.1s, border-color 0.15s;
}
.country-chip:active { transform: scale(0.94); }
.country-chip.sel {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(11,30,79,0.12);
}
.country-chip-flag {
  display: block;
  width: 36px; height: 22px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.15);
}
.country-chip-code {
  font-size: 10px; font-weight: 800; color: var(--ink);
  letter-spacing: 0.3px;
}
.screen-register .country-label {
  padding: 5px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--ink);
}
.screen-register .avatar-grid {
  margin-top: 6px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.screen-register .avatar-btn {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px; padding: 8px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.screen-register .avatar-btn.sel { background: var(--navy); color: #fff; border-color: var(--navy); }
.screen-register .avatar-btn .label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px;
}
.screen-register .parent-email {
  margin-top: 20px;
  padding: 14px; border-radius: 14px;
  background: var(--violet-soft);
  border: 1px dashed var(--violet);
  display: flex; gap: 10px; align-items: flex-start;
}
.screen-register .parent-email .title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--violet-deep);
}
.screen-register .parent-email .desc {
  font-size: 11px; color: var(--ink-soft); margin-top: 6px; line-height: 1.4;
}
.screen-register .footer-btn {
  padding: 12px 18px 32px;
  background: #fff;
  border-top: 1px solid var(--line);
}

/* ============================================================
   Screen: Album (04)
   ============================================================ */

.screen-album { background: var(--cream); }
.screen-album .album-header {
  background: var(--navy);
  color: #fff;
  padding: 56px 18px 14px;
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  position: relative;
  overflow: hidden;
}
.screen-album .profile-row {
  display: flex; align-items: center; gap: 12px;
  position: relative;
}
.screen-album .profile-avatar {
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  padding: 0;
  /* El marco circular lo provee .avatar-with-frame por dentro */
}
.screen-album .profile-avatar-btn {
  cursor: pointer;
  font: inherit;
  transition: transform 0.12s;
}
.screen-album .profile-avatar-btn:hover { transform: scale(1.05); }
.screen-album .profile-avatar-btn:active { transform: scale(0.96); }
.screen-album .profile-meta { flex: 1; }
.screen-album .profile-meta .nick {
  font-size: 12px;
  display: flex; align-items: center; gap: 6px;
}
.screen-album .profile-meta .nick .nick-text { opacity: 0.7; }
.screen-album .profile-meta .nick .nick-pending {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 26px;
  padding: 0; border-radius: 8px;
  border: none; background: #FFE000;
  font-size: 16px; line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,200,0,0.5);
  transition: transform 0.08s, filter 0.12s;
}
.screen-album .profile-meta .nick .nick-pending:hover { filter: brightness(1.08); }
.screen-album .profile-meta .nick .nick-pending:active { transform: scale(0.93); }
.screen-album .profile-meta .nick .nick-pending .np-count {
  position: absolute;
  top: -7px; right: -7px;
  background: #FF1A1A; color: #fff;
  border-radius: 50%;
  min-width: 18px; height: 18px;
  font-size: 11px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  padding: 0 3px;
  pointer-events: none;
}
.screen-album .profile-meta .title { font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 1.1; }
.screen-album .profile-count { text-align: right; }
.screen-album .profile-count .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; color: var(--green);
}
.screen-album .profile-count .big .total { opacity: 0.5; font-size: 13px; }
.screen-album .profile-count .sub { font-size: 10px; opacity: 0.7; }

.screen-album .progress {
  position: relative; margin-top: 14px;
}
.screen-album .progress-bar {
  height: 10px; border-radius: 999px;
  background: rgba(255,255,255,0.15);
  overflow: hidden;
}
.screen-album .progress-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--amber));
  transition: width 0.4s;
}
.screen-album .progress-meta {
  display: flex; justify-content: space-between;
  font-size: 11px; margin-top: 4px; opacity: 0.7;
}

.screen-album .filter-tabs {
  padding: 12px 16px 8px;
  display: flex; gap: 6px;
  align-items: center;
}

/* Botón modo compacto (pill con ícono de grilla) */
.album-compact-btn {
  margin-left: auto;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.album-compact-btn:hover { background: var(--paper-2); }
.album-compact-btn.on {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* ─── Modo compacto del álbum ─── */
.screen-album.compact .album-header  { display: none; }
.screen-album.compact .country-filter { display: none; }
.screen-album.compact .banner        { display: none; }
.screen-album.compact .tabbar        { display: none; }
.screen-album.compact .album-scroll  { padding: 4px 10px 16px; }
.screen-album.compact .sticker-grid  { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.screen-album.compact .sticker-count-3d { font-size: 28px; }
.screen-album.compact .album-group   { margin-bottom: 14px; }

/* ─── Switch Regulares / Extra ─── */
.album-view-switch {
  display: flex; gap: 6px;
  padding: 12px 16px 0;
}
.album-view-switch .avs-tab {
  flex: 1;
  padding: 10px 8px; border-radius: 12px;
  border: 2px solid var(--line);
  background: #fff; color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.album-view-switch .avs-tab.sel {
  background: var(--navy-deep, #0B1E4F);
  border-color: var(--navy-deep, #0B1E4F);
  color: #FFD43A;
}

/* ─── Sección Extra Stickers ─── */
.extras-scroll { padding: 14px 16px 100px; }
.extras-empty { padding: 30px 20px; text-align: center; }
.extras-empty .empty-mascot { display: flex; justify-content: center; }
.extras-empty .empty-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; margin-top: 8px; color: var(--navy); }
.extras-empty .empty-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.4; margin-top: 6px; }
.extras-intro {
  background: rgba(244, 196, 48, 0.12);
  border: 1px solid rgba(244, 196, 48, 0.4);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--navy); margin-bottom: 14px;
}
.extras-group-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--navy);
  margin: 14px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.extras-group-count {
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
}
.extras-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 380px) { .extras-grid { grid-template-columns: 1fr; } }

.extra-player-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: var(--sh-sm);
}
.epc-head { display: flex; align-items: center; gap: 8px; }
.epc-silhouette {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.epc-meta { flex: 1; min-width: 0; }
.epc-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epc-country {
  font-size: 10px; color: var(--ink-mute);
  font-weight: 700; letter-spacing: 0.5px;
}
.epc-rarities {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.epc-slot {
  border: 2px solid var(--rarity-color, #999);
  background: rgba(255,255,255,0.6);
  color: var(--rarity-color, #555);
  padding: 8px 4px;
  border-radius: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background 0.15s, transform 0.1s;
}
.epc-slot.owned {
  background: var(--rarity-color, var(--green));
  color: #fff;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.epc-slot.gold.owned { color: var(--navy); /* dorado con texto navy */ }
.epc-slot.silver.owned { color: var(--navy); }
.epc-slot:active { transform: scale(0.96); }
.epc-slot-icon { font-size: 14px; line-height: 1; }
.epc-slot-label { font-size: 10px; }
.screen-album .filter-tab {
  flex: 1; padding: 10px 4px; border-radius: 12px;
  border: 2px solid var(--line);
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.screen-album .filter-tab.sel { border-color: currentColor; color: #fff; }
.screen-album .filter-tab.sel.navy { background: var(--navy); border-color: var(--navy); }
.screen-album .filter-tab.sel.green { background: var(--green); border-color: var(--green); color: var(--navy-ink); }
.screen-album .filter-tab.sel.coral { background: var(--coral); border-color: var(--coral); }

.screen-album .banner {
  margin: 0 16px;
  padding: 12px; border-radius: 14px; border: none;
  background: linear-gradient(100deg, var(--violet), var(--violet-deep));
  color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  box-shadow: var(--sh-md);
  position: relative;
}
.banner-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: #fff;
  border: 0;
  font-size: 18px; font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s;
  font-family: inherit;
}
.banner-close:hover { background: rgba(255,255,255,0.38); }
.screen-album .banner .banner-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.screen-album .banner .banner-title b { color: var(--amber); }
.screen-album .banner .banner-sub { font-size: 11px; opacity: 0.85; }

.screen-album .album-scroll {
  flex: 1; overflow-y: auto;
  padding: 10px 16px 100px;
}
.screen-album .sticker-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.album-group { margin-bottom: 22px; }
/* Modo lista (Tengo / Me faltan): solo headers, sin grid, compacto */
.album-scroll--list .album-group { margin-bottom: 0; }
.album-scroll--list .album-group-header { margin-bottom: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.album-scroll--list .album-group:first-child .album-group-header { border-radius: 12px 12px 0 0; }
.album-scroll--list .album-group:last-child  .album-group-header { border-radius: 0 0 12px 12px; border-bottom: none; }
.album-group.fav .album-group-header {
  background: linear-gradient(135deg, #FFF8E1 0%, #FFE6B0 100%);
  border: 1.5px solid #FFC642;
  box-shadow: 0 4px 14px rgba(255, 198, 66, 0.25);
}
.agh-fav-chip {
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 7px;
  vertical-align: middle;
  /* Sobre fondo amber del header, forzar texto navy + bg sólido para contraste. */
  background: var(--navy) !important;
  color: #fff !important;
  border-color: var(--navy) !important;
}
.album-group-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--sh-sm);
  border-left: 4px solid var(--violet);
}
.album-group-header .agh-flag {
  width: 36px; height: 24px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.album-group-header .agh-flag img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.album-group-header .agh-meta { flex: 1; min-width: 0; }
.album-group-header .agh-name {
  font-size: 15px; font-weight: 800;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.album-group-header .agh-conf {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--violet);
  margin-top: 2px;
}
.album-group-header .agh-count {
  font-size: 16px; font-weight: 800;
  color: var(--green-deep);
  flex-shrink: 0;
}
.album-group-header .agh-count span {
  font-size: 12px; font-weight: 600;
  color: var(--ink-mute);
}

/* Sticker card component */
.sticker {
  width: 100%; aspect-ratio: 3 / 4;
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.2);
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--top) 0%, var(--top) 33%, var(--mid) 33%, var(--mid) 66%, var(--bot) 66%, var(--bot) 100%);
  padding: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; transition: transform 0.1s;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.sticker:active { transform: scale(0.93); }
.sticker.readonly { cursor: default; }
.sticker.readonly:active { transform: none !important; }
.sticker.readonly:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.sticker.missing { filter: saturate(0.25) brightness(0.85); }
.sticker .country {
  background: rgba(255,255,255,0.85);
  color: var(--navy-ink);
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; line-height: 1;
  align-self: flex-start;
}
.sticker .status-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  position: absolute; top: 6px; right: 6px;
}
.sticker.missing .status-dot { background: var(--coral); }
.sticker .num {
  font-family: var(--font-display); font-weight: 700;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  text-align: center; font-size: 22px;
  position: relative; z-index: 2;
}
.sticker .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0.22;
}
.sticker .repeat-badge {
  position: absolute; top: -4px; left: -4px; z-index: 3;
  background: var(--amber); color: var(--navy-ink);
  border-radius: 999px; padding: 2px 6px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 10px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid #fff;
}

/* ============================================================
   Mascots
   ============================================================ */
.mascot {
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}
.mascot-img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.28));
  pointer-events: none;
}

/* ============================================================
   Screen transitions
   ============================================================ */
/* Transición entre pantallas — estilo Material Shared Axis Y:
   slide vertical sutil + fade + escala muy leve. Curva ease-out-expo
   para una sensación rápida pero suave (acelera al inicio, frena al final). */
@keyframes screenEnter {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* Animar el contenido de la pantalla SIN incluir el .tabbar — así el menú
   inferior se ve persistente entre pantallas (no salta ni se "corta" durante
   la transición). Excluimos también nodos posicionados absolutos típicos
   (modal de onboarding tip, payment modal) para que no salten encima del
   tabbar tampoco. */
.device.screen-enter .screen > *:not(.tabbar) {
  animation: screenEnter 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: 50% 30%;
  will-change: transform, opacity;
}
.device.screen-enter .screen-splash > *:not(.tabbar),
.device.screen-enter .screen-role-gate > *:not(.tabbar) {
  animation: none !important;
}

/* ============================================================
   Splash screen
   ============================================================ */
.screen-splash {
  background: radial-gradient(ellipse at 50% 0%, var(--navy-soft) 0%, var(--navy-ink) 75%);
  color: #fff;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
}
.splash-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.splash-album {
  width: 220px; height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 2px rgba(255,255,255,0.08);
  animation: splashPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes splashPop {
  from { opacity: 0; transform: scale(0.7) translateY(30px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.splash-title {
  margin-top: 22px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 1; letter-spacing: -0.5px;
  display: flex; align-items: baseline; gap: 6px;
  animation: splashFade 0.6s 0.3s ease-out both;
}
.splash-title .swaps { color: var(--green); }
.splash-title .year  { color: var(--amber); font-size: 22px; }
@keyframes splashFade { from { opacity: 0; } to { opacity: 1; } }
.splash-sub {
  margin-top: 12px;
  font-size: 13px; opacity: 0.7;
  animation: splashFade 0.6s 0.5s ease-out both;
}
.splash-dots {
  display: flex; gap: 6px; margin-top: 18px;
  animation: splashFade 0.6s 0.6s ease-out both;
}
.splash-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: splashBounce 1s infinite;
}
.splash-dots span:nth-child(2) { animation-delay: 0.15s; }
.splash-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes splashBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40%           { transform: translateY(-8px); opacity: 1; }
}

/* ============================================================
   Onboarding trio of mascots
   ============================================================ */
.screen-onboarding {
  justify-content: flex-start;
}
.onboarding-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding-bottom: 10px;
}
.onboarding-footer {
  position: relative; z-index: 2;
}
.mascot-trio {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0;
  min-height: 170px;
}
.mascot-trio-img {
  min-height: 200px;
  align-items: center;
  animation: trioFront 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mascot-trio-img img {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
  pointer-events: none;
  user-select: none;
}
.mascot-trio .mascot-slot {
  display: flex; align-items: flex-end;
  transition: transform 0.2s;
}
.mascot-trio .mascot-slot.front {
  z-index: 3;
  animation: trioFront 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mascot-trio .mascot-slot.back:nth-of-type(1) {
  margin-right: -24px;
  z-index: 2;
  animation: trioLeft 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mascot-trio .mascot-slot.back:nth-of-type(3) {
  margin-left: -24px;
  z-index: 2;
  animation: trioRight 0.6s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes trioFront { from { opacity: 0; transform: translateY(20px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes trioLeft  { from { opacity: 0; transform: translate(10px, 20px) rotate(6deg); } to { opacity: 1; transform: translate(0, 0) rotate(-3deg); } }
@keyframes trioRight { from { opacity: 0; transform: translate(-10px, 20px) rotate(-6deg); } to { opacity: 1; transform: translate(0, 0) rotate(3deg); } }

.onboarding-title {
  margin-top: 14px;
  color: #fff;
}
.onboarding-title .swaps { color: var(--green); }
.onboarding-title .year  { color: var(--amber); font-size: 28px; margin-left: 6px; }

.mascot-trio .shout {
  position: absolute; top: -2px; right: 22px;
  background: var(--amber); color: var(--navy-ink);
  padding: 4px 10px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; transform: rotate(8deg);
  box-shadow: var(--sh-md);
  animation: shoutPop 0.4s 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes shoutPop { from { opacity: 0; transform: rotate(8deg) scale(0); } to { opacity: 1; transform: rotate(8deg) scale(1); } }

/* ============================================================
   Register — avatar sub label
   ============================================================ */
.screen-register .avatar-btn {
  transition: transform 0.12s, background 0.15s;
}
.screen-register .avatar-btn:active {
  transform: scale(0.96);
}
.screen-register .avatar-btn .avatar-sub {
  font-size: 10px; font-weight: 600;
  color: var(--ink-mute);
  margin-top: 2px;
}
.screen-register .avatar-btn.sel .avatar-sub { color: rgba(255,255,255,0.75); }

/* ============================================================
   Sticker tap feedback
   ============================================================ */
.sticker {
  transition: transform 0.12s, filter 0.2s, box-shadow 0.15s;
}
.sticker:not(.readonly):active { transform: scale(0.95); }
.sticker:not(.readonly):hover { box-shadow: 0 6px 14px rgba(0,0,0,0.22); }

/* Sticker flip pulse when state toggles */
@keyframes stickerPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ============================================================
   Album — empty state
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 30px 10px;
  display: flex; flex-direction: column;
  align-items: center;
  color: var(--ink);
}

/* ============================================================
   Stub screen
   ============================================================ */
.screen-stub {
  background: var(--cream);
  justify-content: center; align-items: center;
  padding: 24px;
}
.stub-inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.stub-badge {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,198,66,0.2);
  color: var(--amber-deep);
  border: 1px solid rgba(230,169,10,0.35);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}

/* ============================================================
   Typography extras
   ============================================================ */
.t-ink { color: var(--ink); }
.t-xs  { font-size: 11px; }

/* ============================================================
   Spinner
   ============================================================ */
.spinner {
  width: 40px; height: 40px; margin: 20px auto 0;
  border: 4px solid var(--violet);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Screen 05 · Parent Verify (COPPA)
   ============================================================ */
.screen-parent-verify { background: var(--cream); }
.verify-body {
  flex: 1; overflow-y: auto;
  padding: 20px;
}
.verify-progress {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.verify-progress .seg {
  flex: 1; height: 6px; border-radius: 3px;
  background: var(--line-dark);
}
.verify-progress .seg.on { background: var(--violet); }

.verify-step {
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.verify-step .mascot-img { margin-bottom: 4px; }
.verify-step h2 { margin: 8px 0 4px; }
.verify-step .verify-desc {
  font-size: 13px; line-height: 1.45;
  margin: 0 0 16px;
}
.verify-step .verify-desc.center { text-align: center; }
.verify-step .verify-desc b { color: var(--violet-deep); }
.verify-done {
  align-items: center; text-align: center;
  padding-top: 20px;
}
.verify-card {
  margin-top: 6px;
  padding: 14px; border-radius: 12px;
  background: var(--paper);
  border: 2px solid var(--line);
  font-family: var(--font-mono, monospace); font-size: 15px;
  display: flex; align-items: center; gap: 8px;
  color: var(--ink);
}
.card-chip {
  width: 28px; height: 18px; border-radius: 3px;
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
}
.card-digits { letter-spacing: 2px; }
.verify-note {
  margin-top: 16px;
  padding: 12px; border-radius: 12px;
  background: rgba(25, 232, 138, 0.09);
  border: 1px solid rgba(25, 232, 138, 0.3);
  font-size: 12px; color: var(--green-deep);
  display: flex; gap: 8px; align-items: flex-start;
}
.verify-actions {
  margin-top: 20px;
  display: flex; gap: 8px;
}
.verify-actions .btn-ghost { max-width: 110px; background: rgba(11,30,79,0.08); color: var(--ink); border-color: var(--line); }
.verify-actions .btn-violet { flex: 1; }

/* ============================================================
   Screen 06 · Parent Dashboard
   ============================================================ */
.screen-parent-dashboard { background: var(--cream); }
.screen-parent-dashboard .phone-header {
  background: linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 100%);
  padding-bottom: 18px;
}
.dash-greet {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.dash-hello { font-size: 12px; opacity: 0.85; }
.kids-row {
  display: flex; gap: 8px; margin-top: 14px;
  position: relative; z-index: 2;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  margin-left: -4px; margin-right: -4px;
  padding: 4px 4px 8px;
}
.kids-row::-webkit-scrollbar { height: 4px; }
.kids-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 2px; }
.kid-pill {
  flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start;
  min-width: 0; padding: 10px; border-radius: 14px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; gap: 8px;
  position: relative;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.kid-pill:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.4);
}
.kid-pill:active { transform: scale(0.98); }
.kid-pill .kid-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.kid-pill .kid-meta { flex: 1; min-width: 0; }
.kid-pill .kid-nick {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kid-pill .kid-age { font-size: 10px; opacity: 0.75; color: #fff; }
.kid-badge {
  background: var(--coral); color: #fff;
  border-radius: 999px;
  min-width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px; padding: 0 6px;
}
.kid-remove {
  position: absolute;
  top: -6px; right: -6px;
  width: 22px; height: 22px;
  background: rgba(11, 30, 79, 0.9);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.4);
  z-index: 4;
  line-height: 1;
  transition: background 0.15s, transform 0.1s;
}
.kid-remove:hover { background: #B33A3A; transform: scale(1.1); }
.kid-remove:active { transform: scale(0.95); }

.dash-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 28px;
}

.dash-section-title {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.3px;
  color: var(--ink-soft);
}
.dash-section-title.coral { color: var(--coral-deep); }
.dash-section-title.green { color: var(--green-deep); }
.dash-section-title.amber { color: var(--amber-deep, #b84a00); }

/* ─── Tienda inline en parent-dashboard ──────────────── */
.parent-shop-kidsel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.parent-shop-kidsel-label {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.parent-shop-kidsel-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.parent-shop-kidsel-pill {
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 999px; padding: 5px 12px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer;
}
.parent-shop-kidsel-pill.active {
  background: var(--amber); color: var(--navy-ink);
  border-color: var(--amber);
}
.parent-shop-card {
  background: #fff; border: 1.5px solid var(--amber);
  border-radius: 16px; padding: 14px 14px 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px rgba(255,196,66,0.18);
}
.parent-shop-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.parent-shop-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.4px; color: var(--navy-ink);
  display: flex; align-items: center; gap: 6px;
}
.parent-shop-star { color: #b84a00; font-size: 16px; }
.parent-shop-price {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--font-display);
}
.parent-shop-price b { font-size: 18px; color: var(--navy-ink); font-weight: 800; }
.parent-shop-price span { font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.parent-shop-sub {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.35;
  margin-bottom: 8px;
}
.parent-shop-bullets {
  list-style: none; padding: 0; margin: 0 0 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.parent-shop-bullets li {
  font-size: 12.5px; color: var(--navy-ink); line-height: 1.3;
}
.parent-shop-idols-preview {
  display: flex; gap: 8px; margin: 4px 0 12px;
  overflow-x: auto;
}
.parent-shop-idol {
  flex: 0 0 56px; height: 56px; border-radius: 12px;
  overflow: hidden; background: #f7f1e5;
  border: 1px solid var(--line);
}
.parent-shop-idol img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.parent-shop-cta {
  width: 100%; padding: 12px;
  font-size: 14px; font-weight: 800;
}

.dash-empty {
  padding: 16px; text-align: center;
  color: var(--ink-mute); font-size: 13px;
  background: #fff; border-radius: 14px;
  border: 1px dashed var(--line-dark);
}

/* Request card */
.request-card {
  background: #fff; border-radius: 16px; padding: 14px;
  margin-bottom: 10px;
  border: 2px solid var(--coral);
  box-shadow: 0 2px 0 var(--coral);
}
.request-card-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.request-ago { font-size: 11px; color: var(--ink-mute); }
.request-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--ink);
}
.request-trade {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px; border-radius: 12px;
  background: var(--cream);
}
.request-swap {
  font-family: var(--font-display); font-weight: 700;
  color: var(--ink-soft); font-size: 16px;
}
.request-zone {
  flex: 1; text-align: right; font-size: 11px; color: var(--ink-soft);
  min-width: 0;
}
.request-zone-name { font-weight: 700; color: var(--ink); }
.request-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.btn-sm {
  flex: 1; padding: 10px; border-radius: 10px;
  border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  transition: transform 0.08s;
}
.btn-sm:active { transform: translateY(1px); }
.btn-sm.ghost {
  background: #fff; color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-sm.green {
  background: var(--green); color: var(--navy-ink);
  box-shadow: 0 2px 0 var(--green-deep);
}

/* Mini sticker card (used in dashboard request + ticket) */
.mini-card {
  width: 42px; height: 56px; border-radius: 6px;
  flex-shrink: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  font-family: var(--font-display);
}
.mini-country {
  background: rgba(255,255,255,0.9); color: var(--navy-ink);
  font-size: 8px; font-weight: 700;
  padding: 1px 3px; border-radius: 2px;
  align-self: flex-start;
}
.mini-num {
  color: #fff; font-size: 14px; font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  text-align: center;
}

/* Meeting card */
.meeting-card {
  background: #fff; border-radius: 14px;
  padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.meeting-stripe {
  width: 4px; height: 40px; border-radius: 2px;
  background: var(--green);
}
.meeting-body { flex: 1; }
.meeting-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
}
.meeting-meta { font-size: 11px; color: var(--ink-mute); }

/* Premium banner inside dashboard */
.premium-banner {
  width: 100%; margin-top: 18px;
  padding: 16px; border-radius: 18px;
  border: 1px solid rgba(255,198,66,0.4);
  background: linear-gradient(135deg, var(--navy-ink), var(--navy));
  color: #fff; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  position: relative; overflow: hidden;
  text-align: left;
}
.premium-banner > * { position: relative; z-index: 2; }
.premium-crown { font-size: 32px; }
.premium-meta { flex: 1; }
.premium-banner .premium-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--amber);
}
.premium-banner .premium-sub { font-size: 12px; opacity: 0.85; }
.premium-chev { font-size: 20px; }

/* Quick tiles grid */
.quick-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
/* Cuando hay 3 tiles, el último ocupa el ancho completo para no dejar hueco */
.quick-grid > .quick-tile:nth-child(3):last-child { grid-column: 1 / -1; }
.quick-tile {
  padding: 12px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer; text-align: left;
  box-shadow: var(--sh-sm);
  transition: transform 0.1s, box-shadow 0.1s;
}
.quick-tile:active { transform: translateY(1px); }
.quick-tile:hover { box-shadow: var(--sh-md); }
.tile-icon { font-size: 22px; }
.tile-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
}
.tile-sub { font-size: 11px; color: var(--ink-mute); }

/* ============================================================
   Screen 07 · Approve Request
   ============================================================ */
.screen-approve { background: var(--cream); }
.approve-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 10px;
}

.info-card {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  margin-bottom: 12px;
}
.info-label {
  font-size: 11px; font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.participants {
  display: flex; align-items: center; gap: 8px;
}
.participant {
  flex: 1; display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.participant-avatar {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.participant-avatar.green-bg  { background: rgba(25,232,138,0.14); }
.participant-avatar.violet-bg { background: var(--violet-soft); }
.participant-nick {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.participant-swap {
  font-size: 20px; flex-shrink: 0;
  color: var(--ink-soft);
}
.other-parent-row {
  margin-top: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--cream);
  font-size: 11px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 6px;
}
.other-parent-row b { color: var(--ink); }

/* Trade row */
.trade-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
}
.trade-side { text-align: center; }
.trade-kind {
  font-size: 10px; font-weight: 700;
  margin-bottom: 6px;
}
.trade-kind.green { color: var(--green-deep); }
.trade-kind.coral { color: var(--coral-deep); }
.trade-arrows {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px; color: var(--ink-soft); font-size: 20px;
  padding: 0 4px;
}

/* Big sticker (used in approve) */
.big-sticker {
  width: 96px; height: 128px;
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.2);
  position: relative; overflow: hidden;
  padding: 8px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.big-sticker .country {
  background: rgba(255,255,255,0.85); color: var(--navy-ink);
  padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; line-height: 1;
  align-self: flex-start;
}
.big-sticker .status-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
  position: absolute; top: 8px; right: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.big-sticker .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.big-sticker .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  text-align: center;
  position: relative; z-index: 2;
}

/* Where & When */
.where-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.where-row:last-child { margin-bottom: 0; }
.where-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.where-icon.park {
  background: #D8F4DE; color: var(--green-deep);
}
.where-icon.time {
  background: rgba(123,76,255,0.12);
}
.where-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--ink);
}

/* Safety checklist */
.safety-checklist {
  background: rgba(25,232,138,0.08);
  border: 1px solid rgba(25,232,138,0.3);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
}
.safety-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--green-deep);
  margin-bottom: 6px;
}
.safety-item {
  font-size: 12px; color: var(--green-deep);
  display: flex; gap: 6px; padding: 3px 0;
}
.safety-item.fail { color: var(--coral-deep, #B00020); font-weight: 700; }
.safety-checklist.has-fail {
  background: #FFE8E8;
  border-color: #F5BCBC;
}
.safety-checklist.has-fail .safety-title { color: #B00020; }

/* Pickers zona/horario en parent-approve */
.approval-pick-label {
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin: 14px 0 6px;
}
.approval-pick-opts {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.approval-opt {
  background: var(--cream); border: 2px solid var(--line);
  border-radius: 10px; padding: 8px 14px;
  font-size: 14px; font-weight: 600; color: var(--navy-ink);
  cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.approval-opt.sel {
  border-color: var(--violet); background: rgba(124,77,255,0.10);
  color: var(--violet);
}
.approval-opt:hover:not(.sel) { border-color: var(--violet-soft, #b39ddb); }

/* Approve footer — dual buttons */
.approve-footer {
  padding: 12px 18px 24px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px;
}
.approve-footer .btn { padding: 14px 10px; }
.approve-footer .btn.btn-danger { flex: 1; }
.approve-footer .btn.btn-primary { flex: 2; }

/* ============================================================
   Screen 08 · Premium Offer
   ============================================================ */
/* Bump de especificidad (0,2,1) para ganarle a .device[data-kind="mobile"] .screen
   que setea overflow:hidden y bloqueaba el scroll interno. */
.device .screen.screen-premium {
  background: var(--navy-ink);
  color: #fff;
  padding: 0;
  overflow-y: auto;
}
.screen-premium > * { position: relative; z-index: 2; }
.premium-back-row {
  padding: 56px 18px 0;
  flex-shrink: 0;
}
.icon-btn.dark {
  background: rgba(255,255,255,0.1);
}
.icon-btn.dark:hover { background: rgba(255,255,255,0.18); }

.premium-hero {
  padding: 10px 20px 10px;
  text-align: center;
}
.premium-trio {
  min-height: 120px;
  margin-bottom: 8px;
}
.premium-chip {
  margin: 6px 0 10px;
  font-size: 12px; padding: 4px 12px;
  background: rgba(255,198,66,0.2);
  color: var(--amber);
  border-color: rgba(255,198,66,0.35);
}
.premium-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1; margin: 4px 0 0;
}
.premium-title .amber-accent { color: var(--amber); }
.premium-tagline {
  font-size: 13px; color: rgba(255,255,255,0.7);
  max-width: 290px; margin: 10px auto 0;
}

.premium-features {
  padding: 16px 20px 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.feature-row {
  padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; gap: 12px;
}
.feature-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; }
.feature-meta { flex: 1; min-width: 0; }
.feature-title {
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
}
.feature-sub {
  font-size: 11px; color: rgba(255,255,255,0.6);
}
.feature-check {
  color: var(--amber); font-size: 18px;
  flex-shrink: 0;
}

.price-card {
  margin: 10px 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--amber), #FF9A3D);
  color: var(--navy-ink);
  box-shadow: 0 14px 30px rgba(255,154,61,0.3);
}
.price-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; opacity: 0.75;
}
.price-value {
  display: flex; align-items: baseline; gap: 4px; margin-top: 2px;
}
.price-value .amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 42px; line-height: 1;
}
.price-value .per {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
}
.price-note { font-size: 11px; opacity: 0.75; margin-top: 4px; }

.premium-footer {
  padding: 12px 20px 28px;
  flex-shrink: 0;
}

/* CTA inline en el hero (visible above-the-fold) */
.premium-cta {
  padding: 14px 20px 4px;
}
.premium-cta .btn { width: 100%; }

/* Header de la sección de features (después del precio) */
.premium-features-head {
  padding: 18px 20px 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* Cerrar sesión (kid premium / parent dashboard) */
.kp-signout {
  display: block;
  margin: 24px auto 12px;
  padding: 10px 22px;
  background: var(--coral, #e8423f);
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: filter 0.15s;
}
.kp-signout:hover {
  filter: brightness(1.1);
}

/* Filtro de selecciones · buscador con dropdown */
.country-filter {
  position: relative;
  padding: 6px 16px 10px;
}
.cf-row {
  display: flex; align-items: stretch; gap: 8px;
}
.cf-row .cf-search-wrap { flex: 1; min-width: 0; }
.cf-reps-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0 10px;
  background: #fff;
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--ink-soft, #667085);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.08s;
  flex-shrink: 0;
}
.cf-reps-toggle:hover { border-color: var(--amber, #FFC642); color: var(--navy-ink, #061230); }
.cf-reps-toggle:active { transform: scale(0.96); }
.cf-reps-toggle.on {
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 100%);
  border-color: #B88300;
  color: #3d2400;
  box-shadow: 0 2px 6px rgba(255,154,61,0.35);
}
.cf-reps-icon { font-size: 14px; line-height: 1; }
.cf-reps-label { letter-spacing: 0.3px; }
.cf-reps-count {
  background: rgba(11,30,79,0.12);
  color: var(--navy-ink, #061230);
  font-size: 11px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 2px;
}
.cf-reps-toggle.on .cf-reps-count {
  background: rgba(0,0,0,0.18);
  color: #1a0e00;
}
@media (max-width: 360px) {
  .cf-reps-label { display: none; }  /* en pantallas chicas solo icono + count */
  .cf-reps-toggle { padding: 0 8px; }
}

.cf-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.cf-search-icon {
  position: absolute;
  left: 14px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0.6;
}
.cf-search {
  width: 100%;
  padding: 10px 38px 10px 38px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.cf-search::placeholder { color: var(--ink-soft, #9aa3b2); font-weight: 500; }
.cf-search:focus {
  border-color: var(--violet);
  box-shadow: 0 0 0 3px rgba(123, 76, 255, 0.18);
}
.cf-clear-search {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-mute);
  padding: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.cf-clear-search:hover { color: var(--ink); }
.cf-dropdown-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}
.cf-dropdown-btn.open { color: var(--violet); }
.cf-dropdown-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
}

/* Dropdown de resultados */
.cf-dropdown {
  position: absolute;
  z-index: 30;
  top: calc(100% - 6px);
  left: 16px;
  right: 16px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
  padding: 4px;
}
.cf-empty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
}
.cf-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: background 0.1s;
}
.cf-option:hover { background: rgba(123, 76, 255, 0.08); }
.cf-option.fav {
  background: linear-gradient(90deg, rgba(255, 200, 56, 0.18), rgba(255, 200, 56, 0));
  border-bottom: 1px solid rgba(255, 200, 56, 0.35);
  margin-bottom: 4px;
}
.cf-option.fav:hover { background: linear-gradient(90deg, rgba(255, 200, 56, 0.32), rgba(255, 200, 56, 0.06)); }
.cf-fav-star {
  margin-left: auto;
  font-size: 14px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
.cf-option-code {
  font-weight: 800;
  letter-spacing: 0.04em;
  min-width: 38px;
}
.cf-option-name { color: var(--ink-soft); }

/* Chip de país ya seleccionado (con × para limpiar) */
.cf-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1.5px solid var(--violet);
  background: rgba(123, 76, 255, 0.08);
  border-radius: 999px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.cf-name { white-space: nowrap; }
.cf-name b { color: var(--violet); margin-right: 4px; }
.cf-clear {
  width: 22px; height: 22px;
  border: none;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cf-clear:hover { background: #5C3FCC; }

/* Bandera (rectangulito 3 franjas) — usado en chips y dropdown */
.cf-flag-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.cf-flag {
  width: 22px; height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* Hint del álbum (cómo usar +/-) */
.album-help {
  margin: 10px 16px 6px;
  padding: 10px 36px 10px 14px;
  background: rgba(123, 76, 255, 0.08);
  border: 1px solid rgba(123, 76, 255, 0.2);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
  position: relative;
}
.album-help b { color: var(--ink); }
.album-help-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  border: none; background: transparent;
  color: var(--ink-mute);
  font-size: 18px; font-weight: 700;
  line-height: 1; cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.album-help-close:hover {
  background: rgba(123, 76, 255, 0.15);
  color: var(--violet);
}

/* Celda de figurita (sticker + contador +/-) */
.sticker-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sticker-cell .sticker { position: relative; }

/* Contador 3D verde overlay sobre la figurita (cuando count > 0) */
.sticker-count-3d {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 900;
  font-size: 40px;
  line-height: 1;
  color: #FFD93D;
  -webkit-text-stroke: 2.5px #000;
  text-stroke: 2.5px #000;
  /* Capa interna amarilla de profundidad + halo oscuro para separar del fondo */
  text-shadow:
    0 1px 0 #E8B82A,
    0 2px 0 #C99820,
    0 3px 0 #A87A18,
    0 4px 0 #875F12,
    0 0 5px rgba(0, 0, 0, 0.55),
    0 4px 8px rgba(0, 0, 0, 0.4);
  transform: rotate(-7deg);
  pointer-events: none;
  z-index: 6;
  letter-spacing: -0.04em;
  user-select: none;
  paint-order: stroke fill;
  padding: 0 4px;          /* margen de seguridad para 3 dígitos */
  white-space: nowrap;
}
@media (max-width: 420px) {
  .sticker-count-3d { font-size: 34px; }
}

/* Contador +/- compacto bajo la figurita (sin número, ese va en la card) */
.sticker-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}
.sc-btn {
  width: 26px; height: 26px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.08s, box-shadow 0.08s;
}
/* Botón "+" en verde pastel con efecto 3D suave (degradé + relieve) */
.sc-btn[data-action="inc-sticker"] {
  background: linear-gradient(180deg, #C8EBD2 0%, #97D6AE 100%);
  border-color: #6FBE8B;
  color: #1F6E3D;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 1.5px 0 #5AA877,
    0 2px 3px rgba(31,110,61,0.15);
}
.sc-btn[data-action="inc-sticker"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #D5F0DD 0%, #A4DDB9 100%);
  border-color: #5AA877;
}
.sc-btn[data-action="inc-sticker"]:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.12),
    0 0 0 #5AA877;
}
/* Botón "−" en rojo pastel con efecto 3D suave (degradé + relieve) */
.sc-btn[data-action="dec-sticker"] {
  background: linear-gradient(180deg, #F8D2D2 0%, #ECABAB 100%);
  border-color: #D58282;
  color: #8A2A2A;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 1.5px 0 #BD6B6B,
    0 2px 3px rgba(138,42,42,0.15);
}
.sc-btn[data-action="dec-sticker"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #FBDDDD 0%, #F2B8B8 100%);
  border-color: #BD6B6B;
}
.sc-btn[data-action="dec-sticker"]:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.12),
    0 0 0 #BD6B6B;
}
.sc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Empty state del boost draft (sin cromos en el álbum) */
.bd-empty {
  padding: 24px 20px;
  margin: 12px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: var(--paper);
  text-align: center;
}
.bd-empty-title {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}
.bd-empty-desc {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ============================================================
   Album banners (confirmed / pending variants)
   ============================================================ */
.banner.confirmed {
  background: linear-gradient(100deg, var(--green), var(--green-deep));
  color: #fff;
  animation: confirmedPulse 2s ease-in-out infinite;
}
.banner.confirmed .banner-title b { color: #fff; }
.banner.pending {
  background: linear-gradient(100deg, var(--amber), #FF9A3D);
  color: var(--navy-ink);
}
.screen-album .banner.pending .banner-title b { color: var(--navy-ink); }
@keyframes confirmedPulse {
  0%, 100% { box-shadow: var(--sh-md); }
  50%      { box-shadow: 0 10px 28px rgba(25,232,138,0.45); }
}

/* Banner Inbox · propuestas recibidas (amarillo, animado, centrado) */
.banner.inbox-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  background: linear-gradient(100deg, #FFD93D 0%, #FFC700 50%, #FFD93D 100%);
  background-size: 200% 100%;
  color: var(--navy-ink);
  border: 2px solid #E5A800;
  text-align: center;
  animation: inboxShine 2.4s ease-in-out infinite, inboxBounce 1.6s ease-in-out infinite;
  cursor: pointer;
  padding: 14px 16px;
}
.banner.inbox-banner .ib-icon {
  font-size: 30px;
  line-height: 1;
  display: inline-block;
  animation: inboxWiggle 1.2s ease-in-out infinite;
}
.banner.inbox-banner .ib-text { display: flex; flex-direction: column; gap: 2px; }
.banner.inbox-banner .ib-title {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  color: var(--navy-ink);
}
.banner.inbox-banner .ib-title b { color: #B45309; }
.banner.inbox-banner .ib-sub {
  font-size: 11px; font-weight: 600; opacity: 0.85;
}
@keyframes inboxShine {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes inboxBounce {
  0%, 100% { transform: translateY(0); box-shadow: 0 4px 14px rgba(229,168,0,0.35); }
  50%      { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(229,168,0,0.55); }
}
@keyframes inboxWiggle {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* Card de propuesta saliente (Mis propuestas hechas) */
.outgoing-proposal-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(13,20,38,0.06);
}
.opc-head { margin-bottom: 10px; }
.opc-from {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--navy);
}
.opc-trade {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; margin: 8px 0 10px;
}
.opc-side { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.opc-label {
  font-size: 10px; font-weight: 700; color: var(--ink-mute);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.opc-country-name { font-size: 11px; color: var(--ink-mute); text-align: center; }
.opc-arrow { font-size: 22px; color: var(--ink-mute); }
.opc-state {
  background: #FFF8E1;
  color: #92400E;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px; font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
}
.opc-actions { display: flex; }
.opc-actions .btn { width: 100%; }
.sent-list { width: 100%; max-width: 460px; margin: 0 auto; }

/* ============================================================
   Screen 09 · Map
   ============================================================ */
.screen-map { background: var(--cream); }
.map-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #E8F0DF 0%, #DCE7D3 100%);
}
.map-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.zone-pin-btn {
  position: absolute;
  transform: translate(-50%, -100%);
  background: transparent; border: none; padding: 0;
  cursor: pointer;
  z-index: 3;
}
.zone-pin {
  position: relative;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  transition: transform 0.15s;
}
.zone-pin-btn:hover .zone-pin { transform: translateY(-2px) scale(1.05); }
.zone-pin-btn:active .zone-pin { transform: translateY(0) scale(0.97); }
.zone-pin-body {
  width: 42px; height: 42px; border-radius: 50% 50% 50% 6px;
  background: var(--green);
  transform: rotate(-45deg);
  border: 2.5px solid #fff;
  display: flex; align-items: center; justify-content: center;
}
.zone-pin.sponsored .zone-pin-body { background: var(--amber); }
.zone-pin-icon {
  transform: rotate(45deg);
  font-size: 18px;
}
.zone-pin-label {
  margin-top: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; color: var(--ink);
  background: #fff; padding: 2px 5px; border-radius: 5px;
  white-space: nowrap; text-align: center;
  border: 1px solid var(--line);
}
.zone-pin-pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,198,66,0.55) 0%, transparent 70%);
  animation: zonePulse 2s infinite;
}
@keyframes zonePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.3); opacity: 0.4; }
}
.map-home {
  position: absolute;
  left: 45%; top: 54%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 10px;
  padding: 4px 8px;
  font-family: var(--font-display); font-size: 10px; font-weight: 700;
  color: var(--navy);
  box-shadow: var(--sh-sm);
  z-index: 2;
}
.map-guide {
  position: absolute; bottom: 110px; left: 12px;
  background: #fff; border-radius: 16px; padding: 8px;
  display: flex; align-items: center; gap: 8px;
  max-width: 220px;
  box-shadow: var(--sh-md);
  border: 1px solid var(--line);
  font-size: 11px; color: var(--ink-soft); line-height: 1.3;
  z-index: 4;
}
.map-legend {
  position: absolute; top: 12px; right: 12px;
  padding: 8px; border-radius: 12px;
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
  font-size: 10px; font-family: var(--font-display);
  color: var(--ink-soft);
  box-shadow: var(--sh-sm);
  z-index: 4;
}

/* Botón flotante "Buscar en esta área" (estilo Google Maps) — top izquierda */
.map-search-here {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 6;
  background: #fff;
  color: var(--navy-deep, #0B1E4F);
  border: 1.5px solid rgba(11,30,79,0.18);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, box-shadow 0.1s;
  animation: msearchPop 0.22s cubic-bezier(.2,.9,.3,1.2);
}
.map-search-here:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.map-search-here:active {
  transform: scale(0.96);
}
@keyframes msearchPop {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.legend-row {
  display: flex; align-items: center; gap: 4px; margin-bottom: 3px;
}
.legend-row:last-child { margin-bottom: 0; }
.legend-row .dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.legend-row .dot.green { background: var(--green); }
.legend-row .dot.amber { background: var(--amber); }

/* Map bottom sheet */
.map-sheet {
  position: absolute; bottom: 80px; left: 10px; right: 10px;
  background: #fff; border-radius: 20px; padding: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  z-index: 5;
  animation: sheetUp 0.22s ease-out;
}
@keyframes sheetUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.sheet-top {
  display: flex; align-items: center; gap: 10px;
}
.sheet-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.sheet-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.icon-btn.light {
  background: var(--cream); color: var(--ink-soft);
  font-size: 14px; width: 28px; height: 28px; border-radius: 8px;
}
.sheet-promo {
  margin-top: 10px;
  padding: 8px; border-radius: 10px;
  background: rgba(255,198,66,0.13);
  border: 1px dashed var(--amber-deep);
  font-size: 11px; color: var(--amber-deep);
  display: flex; gap: 6px; align-items: center;
}
.sheet-actions {
  display: flex; gap: 8px; margin-top: 10px;
}

/* Zone icons (shared across map + propose) */
.zone-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.zone-icon.park    { background: #D8F4DE; border: 1px solid rgba(15,185,108,0.25); }
.zone-icon.school  { background: #FFE4C2; border: 1px solid rgba(215,122,0,0.25); }
.zone-icon.kiosk   { background: #FFE0CE; border: 1px solid rgba(214,53,53,0.25); }
.zone-icon.library { background: #E1DAF6; border: 1px solid rgba(91,46,219,0.25); }
.zone-icon.restaurant  { background: #FFE2D6; border: 1px solid rgba(214,80,40,0.25); }
.zone-icon.cafe        { background: #EFE0CC; border: 1px solid rgba(140,90,40,0.30); }
.zone-icon.supermarket { background: #DCEEFB; border: 1px solid rgba(48,108,180,0.25); }
.zone-icon.gas_station { background: #F5E6E6; border: 1px solid rgba(180,60,60,0.25); }
.zone-icon.shopping    { background: #FFF1C9; border: 1px solid rgba(214,160,40,0.30); }

/* ============================================================
   Screen 10 · Propose wizard
   ============================================================ */
.screen-propose { background: var(--cream); }
.screen-propose .phone-header .step-dots {
  display: flex; gap: 4px;
  align-items: center;
}
.step-dots .dot-step {
  width: 18px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.2);
}
.step-dots .dot-step.on { background: var(--green); }

.propose-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 16px;
}
.section-label {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 0 8px;
}
.section-label:first-child { margin-top: 0; }
.section-label.dim { opacity: 0.4; }
.section-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--line-dark); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.section-num.on {
  background: var(--green); color: var(--navy-ink);
}
.section-title {
  flex: 1;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--ink);
}
.section-mascot { opacity: 0.6; }

.propose-row {
  background: #fff;
  border-radius: 16px; padding: 12px;
  border: 2px solid var(--line);
  overflow-x: auto;
  display: flex; gap: 8px;
  scrollbar-width: thin;
}
.propose-row.dim { opacity: 0.4; pointer-events: none; }
.propose-empty {
  flex: 1; padding: 18px 10px;
  text-align: center;
  color: var(--ink-mute); font-size: 13px;
}

.propose-pick-wrap { position: relative; flex-shrink: 0; }
.propose-pick {
  padding: 0; border: none; background: transparent;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}
.propose-pick:active:not([disabled]) { transform: scale(0.95); }

/* toggle: cromo disponible para dar (coloreado, borde verde suave) */
.propose-pick.available .propose-sticker {
  box-shadow: 0 0 0 2.5px var(--green);
  opacity: 1;
}
/* toggle: cromo excluido (gris) */
.propose-pick.excluded .propose-sticker {
  filter: grayscale(1) brightness(0.6);
  box-shadow: none;
  opacity: 0.5;
}
/* toggle: faltante seleccionado (quiero este) */
.propose-pick.want-sel .propose-sticker {
  box-shadow: 0 0 0 3px var(--green), 0 8px 20px rgba(0,0,0,0.18);
  opacity: 1;
}
.propose-pick.want-sel .propose-sticker::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 4px 4px 0 0;
  font-size: 12px; font-weight: 900;
  color: var(--green);
  pointer-events: none;
}
/* toggle: faltante no seleccionado (gris) */
.propose-pick.want-idle .propose-sticker {
  filter: grayscale(1) brightness(0.55);
  box-shadow: none;
  opacity: 0.5;
}

/* compatibilidad con sel anterior */
.propose-pick.sel .propose-sticker {
  box-shadow: 0 0 0 3px var(--green), 0 8px 20px rgba(0,0,0,0.18);
}
.propose-pick[disabled] { cursor: default; }
.propose-pick-wrap .pick-count {
  position: absolute; top: -4px; left: -4px; z-index: 3;
  background: var(--amber); color: var(--navy-ink);
  border-radius: 999px; padding: 1px 5px;
  font-family: var(--font-display); font-weight: 800; font-size: 9px;
  border: 1.5px solid #fff;
}

/* Propose-specific mini sticker */
.propose-sticker {
  width: 72px; height: 96px;
  border-radius: 12px; border: 1px solid rgba(0,0,0,0.2);
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--top) 0%, var(--top) 33%, var(--mid) 33%, var(--mid) 66%, var(--bot) 66%, var(--bot) 100%);
  padding: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.propose-sticker.missing { filter: saturate(0.25) brightness(0.85); }
.propose-sticker .country {
  background: rgba(255,255,255,0.85); color: var(--navy-ink);
  padding: 2px 5px; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; line-height: 1;
  align-self: flex-start;
}
.propose-sticker .status-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
  position: absolute; top: 6px; right: 6px;
}
.propose-sticker.missing .status-dot { background: var(--coral); }
.propose-sticker .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.propose-sticker .num {
  font-family: var(--font-display); font-weight: 700;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  text-align: center; font-size: 18px;
  position: relative; z-index: 2;
}

/* Zones list in propose */
.propose-zones {
  background: #fff; border-radius: 16px; padding: 6px;
  border: 2px solid var(--line);
}
.propose-zones.dim { opacity: 0.4; pointer-events: none; }
.propose-zone {
  width: 100%; padding: 10px;
  background: transparent; border: none;
  display: flex; align-items: center; gap: 10px;
  cursor: pointer; border-radius: 12px;
  text-align: left;
  transition: background 0.15s;
}
.propose-zone:hover:not([disabled]) { background: rgba(25,232,138,0.08); }
.propose-zone.sel { background: rgba(25,232,138,0.13); }
.propose-zone .zone-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.propose-zone .zone-sub { font-size: 11px; color: var(--ink-mute); }
.zone-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--line-dark);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.zone-radio.sel {
  background: var(--green); border-color: var(--green);
}

/* Day chips (scroll horizontal) */
.day-chips {
  display: flex; gap: 8px; overflow-x: auto;
  padding-bottom: 8px; margin-bottom: 10px;
  scrollbar-width: thin;
}
.day-chips.dim { opacity: 0.4; pointer-events: none; }
.day-chip {
  flex: 0 0 auto;
  padding: 10px 14px; border-radius: 20px;
  border: 2px solid var(--line);
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
  white-space: nowrap;
}
.day-chip:hover:not([disabled]) { border-color: var(--navy-soft); }
.day-chip:active:not([disabled]) { transform: scale(0.96); }
.day-chip.sel {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* Aviso "ya tenés una propuesta activa" */
.propose-active-notice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: #FFF5E0; border: 1px solid #F2C45A;
  margin-bottom: 12px;
}
.propose-active-notice .pan-icon { font-size: 22px; line-height: 1; }
.propose-active-notice .pan-text {
  flex: 1; font-size: 13px; line-height: 1.35; color: #6A4A0E;
}

/* Time slots grid — 4 cols para horarios exactos (08:00, 09:00…) */
.slots-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.slots-grid.dim { opacity: 0.4; pointer-events: none; }
.slot-btn {
  padding: 10px 6px; border-radius: 12px;
  border: 2px solid var(--line);
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
.slot-btn:hover:not([disabled]) { border-color: var(--navy-soft); }
.slot-btn:active:not([disabled]) { transform: scale(0.97); }
.slot-btn.sel {
  background: var(--navy); border-color: var(--navy); color: #fff;
}

/* Reminder card at bottom */
.reminder {
  margin-top: 18px;
  padding: 12px; border-radius: 14px;
  background: var(--violet-soft);
  border: 1px dashed var(--violet);
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--violet-deep); line-height: 1.4;
}
.reminder b { color: var(--violet-deep); }

.propose-footer {
  padding: 12px 18px 16px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: row; gap: 10px; align-items: stretch;
  /* Desktop: en flujo normal, deja espacio para el tabbar absoluto */
  margin-bottom: 78px;
}
/* Override del .btn { width: 100% } para que los dos quepan lado a lado. */
.propose-footer .btn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  padding: 14px 12px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Mobile: footer fijo encima del tabbar fijo */
@media (max-width: 480px) {
  .propose-footer {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0;
    margin-bottom: 0;
    z-index: 48;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.10);
  }
  /* El contenido de propose necesita padding-bottom para no quedar
     oculto detrás del footer+tabbar fijos */
  .screen-propose {
    padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px));
  }
}

/* ============================================================
   Screen 11 · Sent (solicitud enviada)
   ============================================================ */
.screen-sent { background: var(--cream); text-align: center; }

/* ── Pantalla Propuestas (tab unificado) ── */
.screen-propuestas {
  background: var(--cream);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.prop-subtabs {
  display: flex; gap: 8px;
  padding: 0 18px 4px;
  margin-top: 10px;
}
.pstab {
  flex: 1;
  padding: 9px 12px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
  font-family: var(--font-body);
  font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pstab.active {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.pstab:first-child.active {
  background: var(--violet);
  color: #fff;
  border-color: var(--violet);
}
.pstab:last-child.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.pstab-count {
  background: #e53935;
  color: #fff;
  border-radius: 10px;
  font-size: 10px; font-weight: 800;
  min-width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px;
}
.prop-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 90px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 12px;
}
.prop-body.prop-empty {
  justify-content: center;
  text-align: center;
}
.screen-sent .btn-ghost {
  background: rgba(11,30,79,0.06);
  color: var(--navy);
  border-color: var(--line);
}
.sent-info {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(123, 76, 255, 0.08);
  border: 1px solid rgba(123, 76, 255, 0.22);
  border-radius: 12px;
  font-size: 13px;
  color: var(--navy);
  line-height: 1.4;
  max-width: 320px;
}

/* Wizard de propose · input "A quién" --------------------- */
.receiver-nick-row {
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 4px 0 6px;
  transition: border-color 0.15s;
}
.receiver-nick-row:focus-within { border-color: var(--violet); }
.receiver-nick-row.dim { opacity: 0.5; pointer-events: none; }
.receiver-nick-row .at-sign {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--violet);
  font-size: 16px;
}
.receiver-nick-row input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
}
.receiver-hint {
  font-size: 11px;
  color: var(--ink-mute);
  padding: 0 4px 8px;
  line-height: 1.4;
}
.receiver-suggestions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px;
}
.receiver-suggestions:empty { margin: 0; }
.rs-empty {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
}
.rs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.12s, background 0.12s;
}
.rs-item:hover { border-color: var(--violet); background: rgba(123, 76, 255, 0.04); }
.rs-item.same-fav {
  background: linear-gradient(90deg, rgba(255, 200, 56, 0.18), rgba(255, 200, 56, 0));
  border-color: #FFC642;
}
.rs-item.same-fav:hover { background: linear-gradient(90deg, rgba(255, 200, 56, 0.32), rgba(255, 200, 56, 0.06)); }
.rs-avatar {
  display: flex;
  flex: 0 0 auto;
}
.rs-meta { flex: 1; min-width: 0; }
.rs-nick {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
}
.rs-fav {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 1px;
}

/* Barra de ubicación en el step 3 del wizard de propose -- */
.zones-location-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(123, 76, 255, 0.06);
  border: 1px solid rgba(123, 76, 255, 0.18);
  border-radius: 10px;
  margin-bottom: 8px;
}
.zlb-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zlb-change {
  background: transparent;
  border: 1.5px solid var(--violet);
  color: var(--violet-deep);
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
}
.zlb-change:hover { background: rgba(123, 76, 255, 0.1); }

/* Botón GPS del radar — verde para diferenciarlo del manual (violeta) */
.zlb-gps {
  background: var(--green, #16a34a);
  color: #fff;
  border: 1.5px solid var(--green, #16a34a);
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.3);
  transition: transform 0.1s, box-shadow 0.1s;
}
.zlb-gps:hover  { box-shadow: 0 3px 9px rgba(22, 163, 74, 0.45); }
.zlb-gps:active { transform: scale(0.96); }
.zlb-gps.loading,
.zlb-gps:disabled {
  background: var(--ink-mute, #94a3b8);
  border-color: var(--ink-mute, #94a3b8);
  cursor: progress;
  box-shadow: none;
  opacity: 0.85;
}
@media (max-width: 380px) {
  .radar-location-bar { flex-wrap: wrap; }
  .radar-location-bar .zlb-label { flex-basis: 100%; margin-bottom: 4px; }
}

/* Marketplace de propuestas abiertas (propose) ----------- */
.propose-marketplace { margin-bottom: 14px; }
.propose-marketplace:empty { display: none; }
.mp-header {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: var(--violet-deep);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin: 6px 4px 8px;
}
.mp-icon { font-size: 18px; }
.mp-card {
  background: #fff;
  border: 2px solid var(--violet);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 14px rgba(123,76,255,0.12);
}
.mp-loading {
  display: flex; align-items: center; gap: 10px;
  border-color: var(--line);
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 700;
}
.mp-loading .spinner.small {
  width: 18px; height: 18px;
  border: 2.5px solid #e6e3da;
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.mp-card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.mp-avatar { display: flex; }
.mp-card-nick {
  font-family: var(--font-display);
  font-weight: 800; font-size: 15px;
  color: var(--navy);
}
.mp-chip { margin-left: auto; font-size: 10px; }
.mp-trade {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
}
.mp-side { flex: 1; text-align: center; }
.mp-side-label {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.mp-arrow {
  font-size: 20px; color: var(--violet);
  font-weight: 800;
}
.mp-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  text-align: center;
}
.mp-claim {
  width: 100%;
  font-size: 14px;
  padding: 10px;
}
.mp-divider {
  text-align: center;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 8px;
  padding: 8px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}

/* Hint del wizard (multi-select de zonas / slots) -------- */
.propose-multiselect-hint {
  font-size: 11px;
  color: var(--ink-mute);
  margin: 0 4px 6px;
  line-height: 1.4;
}
.propose-multiselect-hint b { color: var(--violet-deep); }
.zone-check {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: transparent;
  flex-shrink: 0;
}
.zone-check.sel {
  background: var(--green);
  border-color: var(--green-deep);
  color: var(--navy-ink);
}

/* Modal de claim — selector de zona/slot ----------------- */
.claim-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 30, 79, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: onbFadeIn 0.18s ease-out;
}
.claim-picker-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  max-width: 360px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 14px 40px rgba(0,0,0,0.4);
}
.cpc-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.cpc-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--navy);
}
.cpc-close {
  background: transparent; border: none;
  font-size: 22px; line-height: 1;
  color: var(--ink-mute); cursor: pointer;
  padding: 0 4px;
}
.cpc-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0 0 14px;
  line-height: 1.4;
}
.cpc-section-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  color: var(--violet-deep);
  margin: 12px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cpc-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cpc-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
.cpc-opt:hover { border-color: var(--violet); background: rgba(123, 76, 255, 0.04); }
.cpc-opt.sel {
  border-color: var(--green-deep);
  background: rgba(25, 232, 138, 0.12);
  color: var(--navy);
}
.cpc-opt-icon { font-size: 16px; }
.cpc-opt-text { flex: 1; }
.cpc-opt-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: transparent;
  flex-shrink: 0;
}
.cpc-opt.sel .cpc-opt-check {
  background: var(--green);
  border-color: var(--green-deep);
  color: var(--navy-ink);
}
.cpc-confirm {
  width: 100%;
  margin-top: 14px;
  font-size: 14px;
}

/* Pantalla "Radar" (tab) --------------------------------- */
.screen-radar {
  display: flex;
  flex-direction: column;
  background: var(--cream);
}
.radar-location-bar {
  margin: 10px 16px 0;
}
.radar-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 100px;
  display: flex;
  flex-direction: column;
}

.radar-scanning-fs {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  gap: 24px;
}
.radar-msg { text-align: center; color: var(--ink); }
.radar-msg-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 6px;
  color: var(--navy);
}
.radar-msg-sub {
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 280px;
  line-height: 1.4;
}

/* Botón "Buscar de nuevo" — en la lista de resultados y debajo de la barra */
.radar-rescan {
  align-self: flex-end;
  margin: 4px 0 10px;
}

.radar-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 16px 12px;
  gap: 8px;
}
.radar-empty .t-h2 {
  font-size: 18px;
  line-height: 1.2;
  max-width: 300px;
  margin: 0;
}
.radar-empty .t-soft {
  font-size: 12.5px;
  max-width: 280px;
  line-height: 1.4;
  margin: 0;
}
.radar-empty .btn { margin-top: 4px; }
.radar-list-fs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.radar-kid-stats {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
}
.radar-kid-stats .rks-give { color: var(--green-deep, #0BA572); }
.radar-kid-stats .rks-want { color: var(--coral-deep, #C13A3A); }

/* Pill destinatario en el footer del propose ------------- */
.propose-receiver-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(123, 76, 255, 0.1);
  border: 1.5px solid var(--violet);
  border-radius: 10px;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 10px;
}
.propose-receiver-pill b { color: var(--violet-deep); }
.prp-clear {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.prp-clear:hover { color: var(--coral-deep, #B00020); }

/* Sección de búsqueda de receptor para adultos */
.adult-receiver-section {
  margin: 14px 0;
  padding: 12px;
  background: rgba(255, 196, 66, 0.10);
  border: 1.5px solid rgba(255, 196, 66, 0.45);
  border-radius: 12px;
}
.adult-receiver-label {
  font-weight: 800;
  font-size: 13px;
  color: var(--navy);
  margin-bottom: 8px;
}
.adult-receiver-search {
  display: flex;
  gap: 8px;
}
.adult-receiver-search input {
  flex: 1;
  padding: 10px 12px;
  border: 1.5px solid rgba(11,30,79,0.18);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
}
.adult-receiver-search input:focus {
  outline: none;
  border-color: var(--amber, #FFC642);
}
.adult-receiver-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
}


/* Pantalla de scanning ----------------------------------- */
.radar-scanning { padding: 8px 0 16px; }
.radar-screen {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 28px rgba(74, 222, 128, 0.45), 0 0 18px rgba(74, 222, 128, 0.25);
  background: #091b2c;
}
.radar-svg {
  display: block;
  width: 100%; height: 100%;
}
.radar-grid { position: absolute; inset: 0; }
.radar-circle {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px solid rgba(25, 232, 138, 0.35);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.radar-circle-1 { width: 80%;  height: 80%; }
.radar-circle-2 { width: 56%;  height: 56%; }
.radar-circle-3 { width: 28%;  height: 28%; }
.radar-cross-h, .radar-cross-v {
  position: absolute;
  background: rgba(25, 232, 138, 0.25);
}
.radar-cross-h { top: 50%; left: 0; right: 0; height: 1px; }
.radar-cross-v { left: 50%; top: 0; bottom: 0; width: 1px; }
.radar-sweep {
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 50%;
  transform-origin: 0% 0%;
  background: conic-gradient(from 0deg, rgba(25,232,138,0.7) 0deg, rgba(25,232,138,0) 60deg);
  border-radius: 0 100% 0 0;
  animation: radarSweep 2.4s linear infinite;
}
@keyframes radarSweep {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.radar-blip {
  position: absolute;
  width: 10px; height: 10px;
  background: #19E88A;
  border-radius: 50%;
  box-shadow: 0 0 10px #19E88A, 0 0 20px rgba(25,232,138,0.6);
  opacity: 0;
  animation: blipShow 2.4s ease-in-out infinite;
}
@keyframes blipShow {
  0%, 40% { opacity: 0; transform: scale(0.4); }
  50%     { opacity: 1; transform: scale(1.2); }
  70%     { opacity: 0.8; transform: scale(1); }
  100%    { opacity: 0; transform: scale(0.6); }
}

/* Lista de resultados ------------------------------------ */
.radar-results { padding: 4px 0; }
.radar-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  max-height: 50vh;
  overflow-y: auto;
}
.radar-kid {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
  position: relative;
  transition: border-color 0.12s, background 0.12s, transform 0.12s;
}
.radar-kid:hover { border-color: var(--violet); transform: translateY(-1px); }
.radar-kid.boosted {
  border: 2.5px solid #B88300;
  background: linear-gradient(135deg, #FFF1C9 0%, #FFE48A 100%);
  padding-top: 24px;
  box-shadow:
    0 0 0 3px rgba(255, 198, 66, 0.45),
    0 6px 20px rgba(255, 154, 61, 0.40);
  animation: radarBoostedPulse 1.8s ease-in-out infinite;
  position: relative;
  overflow: visible;
}
.radar-kid.boosted::before {
  /* Halo dorado exterior con gradient cónico para efecto premium */
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, #FFD84D, #FF9A3D, #FFD84D);
  z-index: -1;
  opacity: 0.55;
  filter: blur(6px);
  pointer-events: none;
}
.radar-kid.boosted:hover {
  background: linear-gradient(135deg, #FFE48A 0%, #FFD84D 100%);
  transform: translateY(-2px);
}
.radar-kid.boosted .radar-kid-avatar {
  border: 2.5px solid #B88300;
  box-shadow: 0 0 0 3px #fff, 0 0 12px rgba(255, 154, 61, 0.5);
  border-radius: 50%;
}
.radar-kid.boosted .radar-kid-nick {
  color: #3d2400;
  font-weight: 900;
}
.radar-kid.boosted .radar-kid-cta {
  color: #B88300;
}
@keyframes radarBoostedPulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px rgba(255, 198, 66, 0.45),
      0 6px 20px rgba(255, 154, 61, 0.40);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(255, 198, 66, 0.65),
      0 10px 28px rgba(255, 154, 61, 0.65);
  }
}
.radar-boost-badge {
  position: absolute;
  top: -11px;
  left: 12px;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  color: #3d2400;
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 11px;
  border-radius: 999px;
  letter-spacing: 1.2px;
  border: 2px solid #B88300;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 3px 8px rgba(255,154,61,0.55);
  animation: radarBadgeShine 2.4s ease-in-out infinite;
  z-index: 2;
}
@keyframes radarBadgeShine {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-2px) rotate(2deg); }
}
.radar-kid-avatar { display: flex; flex-shrink: 0; }
.radar-kid-meta { flex: 1; min-width: 0; }
.radar-kid-nick {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
}
.radar-kid-fav {
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 1px;
}
.radar-kid-cta {
  font-size: 22px;
  color: var(--violet);
  font-weight: 800;
  flex-shrink: 0;
}

/* Toast notification global -------------------------------- */
.global-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--violet);
  border-radius: 12px;
  padding: 12px 14px 12px 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  z-index: 9999;
  max-width: calc(100vw - 32px);
  min-width: 260px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
  animation: toastIn 0.28s cubic-bezier(.2,.9,.3,1.2);
}
.global-toast.toast-success { border-color: var(--green-deep, #19E88A); }
.global-toast.toast-warn    { border-color: #FFB020; }
.global-toast.toast-error   { border-color: #B00020; }
.global-toast.toast-out {
  animation: toastOut 0.22s ease-in forwards;
}
.toast-close {
  background: transparent;
  border: none;
  color: var(--ink-mute);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--ink); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

/* Modal del sistema (alert/confirm/prompt custom) --------- */
.app-modal {
  position: fixed; inset: 0;
  z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: appModalFadeIn 0.18s ease-out;
}
.app-modal.app-modal-out { animation: appModalFadeOut 0.18s ease-in forwards; }
.app-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(11, 30, 79, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.app-modal-card {
  position: relative;
  background: var(--cream, #F7F1E5);
  color: var(--navy-ink, #0B1E4F);
  border-radius: 22px;
  padding: 22px 22px 18px;
  max-width: 360px; width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.45),
              0 0 0 4px rgba(244,196,48,0.18);
  border: 2px solid var(--navy-deep, #0B1E4F);
  animation: appModalPop 0.22s cubic-bezier(.2,.9,.3,1.2);
  font-family: 'Nunito', system-ui, sans-serif;
}
.app-modal-tone-warn   .app-modal-card { box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,176,32,0.25); }
.app-modal-tone-danger .app-modal-card { box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 4px rgba(176,0,32,0.25); }
.app-modal-title {
  font-family: var(--font-display, 'Fredoka', system-ui, sans-serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--navy-deep, #0B1E4F);
}
.app-modal-msg {
  font-size: 14.5px; line-height: 1.5;
  color: rgba(11,30,79,0.88);
  margin-bottom: 14px;
}
.app-modal-input {
  width: 100%;
  border: 2px solid rgba(11,30,79,0.18);
  background: #fff;
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 15px;
  font-family: inherit;
  color: var(--navy-ink, #0B1E4F);
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  margin-bottom: 14px;
}
.app-modal-input:focus {
  border-color: var(--green, #19E88A);
  box-shadow: 0 0 0 3px rgba(25,232,138,0.22);
}
.app-modal-actions {
  display: flex; justify-content: flex-end; gap: 10px;
}
.app-modal-btn {
  border: 0; border-radius: 11px;
  padding: 11px 18px;
  font-size: 14px; font-weight: 800;
  font-family: inherit; cursor: pointer;
  transition: transform 0.1s, background 0.12s;
}
.app-modal-btn:active { transform: scale(0.97); }
.app-modal-btn-cancel {
  background: rgba(11,30,79,0.08);
  color: var(--navy-deep, #0B1E4F);
}
.app-modal-btn-cancel:hover { background: rgba(11,30,79,0.14); }
.app-modal-btn-ok {
  background: var(--navy-deep, #0B1E4F);
  color: #FFD43A;
  box-shadow: 0 3px 0 rgba(0,0,0,0.18);
}
.app-modal-btn-ok:hover { background: #0a1a45; }
.app-modal-tone-danger .app-modal-btn-ok { background: #B00020; color: #fff; }
.app-modal-tone-warn   .app-modal-btn-ok { background: #C77700; color: #fff; }
.app-modal-footer-link {
  display: block; width: 100%; background: none; border: none;
  font-size: 12px; color: var(--ink-mute); text-align: center;
  margin: 14px 0 6px; padding: 4px 0;
  cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.app-modal-footer-link:hover { color: var(--violet); }
@keyframes appModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes appModalFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes appModalPop {
  from { transform: scale(0.88) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}

/* Onboarding tip overlay (popup one-time) ----------------- */
.onb-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 30, 79, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 200;
  cursor: pointer;
}
.onb-card {
  background: #fff;
  border-radius: 18px;
  padding: 22px 22px 18px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  cursor: default;
}
@keyframes onbPop {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1);     opacity: 1; }
}
.onb-mascot { display: flex; justify-content: center; margin-bottom: 6px; }
.onb-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--navy);
  margin: 4px 0 8px;
}
.onb-body {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 16px;
}
.onb-cta {
  width: 100%;
  font-size: 14px;
}
.sent-body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px;
}
.sent-mascot-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 4px;
}
@keyframes sentFly {
  from { transform: translateY(0) rotate(-3deg); }
  to   { transform: translateY(-8px) rotate(3deg); }
}
.sent-shout {
  position: absolute; top: 10px; right: -8px;
  background: var(--amber); color: var(--navy-ink);
  padding: 4px 10px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  transform: rotate(8deg);
  box-shadow: var(--sh-sm);
}
.sent-title { margin: 10px 0 6px; }
.sent-desc {
  max-width: 280px; margin: 0 auto 22px;
  font-size: 14px; line-height: 1.4;
}
.sent-rows {
  width: 100%; max-width: 280px;
  display: flex; flex-direction: column; gap: 10px;
}
.sent-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: #fff; border-radius: 12px;
  border: 1px solid var(--line);
  font-size: 12px; color: var(--ink);
  text-align: left;
}
.sent-badge {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
  flex-shrink: 0;
}
.sent-badge.green { background: var(--green); color: #fff; }
.sent-badge.amber { background: var(--amber); color: var(--navy-ink); }

/* ── Incoming proposal card (soy el receptor) ── */
.incoming-section { width: 100%; max-width: 360px; margin-bottom: 8px; }
.incoming-section-label {
  font-size: 13px; font-weight: 700; color: var(--navy); margin-bottom: 10px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.incoming-proposal-card {
  background: #fff; border-radius: 18px;
  border: 2px solid var(--green);
  padding: 16px 16px 14px; margin-bottom: 12px;
  box-shadow: 0 4px 18px rgba(0,180,110,0.10);
  text-align: left;
}
.ipc-head { margin-bottom: 12px; }
.ipc-from { font-size: 15px; color: var(--ink); }
.ipc-trade {
  display: flex; align-items: flex-start; justify-content: center; gap: 12px;
  margin-bottom: 12px;
}
.ipc-side { text-align: center; }
.ipc-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--ink-mute); margin-bottom: 4px;
}
.ipc-country-name {
  font-size: 11px; color: var(--ink-mute); margin-top: 4px; line-height: 1.3;
}
.ipc-arrow { font-size: 22px; color: var(--navy-soft); margin-top: 28px; }
.ipc-day {
  font-size: 12px; color: var(--ink-mute); margin-bottom: 12px;
}
.ipc-section-label {
  font-size: 11px; font-weight: 700; color: var(--navy);
  margin: 10px 0 6px; text-transform: uppercase; letter-spacing: 0.05em;
}
.ipc-opts {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.ipc-opts.ipc-slots { gap: 6px; }
.ipc-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 10px;
  border: 2px solid var(--line); background: #f8f8f8;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.ipc-opt.sel {
  border-color: var(--green); background: var(--green-soft, #e6faf0); color: var(--navy-ink);
}
.ipc-check { font-size: 11px; color: var(--green); }
.ipc-actions { display: flex; gap: 10px; margin-top: 14px; }
.ipc-accept { flex: 3; }
.ipc-reject { flex: 1; min-width: 46px; }

/* ============================================================
   Screen 12 · Ticket
   ============================================================ */
.screen-ticket { background: var(--cream); }
.screen-ticket .phone-header.green {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-deep) 100%);
}
.ticket-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 30px;
}

.ticket-celebration {
  text-align: center;
  padding: 8px 0 14px;
  position: relative;
}
.ticket-trio { min-height: 100px; margin-bottom: 4px; }
.ticket-hero {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--navy);
  margin-top: 4px;
}

/* The ticket itself */
.ticket {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
  overflow: hidden;
}
.ticket-notch {
  position: absolute; top: 50%;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  transform: translateY(-50%);
}
.ticket-notch.left  { left: -10px; }
.ticket-notch.right { right: -10px; }
.ticket-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.ticket-swap {
  font-family: var(--font-display); font-weight: 800;
  color: var(--ink-soft); font-size: 20px;
}
.ticket-id {
  font-size: 10px; color: var(--ink-mute);
  margin-top: 4px;
}
.ticket-dashed {
  border-top: 2px dashed var(--line-dark);
  margin: 14px -18px;
}
.ticket-middle {
  display: flex; gap: 14px;
}
.qr-wrap {
  width: 140px; height: 140px; flex-shrink: 0;
}
.fake-qr {
  padding: 8px; background: #fff;
  border-radius: 10px;
  border: 1.5px solid var(--ink);
}
.ticket-details { flex: 1; min-width: 0; }
.lv { margin-bottom: 8px; }
.lv-label {
  font-size: 9px; font-weight: 700;
  color: var(--ink-mute); letter-spacing: 0.5px;
}
.lv-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink); line-height: 1.2;
}
.lv-value.mono {
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-weight: 500; font-size: 12px;
}
.ticket-info {
  padding: 10px; border-radius: 10px;
  background: rgba(25,232,138,0.08);
  border: 1px solid rgba(25,232,138,0.35);
  font-size: 11px; color: var(--green-deep);
  display: flex; gap: 6px; align-items: flex-start;
  margin-top: 12px;
}
.ticket-actions {
  display: flex; gap: 8px; margin-top: 14px;
}
.ticket-actions .btn-sm {
  padding: 12px;
}
.ticket-tip {
  margin-top: 14px;
  padding: 12px; border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  display: flex; gap: 10px; align-items: center;
  font-size: 11px; color: var(--ink-soft);
  line-height: 1.4;
}

/* ============================================================
   Fase 4 · Family Premium (Screen 13)
   ============================================================ */
.screen-family-premium { background: var(--cream); }
.screen-family-premium .phone-header {
  background: linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 100%);
}

.fp-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 28px;
}

.fp-status-card {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 12px 28px rgba(91,46,219,0.3);
  position: relative; overflow: hidden;
}
.fp-status-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.fp-status-chip { font-size: 11px; padding: 3px 10px; }
.fp-plan-price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--amber);
}
.fp-plan-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1;
}
.fp-plan-meta {
  font-size: 12px; opacity: 0.8; margin-top: 2px;
}

.fp-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--violet-deep);
  letter-spacing: 0.5px;
  margin: 6px 0 10px;
  display: flex; align-items: center; gap: 6px;
}

.fp-kid-card {
  background: #fff; border-radius: 14px;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
}
.fp-kid-avatar {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--violet-soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fp-kid-meta { flex: 1; min-width: 0; }
.fp-kid-nick {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.fp-kid-sub { font-size: 11px; color: var(--ink-mute); }

.fp-add-kid {
  width: 100%;
  padding: 12px; border-radius: 14px;
  background: transparent;
  border: 2px dashed var(--violet);
  color: var(--violet-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 2px;
}
.fp-add-kid:hover { background: var(--violet-soft); }

.fp-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.fp-tiles > .fp-tile:nth-child(3):last-child { grid-column: 1 / -1; }
.fp-tile {
  padding: 14px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; text-align: left;
  box-shadow: var(--sh-sm);
  transition: transform 0.1s, box-shadow 0.12s;
}
.fp-tile:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.fp-tile:active { transform: translateY(1px); }
.fp-tile-icon { font-size: 22px; }
.fp-tile-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
}
.fp-tile-sub { font-size: 11px; color: var(--ink-mute); }

.fp-benefits {
  background: #fff; border-radius: 14px;
  padding: 14px; border: 1px solid var(--line);
}
.fp-benefit {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink);
  padding: 5px 0;
}
.fp-benefit span { color: var(--green-deep); font-weight: 800; }

/* Premium banner "active" variant */
.premium-banner.active {
  background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-color: rgba(255,198,66,0.6);
}

/* ============================================================
   Fase 4 · History (Screen 14)
   ============================================================ */
.screen-history { background: var(--cream); }
.screen-history .phone-header {
  background: linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.history-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
}

.chart-card {
  background: #fff; border-radius: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.chart-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.5px;
  color: var(--ink-mute);
}
.chart-total { display: flex; align-items: baseline; gap: 4px; }
.chart-total .big {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; color: var(--ink);
}
.chart-total .small { font-size: 12px; color: var(--ink-mute); }

.chart-bars {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 6px;
  height: 120px;
}
.chart-bar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end;
  gap: 6px;
  height: 100%;
}
.chart-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--violet), var(--violet-deep));
  border-radius: 6px 6px 3px 3px;
  min-height: 4px;
  transition: height 0.4s;
}
.chart-bar.current {
  background: linear-gradient(180deg, var(--green), var(--green-deep));
  box-shadow: 0 0 12px rgba(25,232,138,0.4);
}
.chart-bar-label {
  font-size: 10px; color: var(--ink-mute);
  font-family: var(--font-display); font-weight: 600;
}

.history-filters {
  display: flex; gap: 8px;
  overflow-x: auto; padding-bottom: 4px;
  margin-bottom: 12px;
  scrollbar-width: none;
}
.history-filters::-webkit-scrollbar { display: none; }
.history-filter {
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  cursor: pointer; white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s;
}
.history-filter.sel {
  background: var(--navy); color: #fff; border-color: var(--navy);
}

.history-item {
  background: #fff; border-radius: 14px;
  padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.history-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px;
  flex-shrink: 0;
}
.history-icon.green { background: rgba(25,232,138,0.18); color: var(--green-deep); }
.history-icon.coral { background: rgba(255,92,92,0.18); color: var(--coral-deep); }
.history-icon.amber { background: rgba(255,198,66,0.22); color: var(--amber-deep); }
.history-meta { flex: 1; min-width: 0; }
.history-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.history-sub { font-size: 11px; color: var(--ink-mute); }
.history-date {
  font-size: 12px; color: var(--ink-mute);
  font-family: var(--font-mono, monospace);
}

.history-empty {
  text-align: center;
  padding: 24px 10px;
}

.export-btn {
  width: 100%;
  padding: 14px; margin-top: 14px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--violet);
  color: var(--violet-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.export-btn:hover { background: var(--violet-soft); }

/* ============================================================
   Fase 4 · Blocked Zones (Screen 15)
   ============================================================ */
.screen-blocked-zones { background: var(--cream); }
.screen-blocked-zones .phone-header {
  background: linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 100%);
}
.bz-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
}

.bz-mini-map {
  position: relative;
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #DCE7D3;
  margin-bottom: 4px;
}
.bz-map-svg {
  width: 100%; height: 100%;
  display: block;
}
.bz-mini-pin {
  position: absolute;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transform: translate(-50%, -50%);
}
.bz-mini-pin.ok      { background: var(--green); color: #fff; }
.bz-mini-pin.blocked { background: var(--coral); color: #fff; }

.bz-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: #fff; border-radius: 14px;
  border: 1px solid var(--line);
  margin-bottom: 8px;
}
.bz-row.blocked {
  border-color: var(--coral);
  background: rgba(255,92,92,0.03);
}
.bz-meta { flex: 1; min-width: 0; }
.bz-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.bz-sub { font-size: 11px; color: var(--ink-mute); }

.bz-toggle {
  width: 44px; height: 24px; border-radius: 999px;
  background: var(--line);
  border: none; cursor: pointer;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.bz-toggle.on { background: var(--coral); }
.bz-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.bz-toggle.on .bz-toggle-thumb {
  transform: translateX(20px);
}

.bz-note {
  margin-top: 14px;
  padding: 12px;
  background: var(--violet-soft);
  border: 1px dashed var(--violet);
  border-radius: 14px;
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--violet-deep);
  line-height: 1.4;
}

/* ============================================================
   Fase 4 · Billing (Screen 16)
   ============================================================ */
.screen-billing { background: var(--cream); }
.screen-billing .phone-header {
  background: linear-gradient(155deg, var(--violet) 0%, var(--violet-deep) 100%);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}
.billing-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
}

.bill-hero-card {
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 12px 28px rgba(91,46,219,0.3);
  position: relative;
}
.bill-status-chip {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px; padding: 3px 10px;
}
.bill-plan-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 26px; line-height: 1.05;
}
.bill-plan-meta {
  font-size: 13px; opacity: 0.85; margin-top: 4px;
}

.bill-card {
  background: #fff; border-radius: 14px;
  padding: 14px; margin-bottom: 16px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
}
.bill-card-brand {
  width: 48px; height: 32px; border-radius: 6px;
  background: linear-gradient(135deg, var(--amber), var(--amber-deep));
  color: var(--navy-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bill-card-meta { flex: 1; min-width: 0; }
.bill-card-digits {
  font-family: var(--font-mono, monospace);
  font-weight: 500; font-size: 14px;
  color: var(--ink);
  letter-spacing: 1px;
}
.bill-card-sub { font-size: 11px; color: var(--ink-mute); }
.bill-card-change {
  padding: 8px 14px; border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.bill-card-change:hover { background: var(--cream); }

.bill-invoice {
  width: 100%;
  background: #fff; border-radius: 12px;
  padding: 12px; margin-bottom: 8px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, transform 0.1s;
}
.bill-invoice:hover { background: var(--cream); }
.bill-invoice:active { transform: translateY(1px); }
.bill-invoice-meta { flex: 1; min-width: 0; }
.bill-invoice-date {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
}
.bill-invoice-label { font-size: 11px; color: var(--ink-mute); }
.bill-invoice-amount {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.bill-invoice-icon {
  font-size: 16px; color: var(--violet);
}

.bill-cancel {
  width: 100%;
  margin-top: 18px;
  padding: 14px; border-radius: 14px;
  background: #fff;
  border: 2px solid var(--coral);
  color: var(--coral-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  cursor: pointer;
  transition: background 0.15s;
}
.bill-cancel:hover { background: rgba(255,92,92,0.06); }

/* ============================================================
   Fase 5 · Kid Premium (Screen 17 · Coleccionista Dorado)
   ============================================================ */
.screen-kid-premium { background: var(--cream); }
.screen-kid-premium .phone-header.amber {
  padding: 56px 18px 18px;
  position: relative;
}
.screen-kid-premium .phone-header .sub { color: rgba(11,30,79,0.8); }

.kp-star {
  position: absolute;
  top: 60px; right: 18px;
  font-size: 46px;
  transform: rotate(12deg);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.2));
  animation: kpStarBob 3s ease-in-out infinite;
}
@keyframes kpStarBob {
  0%, 100% { transform: rotate(12deg) translateY(0); }
  50%      { transform: rotate(15deg) translateY(-4px); }
}

.kp-hero {
  display: flex; align-items: center; gap: 14px;
  margin-top: 12px;
  color: var(--navy-ink);
  position: relative; z-index: 2;
}
.kp-avatar {
  width: 92px; height: 92px;
  background: transparent;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  /* Marco circular se aplica vía .avatar-with-frame interno */
}
.kp-nick {
  font-size: 12px; font-weight: 700;
  opacity: 0.8; letter-spacing: 0.3px;
}
.kp-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; line-height: 1.1;
}
.kp-level {
  font-size: 12px; font-weight: 700; opacity: 0.85;
  margin-top: 2px;
}

.kp-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 100px;
}

.kp-boost-card {
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(255,198,66,0.18);
  margin-bottom: 14px;
}

/* ─── Card de destacado inline en pantalla Monedas ─── */
.kp-feat-card {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #fffbe6 0%, #fff3c0 100%);
  border: 2px solid var(--amber);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(255,198,66,0.22);
  margin-bottom: 4px;
  cursor: pointer; text-align: left;
  transition: transform 0.15s, box-shadow 0.15s;
}
.kp-feat-card:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(255,198,66,0.18); }
.kp-feat-card.kp-feat-active {
  background: linear-gradient(135deg, #f0fff8 0%, #d6fbe9 100%);
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(25,232,138,0.18);
  cursor: default;
}
.kp-feat-icon { font-size: 28px; flex-shrink: 0; }
.kp-feat-info { flex: 1; }
.kp-feat-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy); }
.kp-feat-sub   { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.kp-feat-cta   {
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  color: #8a5a00; white-space: nowrap;
  background: var(--amber); padding: 6px 12px; border-radius: 10px;
  flex-shrink: 0;
}

/* ─── Avatar con marco circular (cosmético equipado) ─── */
.avatar-with-frame {
  position: relative;
  width: var(--avatar-size, 100px);
  height: var(--avatar-size, 100px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.avatar-frame-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--frame-color, #C58A50);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.5) inset,
    0 4px 14px rgba(0,0,0,0.18);
  pointer-events: none;
  z-index: 2;
}
.avatar-frame-bronce .avatar-frame-ring {
  border-color: #C58A50;
}
.avatar-frame-hielo .avatar-frame-ring {
  border-color: #6CB4E4;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55) inset,
    0 0 14px rgba(108,180,228,0.55),
    0 4px 14px rgba(0,0,0,0.16);
}
.avatar-frame-galaxia .avatar-frame-ring {
  border-image: linear-gradient(135deg, #7B4CFF 0%, #FF5CF5 50%, #4DD0FF 100%) 1;
  border-color: #7B4CFF;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55) inset,
    0 0 16px rgba(123,76,255,0.65),
    0 4px 14px rgba(0,0,0,0.20);
}
.avatar-frame-oro .avatar-frame-ring {
  border-color: #FFC642;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.55) inset,
    0 0 22px rgba(255,198,66,0.85),
    0 6px 18px rgba(255,180,0,0.40);
  animation: avatarGoldRing 2.4s ease-in-out infinite;
}
@keyframes avatarGoldRing {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.55) inset,
      0 0 18px rgba(255,198,66,0.70),
      0 6px 18px rgba(255,180,0,0.38);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255,255,255,0.55) inset,
      0 0 34px rgba(255,225,90,1.0),
      0 8px 28px rgba(255,180,0,0.62);
  }
}
.avatar-frame-inner {
  position: relative;
  z-index: 1;
  width: calc(var(--avatar-size, 100px) - 10px);
  height: calc(var(--avatar-size, 100px) - 10px);
  border-radius: 50%;
  overflow: hidden;
  /* clip-path como belt-and-suspenders por si algún navegador no
     respeta overflow:hidden con border-radius dentro de transform/filter
     ancestors. Garantiza el círculo siempre. */
  clip-path: circle(50%);
  -webkit-clip-path: circle(50%);
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
}
.avatar-frame-inner img,
.avatar-frame-inner .mascot-img {
  /* El IMG llega con `style="height:Xpx;width:auto"` inline desde
     mascotImg() y un `filter: drop-shadow(...)` que se sale del
     border-radius circular. Forzamos a que llene el inner y quitamos
     el shadow para que el clip funcione bien dentro del aro. */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: none !important;
  display: block;
}

/* Aura dorada pulsante para gold avatar/frame */
.avatar-with-frame--gold::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,225,90,0.45) 0%,
    rgba(255,198,66,0.22) 45%,
    rgba(255,198,66,0.05) 70%,
    transparent 85%);
  filter: blur(6px);
  animation: avatarGoldPulse 2.6s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes avatarGoldPulse {
  0%, 100% { transform: scale(0.92); opacity: 0.65; }
  50%      { transform: scale(1.10); opacity: 1.0; }
}

/* Sparkles que rotan alrededor del avatar gold */
.avatar-with-frame--gold::after {
  content: '✨';
  position: absolute;
  top: -6px; right: 4px;
  font-size: calc(var(--avatar-size, 100px) * 0.16);
  filter: drop-shadow(0 0 6px rgba(255,225,90,0.9));
  animation: avatarSparkle 3s ease-in-out infinite;
  z-index: 3;
}
@keyframes avatarSparkle {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 0.95; }
  33%      { transform: scale(1.2) rotate(15deg); opacity: 1; }
  66%      { transform: scale(0.85) rotate(-10deg); opacity: 0.6; }
}

/* ─── Avatar zoom overlay (kid-profile) ─── */
.kpf-avatar-btn {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: transform 0.15s ease;
}
.kpf-avatar-btn:hover { transform: scale(1.06); }
.kpf-avatar-btn:active { transform: scale(0.95); }

.avatar-zoom-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 40%, rgba(11,30,79,0.85) 0%, rgba(8,14,40,0.95) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: avatarZoomFadeIn 0.22s ease;
  cursor: pointer;
  overflow: hidden;
}
@keyframes avatarZoomFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.avatar-zoom-card {
  position: relative;
  background: linear-gradient(155deg, #FFE48A 0%, #FFC642 60%, #FFA82B 100%);
  border: 3px solid #C77700;
  border-radius: 28px;
  padding: 22px 22px 20px;
  max-width: 360px; width: 100%;
  text-align: center;
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.18) inset,
    0 18px 50px rgba(0,0,0,0.45),
    0 0 80px rgba(255,210,80,0.5);
  animation: avatarZoomPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}
@keyframes avatarZoomPop {
  0%   { transform: scale(0.4) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.06) rotate(1deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}

.avatar-zoom-close {
  position: absolute;
  top: 10px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(11,30,79,0.18);
  color: var(--navy-ink);
  border: 0;
  font-size: 22px; font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, transform 0.12s;
  z-index: 2;
}
.avatar-zoom-close:hover {
  background: rgba(11,30,79,0.32);
  transform: scale(1.08);
}

.avatar-zoom-pop {
  display: flex;
  justify-content: center;
  margin: 8px 0 14px;
}

.avatar-zoom-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--navy-ink);
  line-height: 1.15;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}

.avatar-zoom-sub {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(11,30,79,0.85);
  margin-bottom: 18px;
  padding: 0 6px;
}

.avatar-zoom-cta {
  width: 100%;
  background: var(--navy-ink) !important;
  color: #FFD43A !important;
  border: 2px solid rgba(255,255,255,0.18) !important;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;
  transition: filter 0.12s, transform 0.12s;
}
.avatar-zoom-cta:hover { filter: brightness(1.15); }
.avatar-zoom-cta:active { transform: scale(0.97); }

/* ─── Pantalla Mi Perfil (kid-profile) ─── */
.screen-kid-profile { background: var(--cream); }
.kpf-header {
  /* Reducimos el top: el fs-toggle global ya no vive arriba a la derecha,
     así el header puede subir y la flecha queda bien al borde. */
  padding-top: 18px;
  padding-bottom: 14px;
  position: relative;
}
.kpf-star {
  position: absolute;
  bottom: 6px; right: 14px;
  font-size: 28px;
  transform: rotate(14deg);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.22));
  animation: kpfStarBob 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes kpfStarBob {
  0%, 100% { transform: rotate(14deg) translateY(0); }
  50%      { transform: rotate(18deg) translateY(-3px); }
}
.kpf-hero.compact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px 4px;
  position: relative; z-index: 1;
}
.kpf-meta {
  flex: 1;
  min-width: 0;
}
.kpf-coins {
  /* Pill de monedas a la derecha, alineada al avatar (no al nick). */
  align-self: center;
  flex-shrink: 0;
  padding: 5px 11px !important;
  font-size: 13px !important;
}
.kpf-avatar-wrap {
  display: inline-flex;
  flex-shrink: 0;
}
.kpf-meta {
  flex: 1;
  min-width: 0;
}
.kpf-nick {
  font-family: var(--font-display); font-weight: 800;
  font-size: 19px; color: var(--navy-ink);
  letter-spacing: 0.3px;
  line-height: 1.1;
}
.kpf-team-row {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px;
  background: none; border: none; padding: 0;
  cursor: pointer; font: inherit; text-align: left;
}
.kpf-stat-fav-team {
  cursor: pointer; border: none; font-family: inherit; text-align: left;
  transition: transform 0.12s, box-shadow 0.12s;
}
.kpf-stat-fav-team:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,0.10); }
.kpf-stat-fav-team:active { transform: translateY(0); }
.kpf-team-flag-wrap {
  flex-shrink: 0; display: flex; align-items: center;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.kpf-team-flag-wrap img { display: block; }
.kpf-team-name {
  font-size: 13px; font-weight: 700; color: var(--navy-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpf-team-flag {
  width: 18px; height: 13px; border-radius: 2px;
  background-size: cover; background-position: center;
  display: inline-block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.kpf-team-flag.empty {
  background: rgba(11,30,79,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; box-shadow: none;
}
.kpf-feat-chip {
  display: inline-block; margin-top: 6px;
  background: var(--green); color: var(--navy-ink);
  padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(15,185,108,0.3);
}
.kpf-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 92px;
}
.kpf-stats-col {
  display: flex; flex-direction: column;
  gap: 10px; margin-bottom: 16px;
}
.kpf-stat-big {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: var(--sh-sm);
}
.kpf-stat-big .kpf-stat-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.kpf-stat-big .kpf-stat-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; color: var(--navy-ink); line-height: 1;
}
.kpf-stat-big .kpf-stat-of {
  font-size: 16px; color: var(--ink-mute); font-weight: 700;
}
.kpf-stat-big .kpf-stat-label {
  font-size: 13px; color: var(--ink-soft); margin-top: 3px;
  font-weight: 600; letter-spacing: 0.2px;
}
/* ─── Sección PRO en perfil (Avatares + Marcos) ─────── */
.kpf-pro-section {
  margin: 4px 0 14px;
}
.kpf-pro-title {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; padding: 0 2px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 14px; letter-spacing: 2px;
  color: #3d2400;
}
.kpf-pro-title-star {
  font-size: 18px;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
}
.kpf-pro-title-line {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, #FFC642 0%, transparent 100%);
  border-radius: 1px;
}
.kpf-pro-title-status {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: #1b5e20;
  background: #c8e6c9; border: 1px solid #4caf50;
  padding: 3px 8px; border-radius: 999px;
}
.kpf-pro-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-width: 280px; margin: 0 auto;
}
.kpf-pro-card {
  position: relative; overflow: hidden;
  font-family: inherit; cursor: pointer;
  aspect-ratio: 1.25 / 1;
  border-radius: 14px;
  border: 2px solid var(--amber-deep, #c98c00);
  background: linear-gradient(135deg, #FFF1C9 0%, #FFE48A 100%);
  box-shadow: 0 4px 12px rgba(255,198,66,0.28);
  padding: 0;
  transition: transform 0.08s, filter 0.15s, box-shadow 0.18s;
}
.kpf-pro-card:hover { filter: brightness(1.05); transform: translateY(-1px); }
.kpf-pro-card-avatars { pointer-events: none; transition: none; }
.kpf-pro-card-avatars:hover,
.kpf-pro-card-avatars:active { filter: none; transform: none; }
.kpf-pro-card:active { transform: scale(0.97); }
.kpf-pro-card-bg {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-position: center 38%;
  background-size: 72% auto;
  pointer-events: none;
}
.kpf-pro-card-label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 6px 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(11,30,79,0.85) 100%);
  color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px; letter-spacing: 0.4px;
  text-align: center;
}

/* Variante bloqueada (no Pro) */
.kpf-pro-card-locked {
  background: linear-gradient(135deg, #ddd 0%, #b8b8b8 100%);
  border-color: #888;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.kpf-pro-card-locked .kpf-pro-card-bg {
  filter: grayscale(0.95) brightness(0.85);
  opacity: 0.6;
}
.kpf-pro-card-locked .kpf-pro-card-label {
  background: linear-gradient(180deg, transparent 0%, rgba(60,60,60,0.92) 100%);
}
/* Sello "⭐ PRO" arriba a la derecha */
.kpf-pro-card-stamp {
  position: absolute;
  top: 6px; right: -20px;
  transform: rotate(18deg);
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 22px;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  border-top: 2px solid #B88300;
  border-bottom: 2px solid #B88300;
  font-family: var(--font-display);
  font-weight: 900; font-size: 10px; letter-spacing: 1.2px;
  color: #3d2400;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 2;
}
.kpf-pro-card-stamp-star { font-size: 10px; line-height: 1; }

/* Banner ancho "⭐ Eres Pro hasta ..." encima de las tarjetas de stats */
.kpf-pro-banner {
  display: block; width: 100%; box-sizing: border-box;
  padding: 10px 16px; margin-bottom: 14px; border-radius: 12px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.4px; text-align: center;
  border: 2px solid #B88300;
  cursor: pointer;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  color: #3d2400;
  box-shadow: 0 3px 10px rgba(255,154,61,0.35);
  transition: filter 0.12s, transform 0.08s;
}
.kpf-pro-banner:hover  { filter: brightness(1.06); }
.kpf-pro-banner:active { transform: scale(0.98); }

/* Pill "⭐ PRO" en el header del perfil cuando está activo */
.kpf-pro-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 12px; letter-spacing: 1px;
  border: 2px solid #B88300;
  cursor: pointer;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  color: #3d2400;
  box-shadow: 0 3px 10px rgba(255,154,61,0.45);
  transition: transform 0.08s, filter 0.12s;
}
.kpf-pro-pill-active:hover { filter: brightness(1.08); }
.kpf-pro-pill-active:active { transform: scale(0.95); }

.kpf-cta-card {
  width: 100%; cursor: pointer; font-family: inherit;
  background: linear-gradient(135deg, #FFE48A 0%, #FFC642 100%);
  border: 2px solid #C77700;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(255,198,66,0.30);
  text-align: left;
}
.kpf-cta-card:hover { filter: brightness(1.04); }
.kpf-cta-icon { font-size: 30px; flex-shrink: 0; }
.kpf-cta-meta { flex: 1; min-width: 0; }
.kpf-cta-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--navy-ink);
}
.kpf-cta-sub {
  font-size: 11.5px; color: rgba(11,30,79,0.72);
  margin-top: 2px;
}
.kpf-cta-chev {
  font-size: 22px; font-weight: 800; color: var(--navy-ink);
}
.kpf-cta-card--pending {
  background: linear-gradient(135deg, #FFF1C9 0%, #FFE48A 100%);
  border-color: #B88300;
}
.kpf-cta-badge {
  background: var(--coral); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; line-height: 1;
  border-radius: 999px;
  padding: 5px 10px;
  box-shadow: 0 2px 8px rgba(255,92,92,0.4);
}

/* ─── Pantalla Editar equipo favorito ─── */
.screen-edit-team { background: var(--cream); }
.edit-team-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
}
.edit-team-current {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 14px rgba(255,198,66,0.20);
}
.edit-team-current.empty {
  border-color: var(--line);
  box-shadow: var(--sh-sm);
}
.edit-team-current .kpf-team-flag {
  width: 36px; height: 26px; border-radius: 4px;
}
.edit-team-current-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--ink-soft);
}
.edit-team-current-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: var(--navy-ink);
  margin-top: 2px;
}
.btn-sm.danger {
  background: var(--coral); color: #fff;
  border: 0; border-radius: 10px;
  padding: 7px 12px;
  font-family: inherit; font-weight: 800; font-size: 12px;
  cursor: pointer;
}
.btn-sm.danger:hover { filter: brightness(1.08); }
.edit-team-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 6px;
}
.edit-team-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer; font-family: inherit; text-align: left;
  transition: background 0.12s, border-color 0.12s;
}
.edit-team-row:hover { background: rgba(255,198,66,0.08); border-color: var(--amber); }
.edit-team-row.sel {
  border-color: var(--amber);
  background: rgba(255,198,66,0.14);
}
.edit-team-row .kpf-team-flag {
  width: 24px; height: 17px; border-radius: 3px;
}
.etr-code {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: var(--navy-ink);
  min-width: 36px;
}
.etr-name {
  flex: 1; font-size: 13px; color: var(--ink-soft); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etr-check {
  color: var(--amber-deep); font-weight: 800; font-size: 16px;
}
.edit-team-empty {
  text-align: center; color: var(--ink-mute);
  font-size: 13px; padding: 20px;
}
.kpf-lang {
  margin: 14px 0 12px;
  padding: 12px 14px;
  background: #1a2a4d;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
}
.kpf-lang-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.7px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 8px;
}
.kpf-lang-buttons { display: flex; gap: 8px; }
.kpf-lang-btn {
  flex: 1; padding: 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: transparent; color: rgba(255,255,255,0.75);
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.kpf-lang-btn:hover { background: rgba(255,255,255,0.05); }
.kpf-lang-btn.active {
  background: var(--green, #19E88A);
  border-color: var(--green, #19E88A);
  color: #0B1E4F;
}

.kpf-signout {
  width: 100%;
  background: var(--coral); color: white;
  border: 0; border-radius: 14px;
  padding: 14px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.4px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,92,92,0.30);
}
.kpf-signout:hover { filter: brightness(1.08); }
.kpf-signout:disabled { opacity: 0.6; cursor: wait; }
.kpf-go-parent {
  width: 100%; background: var(--amber); color: var(--navy-ink);
  border: 0; border-radius: 14px; padding: 14px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; letter-spacing: 0.4px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,196,66,0.30); margin-bottom: 10px;
}
.kpf-go-parent:hover { filter: brightness(1.08); }
.shop-ask-parent {
  background: rgba(255,198,66,0.12); border: 1.5px solid var(--amber);
  border-radius: 12px; padding: 12px 14px;
  font-size: 13px; color: var(--navy-ink); text-align: center; line-height: 1.4;
}

/* En el album header, el avatar ahora viene envuelto: ajustar contenedor.
   Mantener inline-flex para que align-items/justify-content centren el
   .avatar-frame-inner dentro del aro (de lo contrario queda desfasado
   arriba-izquierda y la foto parece salirse del aro). */
.profile-avatar .avatar-with-frame {
  display: inline-flex;
}

/* ─── Tarjeta Destacar en Radar (Adult Profile) ─── */
.kp-feature-card {
  width: calc(100% - 32px);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #fff3cd 0%, #ffe8a8 100%);
  border: 2px solid var(--amber);
  border-radius: 16px;
  padding: 14px;
  margin: 14px 16px;
  box-shadow: 0 4px 12px rgba(251,192,45,0.20);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: box-shadow 0.2s;
  box-sizing: border-box;
}
.kp-feature-card:hover {
  box-shadow: 0 6px 18px rgba(251,192,45,0.35);
}
.kp-feature-icon {
  font-size: 28px; flex-shrink: 0;
}
.kp-feature-meta {
  flex: 1; min-width: 0;
}
.kp-feature-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--navy-ink);
}
.kp-feature-sub {
  font-size: 11.5px; color: rgba(11,30,79,0.65);
  line-height: 1.35; margin-top: 2px;
}
.kp-feature-price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 16px; color: #fff;
  white-space: nowrap;
  background: var(--violet);
  padding: 6px 12px; border-radius: 10px;
}

/* ─── Tarjeta de Monedas en Kid Premium ─── */
.kp-coins-card {
  background: linear-gradient(135deg, #FFE48A 0%, #FFC642 100%);
  border: 2px solid #C77700;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(255,198,66,0.30);
  margin-bottom: 14px;
}
.kp-coins-head {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.kp-coins-count {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; line-height: 1; color: var(--navy-ink);
  white-space: nowrap;
  background: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  border: 2px solid rgba(11,30,79,0.10);
  box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}
.kp-coins-desc { flex: 1; min-width: 0; }
.kp-coins-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.7px; color: var(--navy-ink);
}
.kp-coins-sub {
  font-size: 11.5px; color: rgba(11,30,79,0.72);
  line-height: 1.35; margin-top: 3px;
}
.kp-coins-feat {
  align-self: flex-start;
  background: rgba(11,30,79,0.10);
  color: var(--navy-ink);
  font-size: 11px; font-weight: 800;
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
}
.kp-coins-actions {
  display: block;
}
.kp-coins-actions .btn { width: 100%; }

/* ─── Tienda de Monedas ─── */
.screen-coins-shop { background: var(--cream); }
.coins-shop-body {
  flex: 1; overflow-y: auto;
  /* Padding-bottom amplio para que el contenido del final no quede tapado por
     el .tabbar fijo (≈72-80px en mobile + safe-area-inset). */
  padding: 10px 14px calc(96px + env(safe-area-inset-bottom, 0px));
}
.cs-balance {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 16px;
  padding: 10px 18px;
  margin: 0 auto 10px;
  box-shadow: 0 6px 20px rgba(255,198,66,0.30);
  text-align: center;
  width: fit-content;
}
.cs-balance-label {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.8px;
  color: var(--ink-soft); text-transform: uppercase;
}
.cs-balance-amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; line-height: 1; color: var(--navy-ink);
  white-space: nowrap;
}
.cs-intro {
  background: rgba(244,196,48,0.14);
  border: 1px solid rgba(244,196,48,0.5);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 11.5px; line-height: 1.35; color: var(--navy);
  margin-bottom: 10px;
}
.cs-grid {
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.cs-pack {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
  box-shadow: var(--sh-sm);
}
.cs-pack:hover { border-color: var(--amber); transform: translateY(-1px); }
.cs-pack.best {
  border-color: var(--amber);
  background: linear-gradient(135deg, #fff 0%, #FFF7DC 100%);
  box-shadow: 0 4px 14px rgba(255,198,66,0.30);
}
.cs-pack-icon { font-size: 28px; line-height: 1; }
.cs-pack-amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: 20px; color: var(--navy-ink); line-height: 1;
}
.cs-pack-label {
  font-size: 11.5px; color: var(--ink-soft);
  margin-top: 2px;
}
.cs-pack-price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--amber-deep);
  background: rgba(255,198,66,0.18);
  border-radius: 10px;
  padding: 6px 10px;
  white-space: nowrap;
}
.cs-badge {
  position: absolute; top: -8px; right: 12px;
  background: var(--green);
  color: var(--navy-ink);
  font-size: 9.5px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.4px;
}
.cs-tip {
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--violet-soft, rgba(123, 76, 255, 0.08));
  border: 1px dashed var(--violet, #7B4CFF);
  border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; line-height: 1.3; color: var(--navy);
}
.cs-tip svg { width: 28px; height: 28px; flex-shrink: 0; }
.shop-tip-link {
  background: transparent; border: 0; color: var(--amber-deep);
  font-weight: 800; font-family: inherit; cursor: pointer; padding: 0;
  text-decoration: underline;
}

/* ─── Pantalla Destacar perfil ─── */
.screen-feature-draft { background: var(--cream); }
.fd-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 16px;
}
.fd-active-banner {
  background: linear-gradient(135deg, #FFE48A 0%, #FFC642 100%);
  border: 2px solid #C77700;
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 6px 16px rgba(255,198,66,0.28);
  margin-bottom: 16px;
}
.fd-active-icon { font-size: 28px; flex-shrink: 0; }
.fd-active-text { flex: 1; font-size: 13.5px; color: var(--navy-ink); line-height: 1.35; }
.fd-active-meta { font-size: 11.5px; opacity: 0.8; margin-top: 2px; }
.fd-section-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.6px;
  color: var(--ink-soft); margin: 8px 0 8px;
}
.fd-options {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.fd-opt {
  position: relative;
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  padding: 14px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; font-family: inherit;
  transition: border-color 0.15s, transform 0.1s, background 0.15s;
}
.fd-opt:hover { border-color: var(--amber); }
.fd-opt.sel  { border-color: var(--amber); background: rgba(255,198,66,0.12); }
.fd-opt.best { border-color: var(--amber-deep); }
.fd-opt-label { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-ink); }
.fd-opt-cost { font-size: 13px; color: var(--amber-deep); font-weight: 700; }
.fd-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFC642, #FF9A3D);
  color: var(--navy-ink);
  font-size: 9.5px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.fd-tip {
  margin-top: 6px; padding: 10px;
  background: rgba(123, 76, 255, 0.07);
  border: 1px solid rgba(123, 76, 255, 0.22);
  border-radius: 12px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--navy); line-height: 1.4;
}
.fd-footer {
  padding: 12px 16px 90px;
  background: #fff;
  border-top: 1px solid var(--line);
}
.kp-boost-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.kp-boost-count {
  font-family: var(--font-display); font-weight: 800;
  font-size: 48px; line-height: 1;
  color: var(--amber-deep);
  flex-shrink: 0;
}
.kp-boost-desc { flex: 1; min-width: 0; }
.kp-boost-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: 0.5px;
  color: var(--amber-deep);
}
.kp-boost-sub {
  font-size: 12px; color: var(--ink-soft);
  line-height: 1.4; margin-top: 2px;
}
.kp-boost-sub b { color: var(--ink); }
.kp-boost-bolt {
  font-size: 26px; flex-shrink: 0;
}
.kp-boost-actions {
  display: flex; gap: 8px; align-items: stretch;
}
.kp-boost-actions .btn { flex: 2; padding: 12px; }
.kp-boost-actions .btn-sm { flex: 1; padding: 12px; white-space: nowrap; }

.kp-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin-bottom: 14px;
}
.kp-tile {
  padding: 14px; border: none; border-radius: 16px;
  background: #fff;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; text-align: left;
  box-shadow: var(--sh-sm);
  transition: transform 0.1s, box-shadow 0.12s;
  border: 1px solid var(--line);
}
.kp-tile:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }
.kp-tile:active { transform: translateY(1px); }
.kp-tile.violet { border-color: var(--violet); }
.kp-tile.green  { border-color: var(--green); }
.kp-tile.amber  { border-color: var(--amber); }
.kp-tile.coral  { border-color: var(--coral); }
.kp-tile-icon { font-size: 24px; }
.kp-tile-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.kp-tile-sub { font-size: 11px; color: var(--ink-mute); }

.kp-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--amber-deep);
  letter-spacing: 0.5px;
  margin: 6px 0 8px;
  display: flex; align-items: center; gap: 6px;
}

.kp-active-boost {
  display: flex; align-items: center; gap: 12px;
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 6px 14px rgba(255,198,66,0.15);
}
.kp-boost-sticker-wrap { flex-shrink: 0; }
.kp-boost-info { flex: 1; min-width: 0; }
.kp-boost-info-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.kp-boost-info-meta {
  font-size: 11px; color: var(--ink-mute); margin-top: 2px;
}

/* Boosted sticker (con glow dorado) */
.boosted-sticker {
  width: 72px; height: 96px;
  border-radius: 12px;
  border: 3px solid var(--amber);
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--top) 0%, var(--top) 33%, var(--mid) 33%, var(--mid) 66%, var(--bot) 66%, var(--bot) 100%);
  padding: 6px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 0 0 3px rgba(255,198,66,0.35), 0 6px 16px rgba(255,198,66,0.3);
  animation: boostGlow 2s ease-in-out infinite;
}
@keyframes boostGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(255,198,66,0.35), 0 6px 16px rgba(255,198,66,0.3); }
  50%      { box-shadow: 0 0 0 5px rgba(255,198,66,0.5), 0 8px 22px rgba(255,198,66,0.5); }
}
.boosted-sticker .country {
  background: rgba(255,255,255,0.85); color: var(--navy-ink);
  padding: 2px 5px; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; line-height: 1;
  align-self: flex-start;
}
.boosted-sticker .status-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 11px;
  position: absolute; top: 6px; right: 6px;
}
.boosted-sticker .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.boosted-sticker .num {
  font-family: var(--font-display); font-weight: 700;
  color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  text-align: center; font-size: 18px;
  position: relative; z-index: 2;
}

/* ============================================================
   Fase 5 · Shop (Screen 18)
   ============================================================ */
.screen-shop { background: var(--cream); }
.shop-balance {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--navy-ink);
  background: #fff;
  padding: 7px 13px; border-radius: 999px;
  border: 2px solid rgba(11,30,79,0.10);
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  white-space: nowrap;
}
.shop-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 24px;
}
.shop-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--amber-deep);
  letter-spacing: 0.3px;
  margin-bottom: 10px;
}

.shop-frames-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.shop-frame-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: var(--sh-sm);
}
.frame-preview {
  position: relative;
  padding: 12px; border-radius: 14px;
  background: var(--frame-color);
  box-shadow: 0 6px 14px rgba(0,0,0,0.1);
}
.shop-exclusive {
  position: absolute; top: -6px; right: -6px;
  background: var(--violet); color: #fff;
  padding: 3px 8px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 9px;
  letter-spacing: 0.5px;
  box-shadow: var(--sh-sm);
}
.shop-exclusive.small {
  padding: 2px 5px; font-size: 11px;
}
.shop-sticker-demo {
  width: 64px; height: 86px;
  border-radius: 8px; border: 1px solid rgba(0,0,0,0.2);
  position: relative; overflow: hidden;
  padding: 5px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.shop-sticker-demo .country {
  background: rgba(255,255,255,0.85); color: var(--navy-ink);
  padding: 1px 4px; border-radius: 3px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 9px; line-height: 1;
  align-self: flex-start;
}
.shop-sticker-demo .status-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 9px;
  position: absolute; top: 4px; right: 4px;
}
.shop-sticker-demo .silhouette {
  position: absolute; inset: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.shop-sticker-demo .num {
  font-family: var(--font-display); font-weight: 700;
  color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  text-align: center; font-size: 16px;
  position: relative; z-index: 2;
}
.frame-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
  text-align: center;
}
.frame-buy-btn, .frame-equip-btn, .avatar-buy-btn, .avatar-equip-btn {
  width: 100%;
  padding: 8px 12px; border-radius: 10px;
  background: var(--amber);
  border: none;
  color: var(--navy-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.frame-buy-btn:hover, .frame-equip-btn:hover, .avatar-buy-btn:hover, .avatar-equip-btn:hover {
  background: var(--amber-deep);
}
.frame-buy-btn.locked, .avatar-buy-btn.locked, .avatar-locked {
  background: var(--line);
  color: var(--ink-mute);
  cursor: pointer;
}
.avatar-locked {
  padding: 8px 12px; border-radius: 10px;
  text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
}
.frame-equipped {
  width: 100%;
  padding: 8px 12px; border-radius: 10px;
  background: var(--line);
  color: var(--ink-soft);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-align: center;
}
.frame-equip-btn {
  background: var(--navy); color: #fff;
}
.frame-equip-btn:hover { background: var(--navy-deep); }

.shop-avatars-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.shop-avatar-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
}
.avatar-preview {
  position: relative;
  height: 56px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.avatar-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--ink);
  text-align: center;
}
.avatar-owned {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  color: var(--green-deep);
}
.avatar-buy-btn, .avatar-equip-btn { padding: 6px 8px; font-size: 11px; }
.avatar-equip-btn { background: var(--navy); color: #fff; }
.avatar-equip-btn:hover { background: var(--navy-deep); }

/* ─── Shop · Destacado en Radar ─────────────────────── */
.shop-feature-card {
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(135deg, #fff9e6 0%, #fffdf5 100%);
  border: 1.5px solid var(--amber);
  border-radius: 14px;
  padding: 14px 14px 12px;
  margin-bottom: 4px;
}
.shop-feature-card.active {
  background: #f5f5f5;
  border-color: #ccc;
  opacity: 0.75;
}
.sfc-body { display: flex; gap: 12px; align-items: flex-start; }
.sfc-icon { font-size: 26px; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.sfc-meta { flex: 1; }
.sfc-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--navy);
}
.sfc-desc { font-size: 12px; color: var(--ink-mute); line-height: 1.4; margin-top: 3px; }
.sfc-expiry { font-size: 11px; font-weight: 700; color: #888; margin-top: 5px; }
.sfc-btn {
  width: 100%; padding: 10px;
  border-radius: 10px; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; transition: background 0.15s;
}
.sfc-btn.buy { background: var(--amber); color: var(--navy); }
.sfc-btn.buy:hover { background: var(--amber-deep); }
.sfc-btn:disabled { background: #e0e0e0; color: #999; cursor: default; }

/* ─── Radar · banner promo destacado ────────────────── */
.radar-feature-promo {
  display: flex; align-items: center; gap: 6px;
  width: 100%; padding: 9px 12px;
  background: linear-gradient(90deg, #fff8dc 0%, #fff5c8 100%);
  border: 1px solid var(--amber);
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px; font-weight: 600;
  color: var(--navy);
  text-align: left; cursor: pointer;
}
.rfp-link { font-weight: 800; text-decoration: underline; white-space: nowrap; color: var(--navy); }

/* ─── Radar · banner promo Pro (dorado, único) ──────── */
.radar-pro-promo {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  border: 2px solid #B88300;
  border-radius: 12px;
  margin-bottom: 10px;
  font-size: 13px; font-weight: 700;
  color: #3d2400;
  text-align: left; cursor: pointer;
  box-shadow: 0 4px 14px rgba(255,154,61,0.35);
  transition: transform 0.08s, filter 0.12s;
}
.radar-pro-promo:hover { filter: brightness(1.06); }
.radar-pro-promo:active { transform: scale(0.98); }
.radar-pro-promo .rpp-star { font-size: 20px; flex-shrink: 0; }
.radar-pro-promo .rpp-text { flex: 1; line-height: 1.2; }
.radar-pro-promo .rpp-text b { color: #1a0e00; font-weight: 900; }
.radar-pro-promo .rpp-cta {
  font-family: var(--font-display); font-weight: 900; font-size: 18px;
  color: #1a0e00; flex-shrink: 0;
}

/* ─── Galería de avatares de jugadores reales ────────── */
.screen-player-avatars { background: var(--cream); }
.pa-body {
  flex: 1; overflow-y: auto;
  padding: 12px 14px 24px;
}
.pa-intro {
  background: #fff;
  border: 1px dashed var(--amber);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 12.5px; color: var(--ink);
  line-height: 1.4;
  margin-bottom: 14px;
}
.pa-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.pa-card {
  position: relative;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 8px 8px 10px;
  display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.08s, box-shadow 0.18s;
}
.pa-card.pa-card-owned {
  border-color: var(--amber);
  box-shadow: 0 4px 14px rgba(255,198,66,0.30);
}
.pa-card.pa-card-equipped {
  border-color: var(--green, #4caf50);
  background: linear-gradient(180deg, #fff 0%, #f1f8f1 100%);
  box-shadow: 0 4px 14px rgba(76,175,80,0.32);
}
.pa-img-wrap {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #f3f4f6 0%, #e7e8ec 100%);
  margin-bottom: 6px;
}
.pa-img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pa-badge-equipped {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--green, #4caf50); color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: 9px; letter-spacing: 0.6px;
  padding: 3px 7px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(76,175,80,0.45);
}
.pa-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; color: var(--navy-ink);
  text-align: center; line-height: 1.15;
  margin-bottom: 6px;
  min-height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.pa-btn {
  width: 100%; padding: 7px 8px;
  border-radius: 10px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  border: none;
  transition: filter 0.12s, transform 0.08s;
}
.pa-btn:active { transform: scale(0.96); }
.pa-btn-buy {
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  color: #3d2400;
  border: 1px solid #B88300;
  box-shadow: 0 2px 6px rgba(255,154,61,0.35);
}
.pa-btn-buy:hover { filter: brightness(1.05); }
.pa-btn-equip {
  background: var(--violet);
  color: #fff;
  border: 1px solid var(--violet-deep);
}
.pa-btn-equip:hover { filter: brightness(1.08); }
.pa-btn-equipped {
  background: #e8f5e9;
  color: #1b5e20;
  border: 1px solid var(--green, #4caf50);
  cursor: default;
}
.pa-tip {
  margin-top: 18px;
  padding: 10px 12px;
  background: var(--violet-soft);
  border: 1px dashed var(--violet);
  border-radius: 12px;
  display: flex; gap: 10px; align-items: center;
  font-size: 11.5px; color: var(--violet-deep);
  line-height: 1.4;
}

/* ─── Mascota con globo de texto (estilo cómic) ─────── */
.mascot-with-bubble {
  position: relative;
  display: inline-block;
  margin: 0 auto;
}
.mascot-with-bubble img {
  display: block;
  height: 200px;
  width: auto;
}
.mascot-bubble {
  position: absolute;
  top: 0; left: 0;
  transform: translate(-15%, 0);
  background: #fff;
  border: 3px solid #000;
  border-radius: 18px;
  padding: 10px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  color: #000;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
  z-index: 2;
}
/* Cola del globo apuntando a la mano (esquina inferior derecha del bubble) */
.mascot-bubble::before {
  /* Borde negro de la cola (más grande, atrás) */
  content: '';
  position: absolute;
  bottom: -16px; right: 22px;
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 6px solid transparent;
  border-top: 17px solid #000;
}
.mascot-bubble::after {
  /* Relleno blanco de la cola (más chico, encima) */
  content: '';
  position: absolute;
  bottom: -11px; right: 24px;
  width: 0; height: 0;
  border-left: 11px solid transparent;
  border-right: 5px solid transparent;
  border-top: 13px solid #fff;
}

/* ─── Imágenes de mascota Nicole (empty states + onboarding) ───── */
.chats-empty-img {
  width: auto; height: 160px;
  object-fit: contain;
  margin-bottom: 8px;
  display: block;
  margin-left: auto; margin-right: auto;
}
.cs-tip-nicole {
  align-items: center;
  gap: 14px;
}
.cs-tip-img {
  width: auto; height: 70px;
  object-fit: contain;
  flex-shrink: 0;
}
.benefits-active-meta {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}
.benefits-active-img {
  width: auto; height: 56px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ─── Tienda · Card "PERSONALIZÁ TU PERFIL" (avatares + marcos) ─── */
.shop-extras-card {
  background: #fff;
  border: 2px solid var(--amber, #FFC642);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(255,198,66,0.25);
  margin-bottom: 14px;
}
.shop-extras-card .benefits-header {
  border-radius: 0;
  border-bottom: 2px solid var(--amber-deep, #c98c00);
}
.shop-extras-card .kpf-pro-grid {
  padding: 12px 14px 4px;
}
.idols-grid-wrap {
  align-items: flex-end;
}
.idols-nicole-img {
  width: 100%; height: auto; max-height: 90px;
  object-fit: contain; object-position: bottom;
  pointer-events: none;
}

/* ─── Tienda · Card "BENEFICIOS" con filas ───────────── */
.benefits-card {
  background: #fff;
  border: 2px solid var(--amber);
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(255,198,66,0.30);
  margin-bottom: 14px;
  overflow: hidden;
}
.benefits-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 100%);
  border-bottom: 2px solid var(--amber-deep, #c98c00);
}
.benefits-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 17px; letter-spacing: 1.2px;
  color: #3d2400;
}
.benefits-star { font-size: 22px; line-height: 1; color: #b84a00; }
.benefits-price {
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-display);
  line-height: 1.1;
}
.benefits-price b {
  font-weight: 900; font-size: 22px; color: var(--violet);
}
.benefits-price span {
  font-size: 10px; font-weight: 700; color: var(--ink-soft);
  margin-top: 2px; letter-spacing: 0.3px;
}
.benefits-status {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.6px;
  color: #1b5e20;
  background: #fff; border: 2px solid var(--green, #4caf50);
  padding: 6px 10px; border-radius: 999px;
  white-space: nowrap;
}
.benefits-active-meta {
  padding: 10px 16px;
  background: rgba(76,175,80,0.10);
  border-bottom: 1px solid rgba(76,175,80,0.25);
  font-size: 12px; color: #1b5e20; font-weight: 600;
  text-align: center;
}
.benefits-active-meta b { font-weight: 800; }
.benefits-rows {
  padding: 8px 0;
}
.benefit-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #eee);
}
.benefit-row:last-child { border-bottom: none; }
.benefit-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,198,66,0.18);
  border-radius: 12px;
  font-size: 22px; flex-shrink: 0;
}
.benefit-text { flex: 1; min-width: 0; }
.benefit-name {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--navy-ink);
  line-height: 1.15;
}
.benefit-desc {
  font-size: 12px; color: var(--ink-soft);
  margin-top: 2px; line-height: 1.3;
}
.benefits-cta {
  display: block;
  width: calc(100% - 32px);
  margin: 14px 16px 8px;
  font-size: 16px; font-weight: 800;
  padding: 14px;
}
.benefits-cta .sub {
  display: block;
  font-size: 11px; font-weight: 600; opacity: 0.85;
  margin-top: 2px;
}
.benefits-cta.btn-disabled,
.benefits-cta:disabled {
  background: #d6d6d6; color: #777; cursor: not-allowed;
  box-shadow: none; border: 1px solid #c0c0c0;
}
.benefits-fineprint {
  margin: 0 16px 14px;
  font-size: 11px; color: var(--ink-soft);
  line-height: 1.4; text-align: center;
}
.benefits-fineprint b { color: var(--navy-ink); font-weight: 800; }
.benefits-card-active {
  border-color: var(--green, #4caf50);
  box-shadow: 0 8px 24px rgba(76,175,80,0.28);
}
.benefits-card-active .benefits-header {
  background: linear-gradient(135deg, #c8e6c9 0%, #66bb6a 100%);
  border-bottom-color: #2e7d32;
}
.benefits-card-active .benefits-title { color: #1b5e20; }
.benefits-card-active .benefit-icon {
  background: rgba(76,175,80,0.15);
}

/* ─── Tienda · Hazte Pro card (legacy) ───────────────── */
.pro-card {
  background: linear-gradient(135deg, #fff8e1 0%, #fff 60%);
  border: 2px solid var(--amber);
  border-radius: 18px;
  padding: 18px 16px 16px;
  box-shadow: 0 8px 24px rgba(255,198,66,0.32);
  margin-bottom: 14px;
}
.pro-card-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.pro-star {
  font-size: 38px; line-height: 1;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFC642, #FF9A3D);
  border-radius: 16px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(255,154,61,0.45);
}
.pro-card-head > div:not(.pro-star):not(.pro-price):not(.pro-status-pill) {
  flex: 1; min-width: 0;
}
.pro-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--navy-ink); line-height: 1.1;
}
.pro-sub {
  font-size: 13px; color: var(--ink-soft);
  margin-top: 2px;
}
.pro-sub-active {
  font-size: 12px; color: #1b5e20;
  margin-top: 2px; font-weight: 700;
}
.pro-price {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; color: var(--violet);
  text-align: right;
  white-space: nowrap; flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end;
  line-height: 1.1;
}
.pro-price span {
  font-size: 10px; color: var(--ink-soft);
  font-weight: 700; letter-spacing: 0.3px;
  margin-top: 2px;
}
.pro-status-pill {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.6px;
  color: #1b5e20;
  background: #fff; border: 2px solid var(--green, #4caf50);
  padding: 6px 10px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
}
.pro-benefits {
  list-style: none; margin: 0 0 14px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.pro-benefits li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(255,198,66,0.10);
  border-radius: 10px;
  font-size: 13px; color: var(--navy-ink); line-height: 1.3;
}
.pro-benefits li span:first-child {
  font-size: 18px; flex-shrink: 0;
}
.pro-benefits li b { color: var(--navy-ink); font-weight: 800; }
.pro-buy-btn {
  width: 100%; font-size: 16px; font-weight: 800;
  padding: 14px;
}
.pro-buy-btn .sub {
  display: block;
  font-size: 11px; font-weight: 600; opacity: 0.85;
  margin-top: 2px;
}
.pro-buy-btn.btn-disabled,
.pro-buy-btn:disabled {
  background: #d6d6d6; color: #777; cursor: not-allowed;
  box-shadow: none; border: 1px solid #c0c0c0;
}
.pro-fineprint {
  margin-top: 10px;
  font-size: 11px; color: var(--ink-soft);
  line-height: 1.4; text-align: center;
}
.pro-fineprint b { color: var(--navy-ink); font-weight: 800; }
.pro-card-active {
  background: linear-gradient(135deg, #e8f5e9 0%, #fff 60%);
  border-color: var(--green, #4caf50);
  box-shadow: 0 8px 24px rgba(76,175,80,0.28);
}
.pro-card-active .pro-star {
  background: linear-gradient(135deg, #66bb6a, #2e7d32);
  box-shadow: 0 4px 10px rgba(46,125,50,0.45);
}
.pro-card-active .pro-benefits li {
  background: rgba(76,175,80,0.12);
}

/* ─── Coins shop · Servicios mensuales (legacy) ──────── */
.cs-section-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.8px;
  color: var(--ink-soft); text-transform: uppercase;
  margin: 14px 4px 8px;
}
.cs-monthly-card {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 14px;
  background: linear-gradient(135deg, #fff 0%, #fff5e0 100%);
  border: 2px solid var(--amber);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 4px 12px rgba(255,198,66,0.22);
  transition: transform 0.08s, filter 0.12s;
  font: inherit;
}
.cs-monthly-card:hover { filter: brightness(1.04); }
.cs-monthly-card:active { transform: scale(0.98); }
.cs-monthly-icon {
  font-size: 28px; line-height: 1;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber); border-radius: 12px;
  flex-shrink: 0;
}
.cs-monthly-meta { flex: 1; min-width: 0; }
.cs-monthly-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px; color: var(--navy-ink);
  line-height: 1.15;
}
.cs-monthly-sub {
  font-size: 11px; color: var(--ink-soft);
  margin-top: 2px; line-height: 1.3;
}
.cs-monthly-price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; color: var(--violet);
  white-space: nowrap;
  flex-shrink: 0;
}
.cs-monthly-price span {
  font-size: 11px; color: var(--ink-soft); font-weight: 700;
}
.cs-monthly-active {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border-color: var(--green, #4caf50);
  cursor: default;
  box-shadow: 0 4px 12px rgba(76,175,80,0.22);
}
.cs-monthly-active .cs-monthly-icon {
  background: var(--green, #4caf50); color: #fff;
}
.cs-monthly-status {
  font-family: var(--font-display); font-weight: 800;
  font-size: 11px; letter-spacing: 0.6px;
  color: #1b5e20;
  background: #fff; border: 1px solid var(--green, #4caf50);
  padding: 4px 8px; border-radius: 999px;
  white-space: nowrap;
}

.shop-tip {
  margin-top: 18px;
  padding: 12px;
  background: var(--violet-soft);
  border: 1px dashed var(--violet);
  border-radius: 14px;
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--violet-deep);
  line-height: 1.4;
}

/* ============================================================
   Fase 5 · Boost Draft (Screen 19)
   ============================================================ */
.screen-boost-draft { background: var(--cream); }
.bd-body {
  flex: 1; overflow-y: auto;
  padding: 14px 16px 12px;
}

.bd-preview {
  background: #fff; border: 2px solid var(--amber);
  border-radius: 16px;
  padding: 14px;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
  box-shadow: 0 6px 14px rgba(255,198,66,0.15);
}
.bd-preview-sticker { flex-shrink: 0; }
.bd-preview-text { flex: 1; min-width: 0; }
.bd-preview-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px; color: var(--ink);
  margin-bottom: 4px;
}
.bd-preview-desc {
  font-size: 12px; color: var(--ink-soft); line-height: 1.4;
}
.bd-preview-desc b { color: var(--amber-deep); }

.bd-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--amber-deep);
  letter-spacing: 0.3px;
  margin-bottom: 6px;
  margin-top: 8px;
}
.bd-subsection-title {
  font-size: 11px; color: var(--ink-mute);
  font-family: var(--font-body); font-weight: 600;
  margin: 8px 0 6px;
}

.bd-row {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 10px;
  overflow-x: auto;
  display: flex; gap: 8px;
  margin-bottom: 4px;
  scrollbar-width: thin;
}
.bd-pick {
  padding: 0; border: none; background: transparent;
  cursor: pointer;
  transition: transform 0.1s;
  flex-shrink: 0;
}
.bd-pick.sel .propose-sticker {
  box-shadow: 0 0 0 3px var(--amber), 0 8px 18px rgba(255,198,66,0.4);
}

.bd-duration-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.bd-duration {
  padding: 14px 8px; border-radius: 14px;
  background: #fff; border: 2px solid var(--line);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.bd-duration:hover { border-color: var(--amber); }
.bd-duration:active { transform: scale(0.97); }
.bd-duration.sel {
  border-color: var(--amber); background: rgba(255,198,66,0.1);
  box-shadow: 0 4px 12px rgba(255,198,66,0.25);
}
.bd-duration-hours {
  font-family: var(--font-display); font-weight: 700;
  font-size: 18px; color: var(--ink);
}
.bd-duration-cost {
  font-size: 11px; color: var(--ink-mute);
}

.bd-tip {
  margin-top: 14px;
  padding: 12px;
  background: rgba(255,198,66,0.12);
  border: 1px dashed var(--amber-deep);
  border-radius: 14px;
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: var(--amber-deep);
  line-height: 1.4;
}

.bd-footer {
  padding: 12px 16px 24px;
  background: #fff;
  border-top: 1px solid var(--line);
}

/* ============================================================
   Fase 5 · Boosted Map (Screen 20)
   ============================================================ */
.screen-boosted-map { background: var(--cream); }
.bm-body {
  background: linear-gradient(180deg, #E8F0DF 0%, #DCE7D3 100%);
}
.bm-boosted-sticker {
  position: absolute;
  transform: translate(-50%, -100%);
  z-index: 4;
  pointer-events: none;
}
.map-legend.amber {
  background: rgba(255,255,255,0.95);
  border: 1px solid var(--line);
}
.bm-info {
  position: absolute; bottom: 90px; left: 10px; right: 10px;
  padding: 12px;
  background: #fff; border-radius: 16px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-soft);
  box-shadow: var(--sh-md);
  z-index: 6;
}
.bm-info b { color: var(--amber-deep); }
.bm-info .chip { flex-shrink: 0; }

/* ============================================================
   Fase 6 · B2B entry link en login
   ============================================================ */
.b2b-entry {
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  padding-bottom: 2px;
  border-top: 1px solid rgba(255,255,255,0.08);
  position: relative; z-index: 2;
}
.b2b-entry button {
  border: none; background: transparent;
  color: var(--amber);
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; cursor: pointer; padding: 0;
}

/* ============================================================
   Fase 6 · B2B Landing (Screen 21)
   ============================================================ */
.screen-b2b-landing {
  background: var(--cream);
  overflow-y: auto;
}

.b2b-topbar {
  padding: 50px 20px 24px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  position: relative;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  overflow: hidden;
  flex-shrink: 0;
}
.b2b-topbar-row {
  display: flex; align-items: center; gap: 12px;
  position: relative; z-index: 2;
}
.b2b-logo {
  display: flex; align-items: center; gap: 10px;
  flex: 1;
}
.ms-badge {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, var(--green), var(--green-deep));
  color: var(--navy-ink);
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.b2b-brand {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px;
}
.b2b-enter {
  padding: 8px 14px; border-radius: 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
}
.b2b-enter:hover { background: rgba(255,255,255,0.1); }

.b2b-body {
  flex: 1;
  padding: 22px 20px 30px;
  overflow-y: auto;
}
.b2b-kicker {
  font-size: 11px; padding: 4px 10px;
  background: rgba(255,198,66,0.18);
  color: var(--amber-deep);
  border-color: rgba(255,198,66,0.3);
}
.b2b-hero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 32px; line-height: 1.05;
  color: var(--ink);
  margin: 10px 0 10px;
}
.b2b-hero-title .amber-accent { color: var(--amber-deep); }
.b2b-hero-desc {
  font-size: 14px; color: var(--ink-soft); line-height: 1.5;
  margin: 0 0 18px;
}
.b2b-cta-main {
  max-width: 100%;
  margin-bottom: 22px;
}

.b2b-features {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 22px;
}
.b2b-feature {
  background: #fff; border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--sh-sm);
}
.b2b-feature-icon {
  font-size: 24px;
  width: 40px; text-align: center; flex-shrink: 0;
}
.b2b-feature-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: var(--ink);
}
.b2b-feature-sub { font-size: 12px; color: var(--ink-mute); margin-top: 2px; }

/* ── B2B map comparison (animated demo) ─────────────── */
.b2b-compare {
  background: #fff;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.b2b-compare-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 10px;
  text-align: center;
}
.b2b-compare-map {
  position: relative;
  height: 170px;
  background: #DCEBE1;
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(135deg, rgba(120,180,140,0.18), rgba(200,220,180,0.18));
  background-size: 32px 32px, 32px 32px, 100% 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
}
/* "Calles" simuladas */
.b2b-compare-map::before,
.b2b-compare-map::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.7);
}
.b2b-compare-map::before {
  top: 50%; left: 0; right: 0; height: 6px;
  transform: translateY(-50%);
}
.b2b-compare-map::after {
  left: 50%; top: 0; bottom: 0; width: 6px;
  transform: translateX(-50%);
}

.bzc-pin {
  position: absolute;
  width: 12px; height: 12px;
  background: #9AA0A6;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  z-index: 2;
}

.bzc-featured {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  z-index: 3;
}
.bzc-featured-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,176,32,0.55);
  animation: bzc-pulse 2.2s ease-out infinite;
}
.bzc-featured-pulse.delay {
  animation-delay: 1.1s;
}
.bzc-featured-pin {
  position: absolute;
  inset: 8px;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #FFE08A, #FF9A1F);
  border-radius: 50%;
  border: 3px solid #fff;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  box-shadow: 0 0 14px rgba(255,176,32,0.8), 0 4px 8px rgba(0,0,0,0.25);
  animation: bzc-bounce 2.2s ease-in-out infinite;
}
.bzc-tag {
  position: absolute;
  top: calc(50% + 28px); left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  animation: bzc-tag-fade 2.2s ease-in-out infinite;
}
.bzc-tag::before {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--navy);
}
@keyframes bzc-pulse {
  0%   { transform: scale(0.6); opacity: 0.85; }
  80%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes bzc-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@keyframes bzc-tag-fade {
  0%, 100% { opacity: 0.85; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;    transform: translateX(-50%) translateY(-2px); }
}
.b2b-compare-caption {
  font-size: 12px; color: var(--ink-mute);
  margin-top: 10px;
  text-align: center;
  line-height: 1.4;
}

.b2b-pricing-notice {
  background: #fff;
  border-radius: 16px;
  border: 2px solid var(--amber);
  padding: 16px 20px;
  text-align: center;
  margin-bottom: 16px;
}
.b2b-pricing-amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: 36px; color: var(--navy);
  line-height: 1;
}
.b2b-pricing-period {
  font-size: 18px; font-weight: 700;
  color: var(--ink-mute);
}
.b2b-pricing-desc {
  font-size: 12px; color: var(--ink-mute);
  margin-top: 6px;
  font-weight: 500;
}

.b2b-cta-bottom { max-width: 100%; }

.b2b-signin-link {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--ink-mute);
  font-size: 13px;
  padding: 10px 0;
  margin-top: 8px;
  cursor: pointer;
  text-align: center;
}
.b2b-signin-link strong {
  color: var(--amber-deep, #D77A00);
  font-weight: 700;
}

.b2b-signin-divider {
  display: flex; align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 600;
}
.b2b-signin-divider::before,
.b2b-signin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.b2b-cta-signin {
  width: 100%;
  background: #fff;
  border: 2px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.b2b-cta-signin:hover {
  background: var(--navy);
  color: #fff;
}

/* ── Pantalla Mi Suscripción ─────────────────────────── */
.screen-business-subscription { background: var(--cream); }
.screen-business-subscription .body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 30px;
  -webkit-overflow-scrolling: touch;
}
.bz-sub-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  border: 1px solid var(--line);
}
.bz-sub-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.bz-sub-plan {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--ink);
}
.bz-sub-price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; color: var(--navy);
  margin-top: 4px; line-height: 1;
}
.bz-sub-price span {
  font-size: 14px; font-weight: 700;
  color: var(--ink-mute);
}
.bz-sub-badge {
  font-size: 10px; font-weight: 800;
  padding: 5px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bz-sub-badge.active    { background: #DCFCE7; color: #166534; }
.bz-sub-badge.cancelled { background: #FEF3C7; color: #92400E; }
.bz-sub-badge.expired   { background: #FEE2E2; color: #991B1B; }
.bz-sub-badge.inactive  { background: #E5E7EB; color: #374151; }

.bz-sub-rows {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.bz-sub-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0;
  font-size: 13px;
}
.bz-sub-row-label { color: var(--ink-mute); }
.bz-sub-row-val   { color: var(--ink); font-weight: 600; text-align: right; }
.bz-sub-row-val.warn { color: #92400E; }

.bz-sub-actions { margin-top: 16px; }
.bz-sub-info {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.45;
  color: #78350F;
  margin-bottom: 12px;
}
.bz-sub-logout-btn {
  margin-top: 18px;
  background: #fff;
  color: var(--navy);
  border: 2px solid var(--navy);
  font-size: 15px;
  padding: 12px;
  border-radius: 14px;
  box-shadow: 0 4px 0 var(--navy), 0 8px 18px rgba(8,18,45,0.12);
}
.bz-sub-logout-btn:active:not(:disabled) {
  box-shadow: 0 2px 0 var(--navy), 0 4px 8px rgba(8,18,45,0.10);
}
.b2b-footer-note {
  text-align: center;
  font-size: 10px; color: var(--ink-mute);
  margin-top: 20px;
}

/* ============================================================
   Fase 6 · B2B Plans (Screen 22)
   ============================================================ */
.screen-b2b-plans { background: var(--cream); }
.screen-b2b-plans .phone-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
}
.plans-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 12px;
}

.plan-card {
  width: 100%;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  cursor: pointer;
  text-align: left;
  margin-bottom: 14px;
  position: relative;
  transition: transform 0.1s, box-shadow 0.12s, border-color 0.15s;
}
.plan-card:hover { box-shadow: var(--sh-md); }
.plan-card:active { transform: translateY(1px); }
.plan-card.destacado {
  border-color: var(--amber);
  box-shadow: 0 8px 20px rgba(255,198,66,0.15);
}
.plan-card.destacado.sel {
  border-color: var(--amber-deep);
  box-shadow: 0 0 0 3px rgba(255,198,66,0.35), 0 8px 20px rgba(255,198,66,0.25);
}
.plan-badge {
  position: absolute;
  top: -10px; right: 18px;
  background: var(--amber);
  color: var(--navy-ink);
  padding: 4px 12px; border-radius: 8px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(255,198,66,0.4);
}
.plan-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.plan-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink);
  line-height: 1.1;
}
.plan-price {
  text-align: right;
  flex-shrink: 0;
}
.plan-price .amount {
  font-family: var(--font-display); font-weight: 800;
  font-size: 32px; color: var(--ink);
  line-height: 1;
}
.plan-price .amount.amber { color: var(--amber-deep); }
.plan-price .per {
  font-size: 12px; color: var(--ink-mute);
  margin-left: 3px;
}
.plan-features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.plan-features li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-soft);
}
.plan-features li span {
  color: var(--ink-mute); font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.plan-features li span.amber { color: var(--amber-deep); }

.plans-pay-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--amber-deep);
  letter-spacing: 0.4px;
  margin: 12px 0 8px;
  display: flex; align-items: center; gap: 6px;
}
.plans-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.plans-card-brand {
  width: 60px; height: 38px; border-radius: 8px;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.plans-card-meta { flex: 1; min-width: 0; }
.plans-card-digits {
  font-family: var(--font-mono, monospace);
  font-size: 13px; color: var(--ink);
  letter-spacing: 1px;
}
.plans-card-sub { font-size: 11px; color: var(--ink-mute); }
.plans-card-change {
  padding: 8px 14px; border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
}
.plans-card-change:hover { background: var(--cream); }

.plans-review-note {
  padding: 12px;
  background: rgba(255,198,66,0.08);
  border: 1px dashed var(--amber-deep);
  border-radius: 12px;
  font-size: 12px; color: var(--amber-deep);
  line-height: 1.4;
}

.plans-footer {
  padding: 12px 18px 24px;
  background: #fff;
  border-top: 1px solid var(--line);
}

/* ============================================================
   Fase 6 · Business Dashboard (Screen 23)
   ============================================================ */
.screen-business-dash { background: var(--cream); }
.screen-business-dash .phone-header.amber {
  padding: 56px 18px 18px;
  position: relative;
}

.biz-hero {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
  color: var(--navy-ink);
  position: relative; z-index: 2;
}
.biz-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}
.biz-official-chip {
  background: var(--navy) !important;
  color: var(--amber) !important;
  border-color: var(--navy-deep) !important;
  font-size: 10px;
}
.chip.navy {
  background: var(--navy-ink); color: #fff;
  border-color: var(--navy);
}
.biz-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 1.1;
  margin-top: 4px;
}
.biz-addr {
  font-size: 12px; opacity: 0.8; margin-top: 2px;
}

.biz-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px 24px;
}

.biz-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.biz-stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 4px;
  text-align: center;
  box-shadow: var(--sh-sm);
}
.biz-stat-big {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; color: var(--navy);
  line-height: 1;
}
.biz-stat-label {
  font-size: 9px; font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.4px;
  margin-top: 4px;
  line-height: 1.2;
}

.biz-section-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--amber-deep);
  letter-spacing: 0.4px;
  margin: 14px 0 8px;
  display: flex; align-items: center; gap: 6px;
}

.biz-qr-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 4px;
}
.biz-qr-wrap { flex-shrink: 0; }
.biz-qr-meta { flex: 1; min-width: 0; }
.biz-qr-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: var(--ink);
}
.biz-qr-desc {
  font-size: 11px; color: var(--ink-mute);
  line-height: 1.4;
  margin-top: 2px;
}
.biz-qr-big {
  padding: 8px 12px; border-radius: 10px;
  background: var(--amber);
  border: none;
  color: var(--navy-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.biz-qr-big:hover { background: var(--amber-deep); }

.biz-promo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: border-color 0.15s;
}
.biz-promo.on {
  border-color: var(--green);
  background: rgba(25,232,138,0.04);
}
.biz-promo-icon { font-size: 18px; flex-shrink: 0; }
.biz-promo-text {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
}
.bz-toggle.green.on { background: var(--green); }

.biz-new-promo {
  display: flex; gap: 8px;
  margin-top: 6px;
}
.biz-new-promo input {
  flex: 1;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.biz-new-promo input:focus { border-color: var(--amber); }
.biz-add-promo {
  padding: 8px 16px; border-radius: 10px;
  background: var(--amber);
  border: none;
  color: var(--navy-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.biz-add-promo:hover:not(:disabled) { background: var(--amber-deep); }
.biz-add-promo:disabled { opacity: 0.4; cursor: not-allowed; }

.biz-preview-btn {
  width: 100%;
  padding: 14px;
  margin-top: 18px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--violet);
  color: var(--violet-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.biz-preview-btn:hover { background: var(--violet-soft); }

.biz-pending {
  text-align: center;
  padding: 30px 16px;
}

/* ============================================================
   Fase 6 · Business Preview (Screen 24)
   ============================================================ */
.screen-biz-preview { background: var(--cream); }
.bp-body {
  flex: 1; position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #E8F0DF 0%, #DCE7D3 100%);
}
.bp-pin-wrap {
  position: absolute;
  left: 50%; top: 35%;
  transform: translate(-50%, -50%);
  z-index: 4;
}
.bp-pin-wrap .zone-pin-body.amber-pin {
  background: var(--amber);
}

.bp-sheet {
  position: absolute;
  bottom: 10px; left: 10px; right: 10px;
  background: #fff;
  border-radius: 20px;
  padding: 14px 16px 18px;
  border: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,0.12);
  z-index: 5;
}
.bp-sheet-handle {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--line-dark);
  margin: -4px auto 10px;
}
.bp-sheet-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.bp-sheet-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,198,66,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.bp-sheet-meta { flex: 1; min-width: 0; }
.bp-sheet-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 16px; color: var(--ink);
}
.bp-sheet-addr {
  font-size: 11px; color: var(--ink-mute);
  margin-top: 2px;
}
.bp-sheet-addr .open-dot { color: var(--green); font-size: 12px; }

.bp-promo {
  background: rgba(255,198,66,0.12);
  border: 1px dashed var(--amber-deep);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.bp-promo-label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: 0.5px;
  color: var(--amber-deep);
}
.bp-promo-text {
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; color: var(--ink);
  line-height: 1.4;
  margin-top: 4px;
}
.bp-promo-sub { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

.bp-chips-row {
  display: flex; gap: 8px;
  margin-bottom: 12px;
}
.bp-chip {
  flex: 1;
  padding: 8px 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; gap: 8px;
}
.bp-chip span { font-size: 16px; }
.bp-chip-label { font-size: 10px; color: var(--ink-mute); }
.bp-chip-value {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: var(--ink);
}

.bp-actions {
  display: flex; gap: 8px;
}
.bp-actions .btn-sm { padding: 12px; }

/* ============================================================
   Fase 7 · Admin Console (desktop)
   ============================================================ */

/* Admin Login */
.screen-admin-login {
  background: var(--navy-ink);
  min-height: 100%; display: flex;
  align-items: center; justify-content: center;
}
.adm-login-wrap {
  width: 100%; max-width: 360px;
  padding: 40px 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  text-align: center;
}
.adm-login-logo { font-size: 40px; margin-bottom: 12px; }
.adm-login-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: 24px; color: #fff; margin: 0 0 4px;
}
.adm-login-sub {
  font-size: 12px; color: rgba(255,255,255,0.4);
  margin: 0 0 28px;
}
.adm-login-form { display: flex; flex-direction: column; gap: 10px; }
.adm-login-input {
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 14px; outline: none;
  width: 100%; box-sizing: border-box;
}
.adm-login-input::placeholder { color: rgba(255,255,255,0.35); }
.adm-login-input:focus { border-color: rgba(255,198,66,0.5); }
.adm-login-err {
  background: rgba(255,80,80,0.15);
  border: 1px solid rgba(255,80,80,0.3);
  color: #ff8080; border-radius: 10px;
  padding: 10px 12px; font-size: 13px;
}

.screen-admin {
  font-family: var(--font-body);
  background: var(--navy-ink);
  color: #fff;
}

/* Admin topbar */
.adm-topbar {
  display: flex; align-items: center; gap: 20px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.adm-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}
.adm-brand .ms-badge {
  width: 28px; height: 28px; font-size: 12px;
  border-radius: 7px;
}
.adm-super {
  font-size: 10px; padding: 2px 8px;
  background: rgba(123,76,255,0.2);
  color: var(--violet);
  border-color: rgba(123,76,255,0.35);
}

.adm-tabs {
  display: flex; gap: 6px;
  flex: 1;
  padding-left: 20px;
}
.adm-tab {
  padding: 8px 16px; border-radius: 10px;
  background: transparent; border: 1px solid transparent;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.adm-tab:hover { color: #fff; background: rgba(255,255,255,0.05); }
.adm-tab.sel {
  background: var(--green);
  color: var(--navy-ink);
  box-shadow: 0 4px 12px rgba(25,232,138,0.3);
}

.adm-user {
  display: flex; align-items: center; gap: 10px;
}
.adm-email {
  font-size: 12px; color: rgba(255,255,255,0.7);
}
.adm-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--violet), var(--violet-deep));
  color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.adm-exit {
  margin-left: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.adm-exit:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.3);
}

.adm-content {
  flex: 1; overflow-y: auto;
  padding: 22px 28px 28px;
}

.adm-page-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.adm-page-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: #fff;
  margin: 0;
  display: flex; align-items: baseline; gap: 10px;
}
.adm-subtle {
  font-size: 13px; color: rgba(255,255,255,0.5);
  font-weight: 500;
}
.adm-live {
  background: rgba(25,232,138,0.15);
  color: var(--green);
  border-color: rgba(25,232,138,0.35);
  font-size: 11px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
}
.adm-live .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  animation: liveDot 1.5s ease-in-out infinite;
}
@keyframes liveDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* KPI cards */
.adm-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.adm-kpi {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 14px 16px;
}
.adm-kpi-label {
  font-size: 10px; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  font-weight: 700;
}
.adm-kpi-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: 28px; color: #fff;
  margin-top: 4px; line-height: 1.1;
}
.adm-kpi-delta {
  font-size: 11px; font-weight: 700;
  margin-top: 4px;
}
.adm-kpi-delta.up   { color: var(--green); }
.adm-kpi-delta.down { color: var(--coral); }

/* Chart row */
.adm-chart-row {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 14px;
  margin-bottom: 20px;
}
.adm-chart-card, .adm-mix-card, .adm-activity-card, .adm-table-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 18px;
}
.adm-chart-head {
  margin-bottom: 16px;
}
.adm-chart-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: #fff;
}
.adm-bars {
  display: flex; align-items: flex-end; gap: 8px;
  height: 160px;
}
.adm-bars-lg { height: 200px; gap: 5px; }
.adm-bar-col {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: 4px; height: 100%;
}
.adm-bar-val {
  font-size: 9px; color: rgba(255,255,255,0.5);
  font-weight: 700; white-space: nowrap; min-height: 12px;
}
.adm-bar {
  width: 100%;
  background: linear-gradient(180deg, #FFC642, #e6a800);
  border-radius: 5px 5px 2px 2px;
  min-height: 4px;
  transition: height 0.4s;
  cursor: default;
}
.adm-bar.current {
  background: linear-gradient(180deg, #19E88A, #0bbf6e);
  box-shadow: 0 0 14px rgba(25,232,138,0.4);
}
.adm-bar-label {
  font-size: 9px; color: rgba(255,255,255,0.45);
  font-family: var(--font-display); font-weight: 700;
  white-space: nowrap;
}

/* Period selector */
.adm-period-btns {
  display: flex; gap: 4px;
}
.adm-period-btn {
  padding: 4px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6); font-size: 12px; font-weight: 700;
  cursor: pointer;
}
.adm-period-btn.sel {
  background: rgba(255,198,66,0.2); border-color: #FFC642;
  color: #FFC642;
}

/* Chart total summary */
.adm-chart-total {
  display: flex; align-items: baseline; gap: 10px;
  margin: 6px 0 14px;
}
.adm-chart-total-val {
  font-family: var(--font-display); font-weight: 900;
  font-size: 28px; color: #FFC642;
}
.adm-chart-total-sub {
  font-size: 11px; color: rgba(255,255,255,0.45);
}

/* Mix footer */
.adm-mix-footer {
  display: flex; justify-content: space-between;
  margin-top: 12px; font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* ── Admin modal (cambiar contraseña, etc.) ─────────────── */
.adm-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.adm-modal {
  background: #1a1f2e; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; padding: 24px;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.adm-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px;
}
.adm-modal-head h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800;
  font-size: 18px; color: #fff;
}
.adm-modal-close {
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 24px; cursor: pointer; padding: 0; width: 28px; height: 28px;
  line-height: 1;
}
.adm-modal-close:hover { color: #fff; }
.adm-modal-body { display: flex; flex-direction: column; gap: 6px; }
.adm-modal-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55); margin-top: 8px;
}
.adm-modal-foot {
  display: flex; gap: 10px; margin-top: 20px;
}
.adm-modal-foot .btn { flex: 1; }

/* ── Gifting ─────────────────────────────────────────────── */
.adm-gift-search-row {
  display: flex; gap: 10px; margin-bottom: 16px;
}
.adm-gift-input {
  flex: 1; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 14px; outline: none;
}
.adm-gift-input:focus { border-color: rgba(255,198,66,0.5); }
.adm-gift-input::placeholder { color: rgba(255,255,255,0.35); }

.adm-gift-results { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.adm-gift-result {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: pointer; text-align: left; width: 100%;
  transition: background 0.15s;
}
.adm-gift-result:hover { background: rgba(255,198,66,0.1); border-color: rgba(255,198,66,0.3); }

.adm-gift-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; overflow: hidden; flex-shrink: 0;
}
.adm-gift-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adm-gift-avatar.lg { width: 52px; height: 52px; font-size: 28px; }

.adm-gift-meta { flex: 1; min-width: 0; }
.adm-gift-nick {
  font-weight: 700; font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-gift-nick.lg { font-size: 18px; }
.adm-gift-sub {
  font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.adm-gift-arrow { color: rgba(255,255,255,0.4); font-size: 16px; flex-shrink: 0; }

.adm-gift-panel {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,198,66,0.2);
  border-radius: 16px; padding: 20px;
}
.adm-gift-panel-user {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.adm-gift-panel-user > div:not(.adm-gift-avatar) {
  flex: 1; min-width: 0;
}
.adm-gift-panel-user .adm-gift-sub {
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 480px) {
  .adm-gift-panel-user { gap: 10px; }
  .adm-gift-panel-user .adm-btn.ghost {
    margin-left: auto !important;
    flex-shrink: 0;
  }
  .adm-gift-panel { padding: 16px; }
}
.adm-gift-label {
  display: block; font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,0.5); letter-spacing: 0.5px;
  margin-bottom: 10px; margin-top: 4px;
}
.adm-gift-amount-row { }
.adm-gift-presets {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.adm-gift-preset {
  padding: 6px 14px; border-radius: 20px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7); font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.adm-gift-preset.sel {
  background: rgba(255,198,66,0.2); border-color: #FFC642; color: #FFC642;
}
.adm-gift-amount-input {
  width: 100%; padding: 10px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-size: 20px; font-weight: 700;
  text-align: center; outline: none; box-sizing: border-box;
}
.adm-gift-amount-input:focus { border-color: rgba(255,198,66,0.5); }

.adm-gift-feedback {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  font-size: 13px; font-weight: 600;
}
.adm-gift-feedback.ok {
  background: rgba(25,232,138,0.12); border: 1px solid rgba(25,232,138,0.3);
  color: #19E88A;
}
.adm-gift-feedback.err {
  background: rgba(255,80,80,0.12); border: 1px solid rgba(255,80,80,0.3);
  color: #ff8080;
}

/* Grant + Revoke side by side */
.adm-gift-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 16px;
}
.adm-gift-actions .btn { width: 100%; }
.adm-gift-btn-grant { min-height: 46px; }
.adm-gift-btn-revoke {
  min-height: 46px;
  padding: 0 16px;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .adm-gift-actions {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .adm-gift-btn-revoke { order: 2; }
}

/* Revenue mix */
.adm-mix-list {
  display: flex; flex-direction: column; gap: 14px;
  margin-top: 14px;
}
.adm-mix-label {
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.8);
  margin-bottom: 5px;
}
.adm-mix-label b { color: #fff; font-weight: 700; }
.adm-mix-bar {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.adm-mix-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s;
}

/* Stats por país (top countries list) */
.adm-country-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.adm-country-row {
  display: grid;
  grid-template-columns: 28px 22px 1fr 2fr 70px 50px;
  gap: 10px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.adm-country-row:last-child { border-bottom: none; }
.adm-country-rank {
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  font-size: 12px;
}
.adm-country-flag { font-size: 20px; }
.adm-country-meta { display: flex; flex-direction: column; min-width: 0; }
.adm-country-code {
  font-weight: 700; color: #fff; font-size: 13px;
}
.adm-country-name {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-country-bar-wrap {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.adm-country-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #19E88A 0%, #7B4CFF 100%);
  transition: width 0.4s;
}
.adm-country-users {
  font-weight: 600; color: rgba(255,255,255,0.85);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.adm-country-pct {
  font-weight: 700; color: var(--amber);
  text-align: right;
  font-size: 12px;
}

/* Mix users sub-line */
.adm-mix-users {
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

/* Stats por edad (age buckets) */
.adm-age-bars {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.adm-age-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.adm-age-bucket {
  font-weight: 700; color: rgba(255,255,255,0.85);
}
.adm-age-bar-wrap {
  height: 8px; border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.adm-age-bar {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #FFB800 0%, #FF7A45 100%);
  transition: width 0.4s;
}
.adm-age-users {
  text-align: right;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  font-variant-numeric: tabular-nums;
}

/* Recent activity */
.adm-activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
}
.adm-activity-row:last-child { border-bottom: none; }
.adm-activity-dot {
  font-size: 12px;
  flex-shrink: 0;
}
.adm-activity-dot.amber  { color: var(--amber); }
.adm-activity-dot.coral  { color: var(--coral); }
.adm-activity-dot.green  { color: var(--green); }
.adm-activity-dot.violet { color: var(--violet); }
.adm-activity-text { flex: 1; color: rgba(255,255,255,0.85); }
.adm-activity-ago {
  font-size: 11px; color: rgba(255,255,255,0.4);
}

/* Sub tabs (moderation) */
.adm-sub-tabs {
  display: flex; gap: 8px;
  margin-bottom: 14px;
}
.adm-sub-tab {
  padding: 8px 16px; border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.adm-sub-tab:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.adm-sub-tab.sel {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

/* Table */
.adm-table-card {
  padding: 0;
  overflow: hidden;
}
.adm-table-head, .adm-table-row {
  display: grid;
  grid-template-columns: 1.5fr 2.2fr 0.9fr 0.9fr 1.3fr;
  gap: 12px;
  padding: 12px 18px;
  align-items: center;
}
.adm-table-head {
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 10px; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.6);
  font-weight: 800;
}
.adm-table-row {
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  transition: background 0.12s;
}
.adm-table-row:hover { background: rgba(255,255,255,0.03); }
.adm-table-row:last-child { border-bottom: none; }
.center { text-align: center; }
.right { text-align: right; justify-self: end; }
.adm-table-empty {
  padding: 40px; text-align: center;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}

.adm-cell-account {
  display: flex; align-items: center; gap: 10px;
}
.adm-kid-avatar-dot, .adm-biz-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 16px;
}
.adm-cell-nick {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; color: #fff;
}
.adm-cell-sub {
  font-size: 11px; color: rgba(255,255,255,0.5);
}
.adm-cell-reason {
  color: rgba(255,255,255,0.85);
}
.adm-cell-reports {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: #fff;
}

.adm-sev {
  padding: 3px 9px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.3px;
}
.adm-sev.high { background: rgba(255,92,92,0.2);  color: var(--coral); }
.adm-sev.med  { background: rgba(255,198,66,0.2); color: var(--amber); }
.adm-sev.low  { background: rgba(123,76,255,0.2); color: var(--violet); }

.adm-cell-actions {
  display: flex; gap: 6px;
  justify-content: flex-end;
}
.adm-btn {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.adm-btn:hover { background: rgba(255,255,255,0.08); }
.adm-btn.ghost { color: var(--violet); border-color: var(--violet); }
.adm-btn.ghost:hover { background: rgba(123,76,255,0.15); }
.adm-btn.primary {
  background: var(--green);
  color: var(--navy-ink);
  border-color: var(--green);
}
.adm-btn.primary:hover { background: var(--green-deep); }
.adm-btn.danger {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}
.adm-btn.danger:hover { background: var(--coral-deep); }

.adm-review-tag {
  font-size: 12px; font-weight: 700;
  color: var(--violet);
  padding: 6px 10px;
}

.adm-footer-note {
  margin-top: 14px;
  padding: 12px 16px;
  background: rgba(123,76,255,0.08);
  border: 1px solid rgba(123,76,255,0.2);
  border-radius: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.8);
}

/* Businesses screen specifics */
.adm-biz-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 16px;
}
.adm-biz-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 16px;
}
.adm-biz-stat-label {
  font-size: 10px; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.adm-biz-stat-big {
  font-family: var(--font-display); font-weight: 800;
  font-size: 26px; color: #fff; line-height: 1.05;
  margin-top: 4px;
}
.adm-biz-stat-big.green { color: var(--green); }
.adm-biz-stat-big.amber { color: var(--amber); }

.adm-table-head.biz-grid, .adm-table-row.biz-grid {
  grid-template-columns: 2fr 1.2fr 1.2fr 0.9fr 1.1fr 1.5fr;
}
.adm-table-head.biz-grid-stats, .adm-table-row.biz-grid-stats {
  grid-template-columns: 2fr 1.2fr 1.2fr 0.9fr 1.1fr 1fr;
}
.adm-biz-bytype {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.adm-type-chip {
  padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,0.07);
  font-size: 12px; color: rgba(255,255,255,0.8);
}
.adm-type-chip.small {
  padding: 2px 8px; font-size: 11px;
}
.adm-loading, .adm-empty {
  padding: 24px 16px;
  text-align: center;
  color: rgba(255,255,255,0.45);
  font-size: 14px;
}
.adm-plan-tag {
  padding: 3px 10px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: 0.3px;
}
.adm-plan-tag.official {
  background: rgba(255,198,66,0.2);
  color: var(--amber);
}
.adm-plan-tag.free {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
}
.adm-status {
  padding: 4px 10px; border-radius: 6px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
}
.adm-status.active    { background: rgba(25,232,138,0.18); color: var(--green); }
.adm-status.pending   { background: rgba(255,198,66,0.2);  color: var(--amber); }
.adm-status.rejected  { background: rgba(255,92,92,0.18);  color: var(--coral); }

/* B2B admin link in landing footer */
.b2b-admin-link {
  display: inline-block;
  margin-left: 8px;
}
.b2b-admin-link button {
  background: transparent; border: none;
  color: var(--violet-deep);
  font-family: var(--font-display); font-weight: 700; font-size: 10px;
  cursor: pointer; padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Admin responsive (tablet) */
@media (max-width: 1000px) {
  .adm-kpis { grid-template-columns: 1fr 1fr; }
  .adm-chart-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .adm-topbar { flex-wrap: wrap; gap: 10px; padding: 10px 14px; }
  .adm-tabs { order: 3; width: 100%; padding-left: 0; overflow-x: auto; }
  .adm-user .adm-email { display: none; }
  .adm-kpis { grid-template-columns: 1fr 1fr; }
  .adm-biz-stats { grid-template-columns: 1fr; }
  .adm-table-head, .adm-table-row {
    grid-template-columns: 1.3fr 1.8fr !important;
    font-size: 11px;
  }
  .adm-table-head > div:nth-child(n+3),
  .adm-table-row > div:nth-child(n+3) { display: none; }
  .adm-cell-actions { display: flex !important; grid-column: 1 / -1; margin-top: 6px; }
}

/* ============================================================
   Responsive tweaks
   ============================================================ */
@media (max-height: 700px) {
  .screen-onboarding { padding: 40px 24px 28px; }
  .mascot-trio { min-height: 140px; }
  .mascot-trio .back img { height: 90px !important; }
  .mascot-trio .front img { height: 130px !important; }
  .mascot-trio-img { min-height: 150px; }
  .mascot-trio-img img { max-width: 280px; }
  .onboarding-title { margin-top: 10px; font-size: 38px !important; }
  .screen-onboarding .tagline { margin-top: 10px; font-size: 15px; }
  .splash-album { width: 180px; }
}

/* ============================================================
   Modal de pago dLocal Go
   ============================================================ */
.payment-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(3, 16, 43, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: payOverlayIn 0.18s ease-out;
}
@keyframes payOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.payment-modal {
  background: var(--paper);
  color: var(--ink);
  border-radius: 18px;
  width: 100%;
  max-width: 380px;
  padding: 20px 20px 16px;
  box-shadow: var(--sh-lg);
  animation: payModalIn 0.22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes payModalIn { from { transform: translateY(12px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

.payment-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.payment-modal-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
}
.payment-close {
  background: transparent;
  border: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-mute);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.payment-close:hover { background: var(--cream); }

.payment-modal-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  background: var(--violet-soft);
  border-radius: 12px;
  margin-bottom: 14px;
}
.payment-modal-amount .amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--violet-deep);
}
.payment-modal-amount .note {
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 600;
}

.payment-modal-body { display: flex; flex-direction: column; gap: 10px; }

.dl-explain {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.dl-explain strong { color: var(--ink); }

.dl-error {
  margin-top: 4px;
  padding: 10px 12px;
  background: rgba(255, 92, 92, 0.10);
  border: 1px solid rgba(255, 92, 92, 0.35);
  color: var(--coral-deep);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

.dl-sandbox-hint {
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--cream);
  border-radius: 10px;
  font-size: 11px;
  color: var(--ink-mute);
  line-height: 1.45;
}
.dl-sandbox-hint code {
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--navy);
  font-size: 11px;
}
.dl-sandbox-hint strong { color: var(--navy); }

.payment-modal-foot {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.payment-modal-foot .btn { flex: 1; }
.payment-modal-foot .btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   Screen: Adult Profile (tab "Yo" para role=adult)
   ============================================================ */
.screen-adult-profile { background: var(--cream); display: flex; flex-direction: column; }
.screen-adult-profile .phone-header.amber {
  position: relative; padding-bottom: 24px;
}
.screen-adult-profile .ap-hero {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px 0;
  position: relative; z-index: 2;
}
.screen-adult-profile .ap-avatar {
  width: 80px; height: 80px;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.screen-adult-profile .ap-meta { flex: 1; min-width: 0; color: var(--navy-ink); }
.screen-adult-profile .ap-nick { font-size: 20px; font-weight: 800; }
.screen-adult-profile .ap-role { font-size: 12px; opacity: 0.8; margin-top: 2px; }
.screen-adult-profile .ap-team { font-size: 13px; font-weight: 700; margin-top: 4px; }
.screen-adult-profile .ap-body {
  flex: 1; overflow-y: auto;
  padding: 18px 16px 100px;
}
.screen-adult-profile .ap-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--ink-mute); margin-bottom: 10px;
}
.screen-adult-profile .ap-tiles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.screen-adult-profile .ap-tile {
  background: #fff; border: 2px solid var(--amber);
  border-radius: 14px; padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; font-family: inherit; text-align: left;
  box-shadow: var(--sh-sm);
  transition: transform 0.1s, box-shadow 0.15s;
}
.screen-adult-profile .ap-tile:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }
.screen-adult-profile .ap-tile:active { transform: translateY(1px); }
.screen-adult-profile .ap-tile-icon { font-size: 24px; }
.screen-adult-profile .ap-tile-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.screen-adult-profile .ap-tile-sub { font-size: 11px; color: var(--ink-mute); }
.screen-adult-profile .ap-signout {
  margin-top: 22px; width: 100%;
  padding: 12px; border-radius: 12px;
  background: transparent; color: var(--coral-deep);
  border: 1px solid var(--coral); font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.screen-adult-profile .ap-signout:hover { background: rgba(255,107,107,0.08); }

/* ============================================================
   Screen: B2B Onboarding (negocio sin plan activo)
   ============================================================ */
.screen-b2b-onboarding { background: var(--cream); display: flex; flex-direction: column; }
.screen-b2b-onboarding .b2b-onb-body {
  flex: 1; padding: 28px 22px 36px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 14px;
}
.screen-b2b-onboarding .b2b-onb-body h2 { margin-top: 6px; }
.screen-b2b-onboarding .b2b-onb-body .t-soft {
  max-width: 300px; line-height: 1.5; margin-bottom: 10px;
}
.screen-b2b-onboarding .btn { width: 100%; }

/* ============================================================
   Screen: Role Gate (crear cuenta o iniciar sesión)
   ============================================================ */
.screen-role-gate {
  background: var(--cream);
  display: flex; flex-direction: column;
}
.screen-role-gate .gate-body {
  flex: 1;
  padding: 28px 22px 32px;
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
}
.screen-role-gate .gate-mascot {
  margin: 8px 0 14px;
}
.screen-role-gate .gate-desc {
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 300px;
  margin: 0 0 26px;
}
.screen-role-gate .gate-actions {
  display: flex; flex-direction: column;
  gap: 12px;
  width: 100%;
}
.screen-role-gate .gate-btn {
  width: 100%;
  padding: 16px 18px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 16px;
  font-size: 16px;
}
.screen-role-gate .gate-btn-title {
  font-size: 17px;
  font-weight: 800;
}
.screen-role-gate .gate-btn-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.78;
}
.screen-role-gate .btn-ghost-strong {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
  cursor: pointer;
  font-family: inherit;
}
.screen-role-gate .btn-ghost-strong:hover {
  background: rgba(11, 30, 79, 0.06);
}
.screen-role-gate .gate-note {
  margin-top: 24px;
  padding: 14px 16px;
  background: rgba(124, 92, 255, 0.08);
  border-left: 3px solid var(--violet);
  border-radius: 12px;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
  text-align: left;
}
.screen-role-gate .gate-note-kid {
  background: rgba(25, 232, 138, 0.13);
  border-left: none;
  border: 2px solid var(--green, #19E88A);
  border-radius: 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-deep, #0B1E4F);
  text-align: center;
  padding: 18px 20px;
  line-height: 1.4;
}

/* ============================================================
   Propose · Buscador + toggles "quiero todas las que me faltan"
   ============================================================ */
.want-search-row {
  display: flex; align-items: stretch; gap: 8px;
}
.want-search-col { flex: 1; min-width: 0; max-width: calc(100% - 116px); }
.want-search-col .country-filter { padding: 6px 0 4px; }

.want-global-toggle {
  display: flex; flex-direction: row; align-items: center;
  gap: 8px;
  padding: 0 12px;
  margin: 6px 0 4px;
  background: #fff;
  border: 1.5px solid rgba(123, 76, 255, 0.25);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  width: 104px;
  transition: background 0.15s, border-color 0.15s;
}
.want-global-toggle:hover { border-color: var(--violet); }
.want-global-toggle.on {
  background: rgba(123, 76, 255, 0.10);
  border-color: var(--violet);
}
.want-global-toggle .wgt-switch {
  flex-shrink: 0;
  width: 32px; height: 18px;
  background: #d4d4d4;
  border-radius: 999px;
  position: relative;
  transition: background 0.2s;
}
.want-global-toggle.on .wgt-switch { background: var(--violet); }
.want-global-toggle .wgt-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
.want-global-toggle.on .wgt-knob { transform: translateX(14px); }
.want-global-toggle .wgt-label {
  font-size: 10px; font-weight: 700;
  color: var(--ink-mute);
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-align: left;
}
.want-global-toggle .wgt-label b {
  display: block;
  font-size: 12px;
  color: var(--violet);
}

/* ============================================================
   Propose · Toggle "quiero todas las que me faltan"
   ============================================================ */
.want-all-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  margin: 8px 0 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid rgba(123, 76, 255, 0.25);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.want-all-toggle:hover { border-color: var(--violet); }
.want-all-toggle.on {
  background: rgba(123, 76, 255, 0.10);
  border-color: var(--violet);
}
.want-all-toggle .wat-switch {
  width: 38px; height: 22px;
  background: #d4d4d4;
  border-radius: 999px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s;
}
.want-all-toggle.on .wat-switch { background: var(--violet); }
.want-all-toggle .wat-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
.want-all-toggle.on .wat-knob { transform: translateX(16px); }
.want-all-toggle .wat-label {
  flex: 1;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
}
.want-all-toggle .wat-label b { color: var(--violet); }

/* ============================================================
   Mapa Seguro · Google Maps + prompt de ubicación
   ============================================================ */
.gmap-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #e7eaef;
}

.location-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, #f6f3ec 0%, #e7eaef 100%);
  z-index: 5;
  gap: 12px;
}
.location-prompt .t-h2 { margin: 8px 0 4px; }
.location-prompt .t-soft {
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 320px;
  line-height: 1.5;
  margin: 0 0 8px;
}
.location-or {
  margin: 14px 0 6px;
  font-size: 12px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.location-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 320px;
}
.location-prompt .loc-hint {
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-mute, rgba(11,30,79,0.7));
  max-width: 320px;
}
.city-btn {
  padding: 8px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.city-btn:hover { border-color: var(--violet); background: rgba(123, 76, 255, 0.06); }

.map-loading {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  padding: 18px 24px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 20;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}
.map-loading .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e6e3da;
  border-top-color: var(--violet);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.map-error {
  position: absolute;
  /* Bien abajo para no tapar legend/búsqueda. Auto-dismiss a los 5s. */
  bottom: 110px; left: 16px; right: 16px;
  background: #FFE5E5;
  color: #B00020;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  z-index: 25;
  text-align: center;
  animation: mapErrorIn 0.2s ease-out, mapErrorOut 0.4s ease-in 4.6s forwards;
}
@keyframes mapErrorIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
@keyframes mapErrorOut {
  to { transform: translateY(8px); opacity: 0; }
}

.legend-change {
  margin-top: 8px;
  background: transparent;
  border: none;
  color: var(--violet);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}
.legend-change:hover { text-decoration: underline; }

/* Visibility toggle styles (.vis-row, .vis-toggle, .vis-thumb, etc.)
   eliminados en v139 — el toggle de visibilidad fue removido del UI. */

/* .radar-vis-bar y .rvb-* legacy también eliminados en v139. */

/* ───────────────────────────────────────────────────────
   Business Register screen (form + map pin)
   ─────────────────────────────────────────────────────── */
.screen-business-register .body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 130px;
  -webkit-overflow-scrolling: touch;
}
.screen-business-register .section { margin-top: 14px; }
.screen-business-register .section:first-child { margin-top: 0; }
.screen-business-register .phone-header h1 {
  font-size: 19px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.screen-business-register .phone-header .sub {
  font-size: 12px;
}
.screen-business-register .phone-header-row > div { min-width: 0; }

.biz-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.biz-type-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}
.biz-type-btn.sel {
  border-color: var(--amber-deep, #D77A00);
  border-width: 3px;
  background: #FFF0CC;
  box-shadow: 0 0 0 1px var(--amber-deep, #D77A00);
}
.biz-type-btn.sel::after {
  content: '✓';
  position: absolute;
  top: 3px; right: 5px;
  font-size: 10px; font-weight: 900;
  color: var(--amber-deep, #D77A00);
  line-height: 1;
}
.biz-type-icon  { font-size: 20px; }
.biz-type-label { font-size: 11px; font-weight: 700; color: var(--ink); }
.biz-type-btn.sel .biz-type-label { color: var(--amber-deep, #D77A00); }

/* Autocomplete custom del campo dirección */
.biz-addr-wrap { position: relative; }
.biz-addr-suggestions {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 50;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}
.biz-addr-sugg {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.biz-addr-sugg:hover,
.biz-addr-sugg:focus { background: rgba(11,30,79,0.06); outline: none; }
.biz-addr-sugg-icon { font-size: 16px; flex-shrink: 0; }
.biz-addr-sugg-text {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
}
.biz-addr-sugg-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.biz-addr-sugg-sub {
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.biz-map-help {
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.biz-map-wrap {
  position: relative;
  width: 100%;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--border);
}
.biz-map-canvas { width: 100%; height: 100%; }
.biz-map-fallback {
  display: flex; gap: 6px; align-items: center;
  padding: 12px;
  background: rgba(0,0,0,0.04);
  font-size: 12px;
}
.biz-map-fallback input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 12px;
}
.biz-map-coords {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 600;
}

/* ───────────────────────────────────────────────────────
   Business Dashboard · ubicación + tip cards
   ─────────────────────────────────────────────────────── */
.biz-loc-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin: 4px 16px 12px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.biz-loc-pin    { font-size: 24px; }
.biz-loc-meta   { flex: 1; min-width: 0; }
.biz-loc-addr   { font-weight: 700; color: var(--ink); font-size: 14px; }
.biz-loc-coords { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }
.biz-loc-edit {
  font-size: 12px; font-weight: 700;
  color: var(--violet);
  background: none; border: none; cursor: pointer;
  padding: 6px 10px; border-radius: 8px;
}
.biz-loc-edit:hover { background: rgba(123,76,255,0.08); }

.biz-tip-card {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 8px 16px 16px;
  padding: 12px 14px;
  background: #FFF7E6;
  border-radius: 12px;
  border: 1px solid #F0DDB5;
}
.biz-tip-icon { font-size: 18px; flex-shrink: 0; }
.biz-tip-text { font-size: 12px; color: #6B4D00; line-height: 1.4; }

/* Business preview · tip row reemplaza el bloque promo */
.bp-tip-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 12px;
  margin: 10px 14px;
  background: #FFF7E6;
  border-radius: 10px;
  font-size: 12px;
  color: #6B4D00;
}
.bp-tip-icon { font-size: 16px; }

/* .radar-vis-row / .rvr-label eliminados en v139 — toggle removido. */

/* ───────────────────────────────────────────────────────
   Radar · estado bloqueado (sin repetidas)
   ─────────────────────────────────────────────────────── */
.radar-blocked {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 28px 24px 80px;
  gap: 14px;
}
.radar-blocked-icon {
  font-size: 56px;
  margin-top: -10px;
}
.radar-blocked-title {
  font-size: 22px; font-weight: 800;
  color: var(--ink, #0D1426);
  letter-spacing: -0.4px;
  margin: 0;
}
.radar-blocked-text {
  font-size: 15px; line-height: 1.5;
  color: var(--ink-mute, #5A6678);
  max-width: 320px;
  margin: 0;
}
.radar-blocked .btn { margin-top: 10px; max-width: 260px; }

/* ───────────────────────────────────────────────────────
   Coin balance boxes clickables (van a la tienda de monedas)
   ─────────────────────────────────────────────────────── */
.kp-coins-card-clickable {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: transform 0.12s, box-shadow 0.12s;
}
.kp-coins-card-clickable:hover  { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.12); }
.kp-coins-card-clickable:active { transform: translateY(0); }

/* El "botón" interior pasa a ser un span estilizado: no es interactivo */
.kp-coins-cta {
  display: inline-block;
  pointer-events: none;       /* el click llega al card padre */
}

/* Balance grande clickable en cosmetics-shop / feature-draft */
.cs-balance-clickable {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform 0.12s, box-shadow 0.12s;
}
.cs-balance-clickable:hover  { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.10); }
.cs-balance-clickable:active { transform: translateY(0); }
.cs-balance-clickable .cs-balance-label {
  font-size: 12px; color: var(--ink-mute, #5A6678);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cs-balance-clickable .cs-balance-amount {
  font-size: 26px; font-weight: 800;
  color: var(--ink, #0D1426);
}

/* Pill de monedas en la cabecera del kid-profile (.kpf-coins) clickable */
.kpf-coins-clickable {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: transform 0.12s;
}
.kpf-coins-clickable:hover  { transform: scale(1.04); }
.kpf-coins-clickable:active { transform: scale(0.98); }

/* Grilla de 3 tiles (Marcos · Avatares · Destacar) en kid-premium */
.kp-tiles.kp-tiles-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 380px) {
  .kp-tiles.kp-tiles-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ───────────────────────────────────────────────────────
   Shop section card (Marcos / Avatares / Destacar perfil)
   Distinto visualmente de la card de monedas (que es amber).
   Acá: violeta tenue + header con ícono de bolsa, separación
   clara con la card de arriba.
   ─────────────────────────────────────────────────────── */
.kp-shop-section {
  margin: 20px 16px 0;
  padding: 14px 14px 16px;
  background: linear-gradient(180deg, #F5F0FF 0%, #EDE5FF 100%);
  border-radius: 18px;
  border: 1px solid #DCD0FF;
  box-shadow: 0 2px 6px rgba(123,76,255,0.08);
  position: relative;
}
/* Etiqueta tipo "TIENDA" en el borde superior, como un tab card */
.kp-shop-section::before {
  content: 'TIENDA';
  position: absolute;
  top: -10px; left: 18px;
  background: #7B4CFF;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 3px 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(123,76,255,0.30);
}
.kp-shop-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  padding: 4px 2px 0;
}
.kp-shop-bag {
  font-size: 28px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}
.kp-shop-titles { flex: 1; min-width: 0; }
.kp-shop-title {
  font-size: 16px; font-weight: 800;
  color: #4A2F9A;
  letter-spacing: -0.2px;
}
.kp-shop-sub {
  font-size: 12px;
  color: #6B5CA8;
  margin-top: 1px;
}

.kp-shop-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.kp-shop-tiles:has(.kp-shop-tile.feat) {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 380px) {
  .kp-shop-tiles:has(.kp-shop-tile.feat) {
    grid-template-columns: repeat(2, 1fr);
  }
  .kp-shop-tiles:has(.kp-shop-tile.feat) .kp-shop-tile.feat {
    grid-column: span 2;
  }
}

.kp-shop-tile {
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 12px 14px;
  background: #fff;
  border: 1.5px solid #DCD0FF;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.15s;
}
.kp-shop-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(123,76,255,0.18);
  border-color: #7B4CFF;
}
.kp-shop-tile:active { transform: translateY(0); }
.kp-shop-tile-icon  { font-size: 24px; }
.kp-shop-tile-title {
  font-size: 13px; font-weight: 800;
  color: #2D1F66;
  letter-spacing: -0.1px;
  margin-top: 2px;
}
.kp-shop-tile-sub {
  font-size: 11px;
  color: #7C6DAA;
  line-height: 1.3;
}

/* Variante "Destacar perfil" — amber para diferenciarlo */
.kp-shop-tile.feat {
  border-color: #FFD088;
  background: linear-gradient(180deg, #FFFBF0 0%, #FFF4DC 100%);
}
.kp-shop-tile.feat:hover {
  border-color: #FFB020;
  box-shadow: 0 6px 14px rgba(255,176,32,0.25);
}
.kp-shop-tile.feat .kp-shop-tile-title { color: #6B4D00; }
.kp-shop-tile.feat .kp-shop-tile-sub   { color: #B07F00; }
/* Variante activo: apagado */
.kp-shop-tile.feat.feat-active {
  border-color: #ddd;
  background: #f5f5f5;
  opacity: 0.7;
  cursor: default;
}
.kp-shop-tile.feat.feat-active .kp-shop-tile-title { color: #666; }
.kp-shop-tile.feat.feat-active .kp-shop-tile-sub   { color: #999; }

/* ───────────────────────────────────────────────────────
   Stat de "Propuestas" en el grid del Perfil — clickable.
   Visualmente igual a las otras stats; con dot rojo si hay
   pendientes para llamar la atención.
   ─────────────────────────────────────────────────────── */
.kpf-stat.kpf-stat-clickable {
  cursor: pointer;
  border: none;
  font-family: inherit;
  position: relative;
  transition: transform 0.12s, box-shadow 0.12s;
}
.kpf-stat.kpf-stat-clickable:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.10);
}
.kpf-stat.kpf-stat-clickable:active { transform: translateY(0); }
.kpf-stat.kpf-stat-clickable.has-pending .kpf-stat-value {
  color: var(--coral, #FF6B6B);
}
.kpf-stat-dot {
  position: absolute;
  top: 8px; right: 8px;
  width: 10px; height: 10px;
  background: var(--coral, #FF6B6B);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  animation: kpf-pulse 1.6s ease-in-out infinite;
}
@keyframes kpf-pulse {
  0%, 100% { transform: scale(1);   opacity: 1;   }
  50%      { transform: scale(1.2); opacity: 0.7; }
}

/* ───────────────────────────────────────────────────────
   kpf-stat-points · arrow indicator
   ─────────────────────────────────────────────────────── */
.kpf-stat-points { position: relative; }
.kpf-stat-arrow {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  font-size: 18px; color: #aaa; line-height: 1;
  pointer-events: none;
}

/* ───────────────────────────────────────────────────────
   Screen · Kid Points Info
   ─────────────────────────────────────────────────────── */
.screen-kid-points-info {
  display: flex; flex-direction: column;
  height: 100%; background: var(--bg, #0D1426); overflow: hidden;
  color: #fff;
}
.kpi-header {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 16px 12px;
  background: linear-gradient(160deg, #1a2540 0%, #0D1426 100%);
  z-index: 1;
}
.kpi-back {
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  border: none; color: #fff; font-size: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kpi-header-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.3px;
}
.kpi-scroll {
  flex: 1; overflow-y: auto;
  padding: 0 16px 32px;
  -webkit-overflow-scrolling: touch;
}

/* Hero */
.kpi-hero {
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 0 20px;
  gap: 4px;
}
.kpi-hero-pts {
  font-size: 64px; font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 6px rgba(255,200,0,0.35));
}
.kpi-hero-label {
  font-size: 15px; color: rgba(255,255,255,0.55); letter-spacing: 1px; text-transform: uppercase;
}
.kpi-level-chip {
  margin-top: 6px;
  background: rgba(255,215,0,0.15);
  border: 1px solid rgba(255,215,0,0.4);
  border-radius: 20px; padding: 3px 14px;
  font-size: 13px; font-weight: 600; color: #FFD700;
}

/* Progress */
.kpi-progress-wrap {
  background: rgba(255,255,255,0.05);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 24px;
}
.kpi-progress-label {
  display: flex; justify-content: space-between;
  font-size: 13px; margin-bottom: 10px;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.kpi-progress-bar {
  height: 10px; background: rgba(255,255,255,0.12); border-radius: 5px; overflow: hidden;
}
.kpi-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD700, #FFA500);
  border-radius: 5px;
  transition: width 0.5s cubic-bezier(0.4,0,0.2,1);
}
.kpi-progress-marks {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 4px;
}

/* Section titles */
.kpi-section-title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  margin: 20px 0 10px;
}

/* How to earn */
.kpi-how-list {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 4px;
}
.kpi-how-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.05); border-radius: 12px; padding: 12px 14px;
}
.kpi-how-badge {
  min-width: 52px; text-align: center;
  font-size: 14px; font-weight: 800; border-radius: 8px; padding: 5px 0;
}
.kpi-how-badge.trade  { background: rgba(99,179,237,0.18); color: #63b3ed; }
.kpi-how-badge.team   { background: rgba(104,211,145,0.18); color: #68d391; }
.kpi-how-badge.album  { background: rgba(255,215,0,0.18); color: #FFD700; }
.kpi-how-main { font-size: 14px; font-weight: 600; }
.kpi-how-sub  { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.kpi-max-note {
  font-size: 12px; color: rgba(255,255,255,0.35); text-align: center; margin-top: 6px;
}

/* Idols grid */
.kpi-idols-sub {
  font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 14px; margin-top: -6px;
}
.kpi-idols-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.kpi-idol-card {
  background: rgba(255,255,255,0.05); border-radius: 14px;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 10px 12px; gap: 8px; position: relative;
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.12s;
}
.kpi-idol-card.is-owned {
  background: rgba(255,215,0,0.07);
  border-color: rgba(255,215,0,0.25);
}
.kpi-idol-badge {
  position: absolute; top: 8px; left: 8px;
  font-size: 10px; font-weight: 700; border-radius: 6px; padding: 2px 8px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.kpi-idol-badge.owned { background: rgba(255,215,0,0.2); color: #FFD700; }
.kpi-idol-img {
  width: 80px; height: 80px; object-fit: contain;
}
.kpi-idol-name {
  font-size: 13px; font-weight: 700; text-align: center;
}
.kpi-idol-btn {
  width: 100%; border-radius: 8px; padding: 7px 4px;
  font-size: 11px; font-weight: 700; text-align: center; border: none;
  cursor: default; line-height: 1.2;
}
.kpi-idol-btn.redeem {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1a00; cursor: pointer;
}
.kpi-idol-btn.redeem:active { opacity: 0.85; }
.kpi-idol-btn.equipped {
  background: rgba(104,211,145,0.18); color: #68d391;
  font-size: 16px;
}
.kpi-idol-btn.locked {
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.3);
}

/* ───────────────────────────────────────────────────────
   Radar · tooltip de bienvenida (1 sola vez, dismissable)
   ─────────────────────────────────────────────────────── */
.radar-tip {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 16px 0;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(123,76,255,0.08), rgba(25,232,138,0.06));
  border: 1px solid rgba(123,76,255,0.18);
  border-radius: 12px;
  animation: radarTipSlide 0.3s ease;
}
@keyframes radarTipSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.radar-tip-icon { font-size: 20px; flex-shrink: 0; }
.radar-tip-text {
  flex: 1; font-size: 12px; line-height: 1.4;
  color: var(--ink-soft);
}
.radar-tip-close {
  background: none; border: none; cursor: pointer;
  font-size: 22px; line-height: 1;
  color: var(--ink-mute); padding: 0 4px;
  flex-shrink: 0;
}
.radar-tip-close:hover { color: var(--ink); }

/* ───────────────────────────────────────────────────────
   Radar · selector de radio (chips de km)
   ─────────────────────────────────────────────────────── */
.radar-radius-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: rgba(0,0,0,0.03);
  border-bottom: 1px solid var(--border);
}
.radar-radius-label {
  font-size: 12px; font-weight: 700;
  color: var(--ink-mute, #5A6678);
  white-space: nowrap;
}
.radar-radius-chips {
  display: flex; gap: 6px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.radar-radius-chips::-webkit-scrollbar { display: none; }
.radar-radius-chip {
  flex-shrink: 0;
  padding: 5px 11px;
  font-size: 12px; font-weight: 700;
  color: var(--ink, #0D1426);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.radar-radius-chip:hover  { border-color: var(--violet, #7B4CFF); }
.radar-radius-chip.sel {
  background: var(--violet, #7B4CFF);
  color: #fff;
  border-color: var(--violet, #7B4CFF);
  box-shadow: 0 2px 6px rgba(123,76,255,0.30);
}

/* Distancia inline junto al @nick en la lista del radar (legacy) */
.radar-kid-distance {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-mute, #5A6678);
  margin-left: 4px;
}

/* ───────────────────────────────────────────────────────
   Pill de distancia con color por proximidad en el radar
   verde ≤ 5km · naranja ≤ 20km · rojo > 20km · gris sin GPS
   ─────────────────────────────────────────────────────── */
.radar-distance-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.radar-distance-pill.rdp-near    { background: #16a34a; color: #fff; }       /* verde */
.radar-distance-pill.rdp-mid     { background: #f97316; color: #fff; }       /* naranja */
.radar-distance-pill.rdp-far     { background: #dc2626; color: #fff; }       /* rojo */
.radar-distance-pill.rdp-unknown {
  background: #e5e7eb; color: #6b7280;
  box-shadow: none;
}

/* (Debug log del radar removido en v143 — ya no es necesario) */

/* ───────────────────────────────────────────────────────
   Sent screen · Cartel "Avisale al tutor"
   Recordatorio prominente para el niño: tiene que decirle
   a su papá/mamá que abra la app y apruebe.
   ─────────────────────────────────────────────────────── */
.sent-parent-cta {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 14px 16px 0;
  padding: 14px 16px;
  background: linear-gradient(135deg, #FFF7E6 0%, #FFEFC9 100%);
  border: 2px solid #FFB020;
  border-radius: 16px;
  box-shadow: 0 3px 10px rgba(255,176,32,0.20);
}
.spc-icon {
  font-size: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.08));
}
.spc-meta { flex: 1; min-width: 0; }
.spc-title {
  font-size: 15px; font-weight: 800;
  color: #6B4D00;
  letter-spacing: -0.2px;
}
.spc-text {
  font-size: 13px;
  color: #8A6500;
  line-height: 1.4;
  margin-top: 4px;
}
.spc-text b { color: #5C3F00; }

/* ════════════════════════════════════════════════════════════
   Admin dashboard · Responsive mobile portrait (<480px)
   El admin se diseñó pensando en horizontal/desktop. Estos
   overrides hacen que sea usable en celular vertical sin
   ocultar info crítica (pasamos de tabla horizontal a cards
   apiladas con label/valor).
   ════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* En mobile la "device" no debe ser de ancho fijo */
  .device { width: 100%; max-width: 100vw; min-height: 100vh; border-radius: 0; }

  /* Padding del contenido más compacto */
  .adm-content { padding: 14px 12px; }

  /* KPIs apilados verticalmente */
  .adm-kpis { grid-template-columns: 1fr !important; gap: 10px; }
  .adm-kpi-val { font-size: 22px !important; }

  /* Topbar y tabs */
  .adm-topbar { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
  .adm-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .adm-tab { flex-shrink: 0; padding: 8px 12px; font-size: 13px; }

  /* Bars (gráficos de barras) — scroll horizontal en mobile */
  .adm-bars, .adm-bars-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px !important;
    padding-bottom: 8px;
  }
  .adm-bar { min-width: 32px; }

  /* Country row: ocultar columnas no esenciales (rank y pct chico) */
  .adm-country-row {
    grid-template-columns: 22px 1fr 60px !important;
    gap: 8px !important;
    font-size: 12px;
  }
  .adm-country-row .adm-country-rank,
  .adm-country-row .adm-country-pct { display: none; }

  /* Tablas → cards apiladas (en lugar de display:none que oculta data) */
  .adm-table-head { display: none; }
  .adm-table-row {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    margin-bottom: 8px;
    background: var(--surface);
  }
  .adm-table-row > * {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
  }
  .adm-table-row > *:not(:last-child) {
    border-bottom: 1px solid var(--border);
  }
  /* Si la celda tiene data-label, mostrar el label antes del valor */
  .adm-table-row > *[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ink-mute);
    font-size: 11px;
  }

  /* Biz stats values más chicos */
  .adm-biz-stats .adm-biz-stat-val,
  .biz-stats .biz-stat-val { font-size: clamp(20px, 5.5vw, 26px); }

  /* Search row del gifting */
  .adm-gift-search-row { flex-wrap: wrap; gap: 6px; }
  .adm-gift-input { min-width: 0; }

  /* Page title stacks on mobile */
  .adm-page-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 20px;
    line-height: 1.2;
  }
  .adm-page-title .adm-subtle { font-size: 12px; }

  /* Modales del admin */
  .adm-modal { padding: 18px 16px; max-width: calc(100vw - 24px); }

  /* Modal genérico también más compacto en pantallas chiquitas */
  .app-modal-card { padding: 18px; }
}

/* Pantallas muy chicas (<360px) — extras para iPhone SE / Galaxy A series viejos */
@media (max-width: 360px) {
  .biz-type-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .biz-type-icon { font-size: 18px; }
  .biz-type-label { font-size: 10px; }
  .app-modal-card { padding: 14px; max-width: calc(100vw - 20px); }
}

/* ============================================================
   CHAT INTERNO ENTRE ADULTOS
   - Popup info usuario en el radar (con variante dorada Pro)
   - Lista de chats (tab "Chats")
   - Pantalla chat-thread estilo WhatsApp
   ============================================================ */

/* ─── Animación popIn (popup) ──────────────────────────── */
@keyframes chatPopIn {
  0%   { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

/* ─── Popup info usuario en el radar ──────────────────── */
.radar-popup-overlay {
  position: fixed; inset: 0;
  background: rgba(11,30,79,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  padding: 16px;
}
.radar-popup-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 28px 18px 18px;
  width: min(320px, 88vw);
  border: 2px solid var(--line, #e5e7eb);
  box-shadow: 0 18px 50px rgba(0,0,0,0.30);
  text-align: center;
  animation: chatPopIn 0.18s ease-out;
}
.radar-popup-card.is-pro {
  border: 2px solid #B88300;
  background: linear-gradient(180deg, #fff 0%, #fff8e1 100%);
  box-shadow:
    0 0 0 4px rgba(255,198,66,0.25),
    0 18px 50px rgba(255,154,61,0.35);
}
.radar-popup-pro-crown {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  border: 2px solid #B88300;
  border-radius: 999px;
  padding: 4px 14px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 12px; letter-spacing: 1.5px;
  color: #3d2400;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  box-shadow: 0 3px 8px rgba(255,154,61,0.45);
  white-space: nowrap;
}
.radar-popup-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 32px; height: 32px;
  border: none;
  background: rgba(11,30,79,0.08);
  color: var(--navy-ink, #061230);
  border-radius: 50%;
  font-size: 16px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.radar-popup-close:hover { background: rgba(11,30,79,0.15); }
.radar-popup-avatar-wrap {
  width: 96px; height: 96px;
  margin: 4px auto 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f3f4f6 0%, #e7e8ec 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.radar-popup-card.is-pro .radar-popup-avatar-wrap {
  border-color: #FFC642;
  box-shadow: 0 4px 14px rgba(255,154,61,0.45);
}
.radar-popup-avatar-wrap .mascot-img,
.radar-popup-avatar-wrap .mascot-img-player {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: 50%;
}
.radar-popup-nick {
  font-family: var(--font-display); font-weight: 800;
  font-size: 20px; color: var(--navy-ink, #061230);
  margin-top: 6px; line-height: 1.1;
}
.radar-popup-country {
  font-size: 12px; color: var(--ink-soft, #667085);
  margin-top: 4px;
}
.radar-popup-distance {
  display: inline-block;
  margin: 10px auto 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #e8f5e9;
  color: #1b5e20;
  font-size: 12px; font-weight: 700;
}
.radar-popup-stats {
  display: flex; justify-content: center; gap: 24px;
  margin: 6px 0 16px;
}
.radar-popup-stat {
  display: flex; flex-direction: column; align-items: center;
}
.radar-popup-stat .rps-num {
  font-family: var(--font-display); font-weight: 900;
  font-size: 22px; line-height: 1;
}
.radar-popup-stat.give .rps-num { color: var(--green, #4caf50); }
.radar-popup-stat.want .rps-num { color: var(--coral, #ef4444); }
.radar-popup-stat .rps-lbl {
  font-size: 11px; color: var(--ink-soft, #667085);
  margin-top: 3px;
}
.radar-popup-chat-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: none;
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px;
  background: var(--violet, #7c3aed);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(124,58,237,0.35);
  transition: transform 0.08s, filter 0.12s;
}
.radar-popup-chat-btn:hover { filter: brightness(1.08); }
.radar-popup-chat-btn:active { transform: scale(0.97); }
.radar-popup-card.is-pro .radar-popup-chat-btn {
  background: linear-gradient(135deg, #FFE070 0%, #FFC642 50%, #FF9A3D 100%);
  color: #3d2400;
  border: 2px solid #B88300;
  box-shadow: 0 3px 10px rgba(255,154,61,0.45);
}

/* ─── Lista de chats (tab "Chats" para adultos) ───────── */
.screen-chats-list {
  background: var(--cream, #faf6e8);
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
}
.chats-list {
  flex: 1; overflow-y: auto;
  padding: 8px 0 16px;
  -webkit-overflow-scrolling: touch;
}
.chats-empty {
  text-align: center;
  padding: 60px 24px 30px;
  color: var(--ink-soft, #667085);
}
.chats-empty-icon {
  font-size: 56px; line-height: 1;
  margin-bottom: 14px;
  opacity: 0.7;
}
.chats-empty h3 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 18px; color: var(--navy-ink, #061230);
  margin: 0 0 6px;
}
.chats-empty p {
  font-size: 13px; line-height: 1.5;
  margin: 0 0 18px;
}
.chats-list-item {
  display: flex; align-items: center;
  background: #fff;
  border-bottom: 1px solid var(--line, #eee);
}
.chats-list-item.unread { background: #fffbf0; }
.chats-list-item-main {
  display: flex; align-items: center; gap: 12px;
  flex: 1; min-width: 0;
  padding: 12px 8px 12px 16px;
  background: none; border: none;
  cursor: pointer; text-align: left; font: inherit;
  transition: background 0.12s;
}
.chats-list-item-main:hover { background: #f9f8f4; }
.chats-list-item-main:active { background: #f1eee0; }
.chats-list-item.unread .chats-list-item-main:hover { background: #fff5dc; }
.chats-delete-btn {
  flex-shrink: 0;
  padding: 12px 14px;
  background: none; border: none;
  color: #ccc; cursor: pointer;
  transition: color 0.12s;
  display: flex; align-items: center;
}
.chats-delete-btn:hover { color: #e53935; }
.chats-delete-btn:active { color: #b71c1c; }
.chats-avatar-wrap {
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.chats-avatar-wrap .mascot-img,
.chats-avatar-wrap .mascot-img-player {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: 50%;
}
.chats-meta { flex: 1; min-width: 0; }
.chats-nick {
  font-family: var(--font-display); font-weight: 800;
  font-size: 14px; color: var(--navy-ink, #061230);
  line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chats-preview {
  font-size: 12px; color: var(--ink-soft, #667085);
  margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chats-list-item.unread .chats-preview {
  color: var(--navy-ink, #061230);
  font-weight: 600;
}
.chats-tail {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.chats-time {
  font-size: 10px; color: var(--ink-soft, #667085);
  white-space: nowrap;
}
.chats-unread-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--coral, #ef4444);
  box-shadow: 0 0 0 2px #fff;
}

/* ─── Pantalla chat-thread (estilo WhatsApp) ──────────── */
.chat-thread {
  display: flex; flex-direction: column;
  /* dvh se ajusta automáticamente al teclado virtual en navegadores modernos
     (Chrome 108+, Safari 15.4+, Firefox 101+). Fallbacks abajo. */
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  max-height: 100dvh;
  background: #efe9d9;
  overflow: hidden;
}
.chat-thread-hdr {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #075e54, #128c7e);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.chat-thread-hdr .chat-back {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  border: none;
  color: #fff;
  font-size: 18px; font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-thread-hdr .chat-back:hover { background: rgba(255,255,255,0.30); }
.chat-thread-hdr .chat-avatar-wrap {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid #fff;
  overflow: hidden;
  background: rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-thread-hdr .chat-avatar-wrap .mascot-img,
.chat-thread-hdr .chat-avatar-wrap .mascot-img-player {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 50%;
}
.chat-hdr-meta { flex: 1; min-width: 0; }
.chat-hdr-meta .chat-nick {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; line-height: 1.15;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-hdr-meta .chat-status {
  font-size: 11px;
  color: #fff;
  opacity: 0.85;
  margin-top: 1px;
}

/* Wallpaper sutil con tile de figuritas */
.chat-msgs {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 8px;
  background-color: #efe9d9;
  background-image: url('mascotas/album_fix.png');
  background-size: 140px;
  background-repeat: repeat;
  background-blend-mode: overlay;
  position: relative;
}
.chat-msgs::before {
  /* Suavizar el wallpaper para que no compita con los mensajes */
  content: '';
  position: absolute; inset: 0;
  background: rgba(239,233,217,0.85);
  pointer-events: none;
  z-index: 0;
}
.chat-msgs > * { position: relative; z-index: 1; }

.chat-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--ink-soft, #667085);
}
.chat-empty-icon {
  font-size: 48px; margin-bottom: 8px; opacity: 0.7;
}
.chat-empty p { font-size: 13px; margin: 0; }

.chat-day-separator {
  display: flex; justify-content: center;
  margin: 10px 0 8px;
}
.chat-day-separator span {
  background: rgba(255,255,255,0.92);
  color: #555;
  font-size: 11px; font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  text-transform: capitalize;
}

.chat-bubble {
  max-width: 75%;
  padding: 7px 10px 5px;
  margin-bottom: 4px;
  position: relative;
  box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
  word-break: break-word;
}
.chat-bubble.mine {
  margin-left: auto;
  background: #dcf8c6;
  border-radius: 12px 12px 4px 12px;
}
.chat-bubble.theirs {
  margin-right: auto;
  background: #fff;
  border-radius: 12px 12px 12px 4px;
}
/* Tail (cola) tipo WhatsApp con pseudo-elemento */
.chat-bubble.mine::after {
  content: '';
  position: absolute;
  bottom: 0; right: -7px;
  width: 0; height: 0;
  border: 7px solid transparent;
  border-bottom-color: #dcf8c6;
  border-right: 0;
  transform: translateY(0);
}
.chat-bubble.theirs::after {
  content: '';
  position: absolute;
  bottom: 0; left: -7px;
  width: 0; height: 0;
  border: 7px solid transparent;
  border-bottom-color: #fff;
  border-left: 0;
}
.chat-bubble.grouped {
  margin-top: 1px;
  border-radius: 12px;
}
.chat-bubble.grouped::after { display: none; }
.chat-bubble.pending { opacity: 0.6; }
.chat-body {
  font-size: 14.5px;
  color: #111b2a;
  white-space: pre-wrap;
  line-height: 1.32;
}
.chat-ts {
  font-size: 10px;
  color: #667085;
  text-align: right;
  margin-top: 2px;
  line-height: 1;
}

.chat-footer {
  position: sticky; bottom: 0;
  background: #f0f0f0;
}
.chat-inputbar {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px;
  background: #f6f1e3;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.chat-input {
  flex: 1;
  min-height: 42px;
  max-height: 100px;
  border-radius: 22px;
  border: 1px solid #d8d4c5;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  background: #fff;
  line-height: 1.3;
  color: #111b2a;
}
.chat-input:focus {
  border-color: #128c7e;
  box-shadow: 0 0 0 3px rgba(18,140,126,0.18);
}
.chat-send {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #128c7e;
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(255,154,61,0.45);
  flex-shrink: 0;
  transition: transform 0.08s, filter 0.12s;
}
.chat-send:hover { filter: brightness(1.08); }
.chat-send:active { transform: scale(0.94); }

/* ─── Quick replies ─────────────────────────────────────── */
.chat-quick-replies {
  display: flex; gap: 7px;
  padding: 6px 8px 4px;
  overflow-x: auto;
  border-top: 1px solid rgba(0,0,0,0.07);
  scrollbar-width: none;
}
.chat-quick-replies::-webkit-scrollbar { display: none; }
.chat-quick-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1.5px solid #128c7e;
  background: #fff;
  color: #075e54;
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}
.chat-quick-chip:active { background: #dcf8c6; }
.chat-quick-chip.smart {
  border-color: #ff9a3d;
  color: #a04000;
}
.chat-quick-chip.smart:active { background: #fff3d0; }

/* ─── Modo selección en lista de chats (papelera + ticks) ─── */
.chats-trash-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  color: var(--navy-ink, #061230);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, transform 0.08s;
}
.chats-trash-btn:hover { background: rgba(11,30,79,0.32) !important; }
.chats-trash-btn:active { transform: scale(0.94); }

/* Items de chat en modo selección */
.chats-list-item.selectable {
  cursor: pointer;
}
.chats-list-item.selectable.selected {
  background: rgba(255,213,79,0.30);
}

.chat-tick {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid #b88300;
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  margin-bottom: 2px;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}
.chat-tick.on {
  background: var(--amber-deep, #FF9A3D);
  border-color: var(--amber-deep, #FF9A3D);
  box-shadow: 0 2px 6px rgba(255,154,61,0.45);
  transform: scale(1.05);
}

/* Barra inferior con botón Eliminar */
.chat-select-bar {
  position: absolute;
  left: 0; right: 0; bottom: 160px;
  z-index: 49;
  display: flex; padding: 10px 12px;
  background: #f6f1e3;
  border-top: 1px solid rgba(0,0,0,0.08);
  gap: 8px;
}
@media (max-width: 480px) {
  .chat-select-bar { position: fixed; bottom: 80px; }
}
.btn-delete-msgs {
  flex: 1;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  background: #e53935;
  color: #fff;
  font-family: var(--font-display); font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(229,57,53,0.40);
  transition: filter 0.12s, transform 0.08s;
}
.btn-delete-msgs:hover { filter: brightness(1.06); }
.btn-delete-msgs:active { transform: scale(0.98); }
.btn-delete-msgs:disabled {
  background: #d6d6d6;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}