/* Colores y fuentes de KALLPA: mismos valores que docs/club-2.0/diseno/tokens.css */
:root {
  /* Fondos */
  --bg: #070807;          /* --kp-bg: fondo general */
  --bg-2: #0d0e0c;        /* barras de navegación, mapa */
  --surface: #11130f;     /* --kp-surface: tarjetas */
  --surface-2: #1a1c16;   /* tarjeta destacada (Scoop, reto del club) */
  --track: #2a2c24;       /* fondo de barras de progreso */

  /* Texto */
  --ink: #f7f3eb;         /* --kp-text */
  --muted: #b8b0a2;       /* --kp-muted */

  /* Dorados */
  --accent: #e2ca96;      /* --kp-gold-2: UN botón principal por pantalla, dato clave */
  --accent-2: #c6a56a;    /* --kp-gold: bordes activos, etiquetas, detalles */
  --on-accent: #171400;   /* texto sobre dorado sólido */
  --line: rgba(198, 165, 106, 0.2);
  --line-strong: rgba(226, 202, 150, 0.4);

  /* Estados (solo cuando significan algo) */
  --mint: #4fbf7f;        /* verificado, conectado, bien */
  --danger: #ff5c72;      /* error, vencido */

  /* Tipografía */
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif; /* títulos y cifras; marca con font-stretch:125% y peso 900 */
  --f-text: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --tap: 44px;            /* tamaño mínimo de botones y casillas */

  /* Nombres que el club ya usaba y que no están en el manual: se llevan a la paleta KALLPA para no romper pantallas */
  --coral: #c6a56a;
  --sky: #e2ca96;
  --violet: #b8b0a2;
  --line-soft: rgba(198, 165, 106, 0.1);
  --shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 12px 28px -18px rgba(0, 0, 0, 0.65);
  --sheen: inset 0 1px 0 rgba(247, 243, 235, 0.04);
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(1100px 600px at 50% -10%, rgba(226, 202, 150, 0.16), transparent 60%), var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800; letter-spacing: 0; }
p { margin: 0; }

#app { min-height: 100vh; }

/* Pantalla de carga */
.boot-loading { min-height: 100vh; display: grid; place-items: center; gap: 18px; padding: 24px; }
.boot-mark { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.boot-logo { width: 56px; height: 56px; border-radius: 50%; margin-bottom: 12px; }
.boot-mark strong { font-size: 26px; letter-spacing: 0.14em; color: var(--accent); }
.boot-mark span { color: var(--muted); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; }
.spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.btn-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 2.5px solid rgba(0, 0, 0, 0.25);
  border-top-color: currentColor;
  animation: spin 0.7s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 2.4s; } }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 13px 22px;
  font-weight: 700;
  font-size: 15px;
  min-height: 48px;
  box-shadow: var(--sheen), 0 6px 16px -12px rgba(0, 0, 0, 0.8);
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--on-accent); box-shadow: 0 10px 22px -12px rgba(226, 202, 150, 0.55); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 12px 26px -10px rgba(226, 202, 150, 0.65); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--muted); min-height: 40px; padding: 8px 12px; box-shadow: none; }
.btn-quiet:hover { color: var(--ink); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.btn-danger { background: linear-gradient(135deg, var(--danger), var(--coral)); border-color: transparent; color: #2a0a10; box-shadow: 0 10px 22px -12px rgba(255, 92, 114, 0.5); }
.btn-danger:hover { filter: brightness(1.06); border-color: transparent; }

/* Campos */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--muted); font-weight: 600; }
.field input {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 16px;
  min-height: 48px;
}
.field input:focus { border-color: var(--accent); }
/* Contraseña con el botón del ojo adentro del campo, a la derecha (44 px para tocarlo bien en el celular) */
.clave-campo { position: relative; display: flex; }
.clave-campo input { flex: 1; min-width: 0; padding-right: 52px; }
.ver-clave { position: absolute; top: 50%; right: 2px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.ver-clave:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ver-clave[aria-pressed="true"] { color: var(--accent); }
@media (hover: hover) { .ver-clave:hover { color: var(--ink); } }
/* El ojo propio del navegador (Edge) sobra: ya está el nuestro */
.clave-campo input::-ms-reveal { display: none; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.error { color: var(--danger); font-size: 13.5px; min-height: 18px; }

/* Pantalla de acceso */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 26px;
  box-shadow: var(--shadow);
}
.auth-hero { text-align: center; margin-bottom: 24px; }
.auth-hero .mark { font-size: 15px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.auth-hero h1 { font-size: 30px; margin: 8px 0 6px; }
.auth-hero p { color: var(--muted); font-size: 14.5px; }
.auth-tabs { display: flex; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 4px; margin-bottom: 22px; }
.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 0;
  font-weight: 700;
  font-size: 14px;
  min-height: 40px;
}
.auth-tabs button.active { background: var(--accent); color: var(--on-accent); }
.auth-switch { text-align: center; margin-top: 18px; font-size: 13.5px; color: var(--muted); }
.auth-switch button { background: none; border: none; color: var(--accent); font-weight: 700; padding: 0; min-height: 0; }
.btn-link { background: none; border: none; color: var(--muted); font-size: 13px; padding: 0; min-height: 0; text-align: left; text-decoration: underline; margin: -6px 0 4px; }
.btn-link:hover { color: var(--accent); }
#turnstile-box { margin: 4px 0 16px; }

/* Cascarón de la app autenticada: barra lateral (fija en escritorio, deslizable encima en celular) */
.shell { min-height: 100vh; display: flex; }
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 250px;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 4px;
  z-index: 20;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.sidebar.open { transform: translateX(0); }
.sidebar-brand { font-weight: 800; letter-spacing: 0.06em; color: var(--accent); font-size: 15px; padding: 8px 12px 18px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 4px; flex: 1; }
/* Fijo abajo: con el menú largo (admin) "Salir" no debe quedar escondido al final del scroll */
.sidebar-logout { position: sticky; bottom: -18px; margin-top: 12px; padding-bottom: 18px; background: linear-gradient(to bottom, transparent, var(--bg-2) 30%); }
.sidebar-install { justify-content: flex-start; margin-top: 12px; }
.sidebar-install[hidden] { display: none; }
.sidebar-install + .sidebar-logout { margin-top: 0; }
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 19;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

.main-area { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar-mobile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar-mobile .mark { font-weight: 800; letter-spacing: 0.06em; color: var(--accent); font-size: 15px; }

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-link svg { flex-shrink: 0; opacity: 0.85; transition: transform 0.15s ease, opacity 0.15s ease; }
.nav-link .nav-label { flex: 1; min-width: 0; }
.nav-link:hover { color: var(--ink); background: rgba(247, 243, 235, 0.04); }
.nav-link:hover svg { transform: translateX(2px); }
.nav-link:active svg { transform: scale(0.9); }
.nav-link.active {
  background: linear-gradient(90deg, rgba(226, 202, 150, 0.14), rgba(226, 202, 150, 0.02));
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}
.nav-link.active svg { opacity: 1; filter: drop-shadow(0 0 6px rgba(226, 202, 150, 0.4)); }

/* Secciones del menú */
.sidebar-nav { gap: 14px; }
.nav-section { display: flex; flex-direction: column; gap: 2px; }
.nav-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 12px;
  background: none;
  border: none;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
}
.nav-section-head > span:first-child { flex: 1; }
.nav-section-head:hover:not(:disabled) { color: var(--ink); }
.nav-section-head:disabled { cursor: default; }
.nav-chevron { display: grid; transition: transform 0.2s ease; transform: rotate(-90deg); }
.nav-section-head.open .nav-chevron { transform: rotate(0deg); }
.nav-section-body { display: flex; flex-direction: column; gap: 2px; }
.nav-section-body[hidden] { display: none; }
.nav-group-label { padding: 10px 12px 3px; color: var(--muted); opacity: 0.6; font-size: 11px; font-weight: 700; }
.nav-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--coral);
  color: var(--on-accent);
  font-size: 11.5px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
@media (prefers-reduced-motion: reduce) { .nav-chevron, .nav-link { transition: none; } }

.content { flex: 1; padding: 8px 18px 90px; max-width: 720px; margin: 0 auto; width: 100%; }

/* El menú lateral fijo empieza en 1024 px; por debajo, la app se ve como en celular */
@media (min-width: 1024px) {
  .sidebar { position: sticky; transform: none; }
  .sidebar-backdrop { display: none; }
  .topbar-mobile { display: none; }
  .main-area { padding-top: 0; }
}
/* Al abrir el club (sin pantalla anterior): aparece rápido, sin desplazarse */
.content.route-enter { animation: route-in 0.18s ease-out both; }
@keyframes route-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .content.route-enter { animation: none !important; } }
.inline-loading { display: flex; justify-content: center; padding: 60px 0; }

.banner {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.banner.pending { border-color: rgba(226, 202, 150, 0.4); background: rgba(226, 202, 150, 0.08); }
.banner.approved { border-color: rgba(79, 191, 127, 0.4); background: rgba(79, 191, 127, 0.08); }

.card {
  position: relative;
  background: linear-gradient(165deg, var(--surface-2) 0%, var(--surface) 45%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm), var(--sheen);
}
.card h2 { font-size: 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 9px; letter-spacing: -0.01em; }
.card h2 svg { color: var(--accent); flex-shrink: 0; filter: drop-shadow(0 0 10px rgba(226, 202, 150, 0.35)); }
.hint { color: var(--muted); font-size: 14px; }

/* Todas las filas de listas (tareas, ranking, misiones, recompensas, catálogo admin…) comparten este
   tratamiento — antes eran el mismo rectángulo gris plano en todos lados, sin ninguna profundidad. */
.task-card,
.rank-row,
.reward-card,
.mission-row,
.cat-row,
.cp-row,
.flag-row,
.verify-row,
.award-row,
.profile-stat,
.badge {
  background: linear-gradient(160deg, var(--surface-2) 0%, rgba(247, 243, 235, 0.015) 100%), var(--surface-2);
  box-shadow: var(--sheen), 0 8px 18px -14px rgba(0, 0, 0, 0.85);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

/* Puntos */
.points-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(226, 202, 150, 0.2), rgba(79, 191, 127, 0.08) 60%, var(--surface) 100%);
  border: 1px solid rgba(226, 202, 150, 0.32);
  border-radius: var(--radius);
  padding: 22px 22px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow), var(--sheen);
  animation: rise 0.4s ease both;
}
.points-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(226, 202, 150, 0.35), rgba(226, 202, 150, 0.14));
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(226, 202, 150, 0.25), 0 6px 16px -8px rgba(226, 202, 150, 0.5);
}
.points-hero.bump .points-icon { animation: flicker 0.6s ease; }
.points-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.points-label { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.points-value {
  font-size: 40px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.points-hero.bump .points-value { animation: pop 0.5s ease; }
.points-secondary { color: var(--muted); font-size: 13px; }
.points-level { color: var(--sky); font-size: 12.5px; font-weight: 700; margin-top: 2px; }

/* Dashboard */
.dash-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(226, 202, 150, 0.18), rgba(198, 165, 106, 0.06) 55%, var(--surface) 100%);
  border: 1px solid rgba(226, 202, 150, 0.3);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow), var(--sheen);
  animation: rise 0.4s ease both;
}
.dash-greeting { font-size: 20px; font-weight: 800; margin-bottom: 14px; letter-spacing: -0.01em; }
.dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(247, 243, 235, 0.04), transparent 60%), rgba(0, 0, 0, 0.28);
  border: 1px solid var(--line);
  box-shadow: var(--sheen);
  min-width: 0;
}
/* Cada indicador con el color que ya usa en el resto de la app (racha=coral, nivel=cielo, semana=menta), en
   vez de las 4 casillas grises idénticas de antes. */
.stat-chip.coins { border-color: rgba(226, 202, 150, 0.35); }
.stat-chip.streak { border-color: rgba(198, 165, 106, 0.3); }
.stat-chip.level { border-color: rgba(198, 165, 106, 0.3); }
.stat-chip.week { border-color: rgba(79, 191, 127, 0.3); }
.stat-emoji { font-size: 18px; line-height: 1; }
.stat-value { font-size: 24px; line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat-chip.coins .stat-value { color: var(--accent); }
.stat-chip.streak .stat-value { color: var(--coral); }
.stat-chip.level .stat-value { color: var(--sky); }
.stat-chip.week .stat-value { color: var(--mint); }
.dash-hero.bump .stat-chip.coins .stat-value { animation: pop 0.5s ease; }
.stat-label { color: var(--muted); font-size: 11.5px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.stat-chip .streak-shield { position: absolute; top: 6px; right: 6px; margin: 0; }
.dash-progress { margin-top: 16px; }
.dash-progress-track { height: 10px; border-radius: 999px; background: rgba(247, 243, 235, 0.08); overflow: hidden; box-shadow: var(--sheen); }
.dash-progress-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--mint));
  box-shadow: 0 0 12px rgba(226, 202, 150, 0.5);
  transition: width 0.6s ease;
  overflow: hidden;
}
.dash-progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(247, 243, 235, 0.45) 50%, transparent 80%);
  background-size: 200% 100%;
  animation: shimmer 2.6s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.dash-progress-label { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }
@media (max-width: 520px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Perfil */
.profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--accent);
  background: radial-gradient(circle at 30% 25%, rgba(226, 202, 150, 0.35), rgba(226, 202, 150, 0.12));
  border: 1px solid rgba(226, 202, 150, 0.4);
  box-shadow: 0 0 0 1px rgba(226, 202, 150, 0.15), 0 8px 20px -10px rgba(226, 202, 150, 0.5);
  flex-shrink: 0;
}
.profile-name { font-size: 20px; font-weight: 800; }
.profile-sub { color: var(--sky); font-size: 13px; font-weight: 700; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.profile-stat {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-stat strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.profile-stat span { color: var(--muted); font-size: 12.5px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  opacity: 0.4;
  filter: grayscale(1);
}
.badge.earned {
  opacity: 1;
  filter: none;
  border-color: rgba(226, 202, 150, 0.4);
  background: linear-gradient(160deg, rgba(226, 202, 150, 0.12), rgba(247, 243, 235, 0.015) 100%), var(--surface-2);
  box-shadow: var(--sheen), 0 10px 22px -14px rgba(226, 202, 150, 0.35);
  transition: transform 0.2s var(--ease-bounce, cubic-bezier(0.2, 0.9, 0.3, 1.3)), box-shadow 0.2s ease;
}
.badge.earned:hover { transform: translateY(-3px) scale(1.04); box-shadow: var(--sheen), 0 16px 28px -14px rgba(226, 202, 150, 0.45); }
.badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 25%, rgba(226, 202, 150, 0.3), rgba(226, 202, 150, 0.1));
  color: var(--accent);
}

/* Misiones */
.mission-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mission-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  animation: rise 0.3s ease both;
}
.mission-row.done { opacity: 0.6; border-color: rgba(79, 191, 127, 0.3); }
.mission-check { color: var(--muted); flex-shrink: 0; }
.mission-row.done .mission-check { color: var(--mint); }
.mission-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mission-title { font-weight: 700; font-size: 14px; }
.mission-row.done .mission-title { text-decoration: line-through; }
.mission-progress { color: var(--muted); font-size: 12px; }
.mission-reward { color: var(--accent); font-weight: 800; font-size: 13px; flex-shrink: 0; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.16); color: var(--mint); } 100% { transform: scale(1); } }
@keyframes flicker { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.15) rotate(-4deg); } 70% { transform: scale(1.05) rotate(3deg); } }

/* Racha */
.streak-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  width: fit-content;
  animation: rise 0.4s ease both;
}
.streak-strip.active { border-color: rgba(198, 165, 106, 0.4); background: linear-gradient(135deg, rgba(198, 165, 106, 0.14), rgba(198, 165, 106, 0.03)); box-shadow: var(--sheen), 0 8px 20px -14px rgba(198, 165, 106, 0.4); }
.streak-flame { color: var(--muted); display: grid; place-items: center; }
.streak-strip.active .streak-flame { color: var(--coral); animation: breathe 2.4s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(198, 165, 106, 0.5)); }
.streak-count { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.streak-label { color: var(--muted); font-size: 13px; }
.streak-shield { display: grid; place-items: center; margin-left: 4px; color: var(--line); cursor: help; }
.streak-shield.available { color: var(--sky); }
.streak-shield.used { color: var(--muted); opacity: 0.5; }

@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

.confetti-bit { position: fixed; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; z-index: 999; animation: confetti-burst 0.7s ease-out forwards; }
@keyframes confetti-burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(0.4); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .points-hero, .task-card, .streak-strip, .confetti-bit { animation: none !important; }
  .points-hero.bump .points-icon, .points-hero.bump .points-value, .streak-strip.active .streak-flame { animation: none !important; }
  .dash-progress-fill::after { animation: none !important; }
  .task-card, .task-card:hover, .reward-card, .reward-card:hover, .badge, .badge.earned:hover, .cal-cell, .cal-cell:hover, .nav-link svg {
    transition: none !important;
    transform: none !important;
  }
}

/* Tareas */
.task-form-row { display: flex; flex-wrap: wrap; gap: 10px; }
.task-form-row input[type='text'] {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 16px;
  min-height: 48px;
}
.task-form-row select {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 14px;
  font-size: 15px;
  min-height: 48px;
}
.task-form-row input:focus, .task-form-row select:focus { border-color: var(--accent); }

.task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.task-card-wrap { position: relative; border-radius: 14px; overflow: hidden; }
.swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 14px;
  padding: 0 20px;
  font-weight: 700;
  font-size: 13.5px;
}
.swipe-bg .swipe-hint { display: inline-flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.15s ease; }
.task-card-wrap.swipe-left .swipe-bg { background: rgba(255, 92, 114, 0.16); }
.task-card-wrap.swipe-right .swipe-bg { background: rgba(79, 191, 127, 0.16); }
.task-card-wrap.swipe-left .swipe-hint.left { opacity: 1; color: var(--danger); }
.task-card-wrap.swipe-right .swipe-hint.right { opacity: 1; color: var(--mint); }
.task-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  animation: rise 0.35s ease both;
  transition: opacity 0.3s ease, border-color 0.3s ease;
  touch-action: pan-y;
  user-select: none;
}
.task-card:hover { border-color: rgba(226, 202, 150, 0.3); box-shadow: var(--sheen), 0 14px 26px -14px rgba(0, 0, 0, 0.9); transform: translateY(-2px); }
.task-card.done { opacity: 0.55; border-color: rgba(79, 191, 127, 0.25); }
.task-card.done:hover { transform: none; }
.cat-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cat-badge { box-shadow: 0 0 0 1px rgba(247, 243, 235, 0.04); }
.cat-badge.gold, .ex-icon.gold { background: radial-gradient(circle at 30% 25%, rgba(226, 202, 150, 0.32), rgba(226, 202, 150, 0.1)); color: var(--accent); }
.cat-badge.mint, .ex-icon.mint { background: radial-gradient(circle at 30% 25%, rgba(79, 191, 127, 0.32), rgba(79, 191, 127, 0.1)); color: var(--mint); }
.cat-badge.coral, .ex-icon.coral { background: radial-gradient(circle at 30% 25%, rgba(198, 165, 106, 0.32), rgba(198, 165, 106, 0.1)); color: var(--coral); }
.cat-badge.sky, .ex-icon.sky { background: radial-gradient(circle at 30% 25%, rgba(198, 165, 106, 0.32), rgba(198, 165, 106, 0.1)); color: var(--sky); }
.cat-badge.violet, .ex-icon.violet { background: radial-gradient(circle at 30% 25%, rgba(184, 176, 162, 0.32), rgba(184, 176, 162, 0.1)); color: var(--violet); }
.task-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.task-title { font-weight: 700; word-break: break-word; }
.task-card.done .task-title { text-decoration: line-through; }
.task-cat { font-size: 12.5px; color: var(--muted); }
.task-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon-only { padding: 8px; width: 38px; justify-content: center; }
.task-done-mark { color: var(--mint); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.btn-small { min-height: 38px; padding: 8px 16px; font-size: 13.5px; }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 10px; color: var(--muted); text-align: center; }
.empty-state svg { color: var(--accent); opacity: 0.7; }

/* Ranking */
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  animation: rise 0.35s ease both;
}
.rank-row.mine { border-color: var(--accent); background: linear-gradient(135deg, rgba(226, 202, 150, 0.14), rgba(226, 202, 150, 0.03)); box-shadow: var(--sheen), 0 8px 20px -14px rgba(226, 202, 150, 0.4); }
.rank-row:hover { border-color: rgba(226, 202, 150, 0.25); }
.rank-pos.p1 { color: var(--accent); }
.rank-pos.p2 { color: var(--ink); }
.rank-pos.p3 { color: var(--accent-2); }
.season-note { margin-bottom: 4px; }
.rank-pos { color: var(--muted); font-weight: 800; width: 40px; font-variant-numeric: tabular-nums; }
.rank-name { flex: 1; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-points { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }

.rank-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.rank-filters select { min-height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); padding: 0 12px; font-size: 14px; }

/* Tienda de recompensas */
.wallet { font-size: 16px; margin-bottom: 4px; }
.wallet strong { color: var(--accent); font-size: 24px; font-variant-numeric: tabular-nums; }
.reward-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.reward-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  animation: rise 0.3s ease both;
}
.reward-card:not(.sold-out):hover { border-color: rgba(226, 202, 150, 0.3); box-shadow: var(--sheen), 0 14px 26px -14px rgba(226, 202, 150, 0.3); transform: translateY(-2px); }
.reward-card.sold-out { opacity: 0.5; }
.reward-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 25%, rgba(226, 202, 150, 0.3), rgba(226, 202, 150, 0.1));
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(226, 202, 150, 0.15);
}
.reward-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reward-stock { color: var(--coral); font-size: 12.5px; font-weight: 700; }
.reward-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.reward-cost { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.reward-card .btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Feed del club */
.feed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  animation: rise 0.3s ease both;
}
.feed-row:hover { background: var(--surface-2); }
.feed-icon { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; }
.feed-icon.joined { background: radial-gradient(circle at 30% 25%, rgba(79, 191, 127, 0.32), rgba(79, 191, 127, 0.1)); color: var(--mint); }
.feed-icon.streak { background: radial-gradient(circle at 30% 25%, rgba(198, 165, 106, 0.32), rgba(198, 165, 106, 0.1)); color: var(--coral); }
.feed-icon.award { background: radial-gradient(circle at 30% 25%, rgba(226, 202, 150, 0.32), rgba(226, 202, 150, 0.1)); color: var(--accent); }
.feed-text { flex: 1; font-size: 14px; min-width: 0; }
.feed-date { color: var(--muted); font-size: 12px; flex-shrink: 0; }

/* Verificación (admin) */
.verify-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.verify-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.verify-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.match-found { color: var(--mint); font-size: 13px; font-weight: 600; }
.match-missing { color: var(--danger); font-size: 13px; font-weight: 600; }

.section-title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 20px 0 10px; }
.stack-form { display: flex; flex-direction: column; gap: 10px; max-width: 420px; }
.stack-form input, .stack-form select, .stack-form textarea {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  min-height: 46px;
}
.stack-form textarea { resize: vertical; font-family: inherit; }
.stack-form input:focus, .stack-form select:focus, .stack-form textarea:focus { border-color: var(--accent); }
.stack-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); font-weight: 600; }

/* Categorías (admin) */
.cat-list, .cp-list, .award-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.cat-row.inactive, .cp-row.inactive { opacity: 0.5; }
.cat-row:hover, .cp-row:hover, .flag-row:hover, .verify-row:hover, .award-row:hover { border-color: rgba(226, 202, 150, 0.22); }
.cat-name { flex: 1; font-weight: 700; min-width: 120px; }
.cat-row input[type='number'] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 15px;
}

/* Premios (admin) */
.cp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.cp-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.award-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* Alertas (admin) */
.flag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* Mi rutina — semana a simple vista, siempre visible aunque hoy sea descanso */
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 14px 0; }
.week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2) 0%, rgba(247, 243, 235, 0.015) 100%), var(--surface-2);
  box-shadow: var(--sheen);
  font-size: 11px;
  text-align: center;
  color: var(--muted);
}
.week-day.today { border-color: var(--accent); box-shadow: var(--sheen), 0 0 0 1px rgba(226, 202, 150, 0.25); }
.week-day.rest { opacity: 0.55; }
.week-day strong { font-size: 12.5px; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
.week-day span { line-height: 1.3; overflow-wrap: break-word; }

/* Mi rutina — ejercicios desplegables: cerrados solo lo esencial, abiertos la técnica + series a marcar */
.ex-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-row {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2) 0%, rgba(247, 243, 235, 0.015) 100%), var(--surface-2);
  box-shadow: var(--sheen), 0 8px 18px -14px rgba(0, 0, 0, 0.85);
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.ex-row.done { border-color: rgba(79, 191, 127, 0.3); }
.ex-row-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-align: left;
  min-height: 0;
  box-shadow: none;
}
.ex-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(247, 243, 235, 0.04); }
.ex-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-title { font-weight: 700; font-size: 14.5px; }
.ex-meta { color: var(--muted); font-size: 12px; }
.ex-chevron { flex-shrink: 0; color: var(--muted); transition: transform 0.2s ease; }
.ex-chevron.open { transform: rotate(180deg); color: var(--accent); }
.ex-body { padding: 0 16px 16px 58px; display: flex; flex-direction: column; gap: 12px; animation: rise 0.2s ease both; }
.ex-howto { color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.set-dots { display: flex; flex-wrap: wrap; gap: 8px; }
.set-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
  min-height: 0;
  padding: 0;
  box-shadow: var(--sheen);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.set-dot:hover { border-color: var(--accent); }
.set-dot.done { background: linear-gradient(135deg, var(--accent), var(--accent-2)); border-color: transparent; color: var(--on-accent); transform: scale(1.05); }
@media (max-width: 520px) {
  .ex-body { padding-left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ex-body { animation: none !important; }
  .ex-chevron { transition: none !important; }
  .set-dot { transition: none !important; transform: none !important; }
}
@media (max-width: 520px) {
  .week-day { padding: 8px 2px; font-size: 9.5px; }
  .week-day strong { font-size: 10.5px; }
}

/* Calendario */
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-header h2 { margin: 0; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.cal-dow span { text-align: center; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--surface-2) 0%, rgba(247, 243, 235, 0.015) 100%), var(--surface-2);
  box-shadow: var(--sheen);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 13px;
  padding: 2px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.cal-cell.empty { border-color: transparent; background: transparent; box-shadow: none; }
.cal-cell.today { border-color: var(--accent); font-weight: 800; box-shadow: var(--sheen), 0 0 0 1px rgba(226, 202, 150, 0.2); }
.cal-cell.selected { background: linear-gradient(135deg, rgba(226, 202, 150, 0.22), rgba(226, 202, 150, 0.08)); border-color: var(--accent); }
.cal-cell:not(.empty):hover { border-color: rgba(226, 202, 150, 0.35); transform: translateY(-1px); }
.cal-cell.drop-target { border-color: var(--mint); background: rgba(79, 191, 127, 0.22); transform: scale(1.06); transition: transform 0.1s ease; }

.task-card.dragging-source { opacity: 0.35; cursor: grabbing; }
.drag-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: var(--shadow);
  transform: rotate(-2deg) scale(1.03);
}
.cal-dots { display: flex; gap: 3px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.cal-dot.pending { background: var(--accent); }
.cal-dot.done { background: var(--mint); }

@media (min-width: 720px) {
  .content { padding-top: 36px; }
  .auth-card { padding: 40px 36px; }
  .points-value { font-size: 56px; }
  .cal-cell { font-size: 15px; }
}

/* Diálogos propios (reemplazan alert/confirm/prompt del navegador) */
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(7, 8, 7, 0.66);
  backdrop-filter: blur(4px);
  animation: dialog-fade 0.16s ease-out;
}
.dialog-overlay.closing { opacity: 0; transition: opacity 0.14s ease-in; }
.dialog {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 22px 18px;
  display: grid;
  gap: 8px;
  justify-items: start;
  animation: dialog-pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.dialog-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 4px; background: rgba(226, 202, 150, 0.14); color: var(--accent); }
.dialog-error .dialog-icon { background: rgba(255, 92, 114, 0.16); color: var(--danger); }
.dialog-success .dialog-icon { background: rgba(79, 191, 127, 0.16); color: var(--mint); }
.dialog-title { font-size: 18px; line-height: 1.3; }
.dialog-body { color: var(--muted); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.dialog-input {
  width: 100%;
  margin-top: 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 46px;
}
.dialog-input:focus { border-color: var(--accent); }
.dialog-actions { justify-self: stretch; display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@keyframes dialog-fade { from { opacity: 0; } }
@keyframes dialog-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@media (max-width: 480px) {
  .dialog-overlay { place-items: end center; }
  .dialog-actions .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .dialog-overlay, .dialog { animation: none; }
  .dialog-overlay.closing { transition: none; }
}

/* Anuncios del admin (mensaje/video de bienvenida) — mismo recuadro que los diálogos, pero más grande y
   con espacio para video. */
.announcement-dialog { width: min(560px, 100%); position: relative; padding-top: 40px; gap: 12px; }
.announcement-close-x { position: absolute; top: 10px; right: 10px; padding: 8px; min-height: 0; }
.announcement-video { width: 100%; aspect-ratio: 16 / 9; border: none; border-radius: 12px; background: #000; }
.announcement-message { white-space: pre-wrap; }
.announcement-dialog .btn-block { margin-top: 4px; }

/* Aviso de "estamos confirmando tu compra" (quien aun no tiene acceso al club) */
.auth-card .auth-sub { margin: 12px 0 20px; }
.auth-card a.btn { text-decoration: none; display: flex; align-items: center; justify-content: center; }

/* =====================================================================================================
   Kallpa Club 2.0 — marca KALLPA y diseño adaptable (referencia: docs/club-2.0/diseno).
   Celular: barra inferior de 5 pestañas. Desde 1024 px: menú lateral y contenido en columnas.
   ===================================================================================================== */

body { background: var(--bg); }
.stat-value, .points-value, .rank-points, .reward-cost, .wallet strong { font-family: var(--f-display); }

/* Marca */
/* El KN redondo al lado del nombre, como la cabecera de la tienda */
.brand { display: inline-flex; align-items: center; gap: 12px; line-height: 1; }
.brand-logo { width: 36px; height: 36px; border-radius: 50%; flex: none; display: block; }
.brand-texto { display: inline-flex; flex-direction: column; }
.brand strong { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: 20px; letter-spacing: 0.02em; color: var(--ink); }
.brand span { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.auth-hero .brand { margin-bottom: 14px; }
.auth-hero .brand strong { font-size: 26px; }
.auth-hero .brand-logo { width: 46px; height: 46px; }
.boot-mark strong { font-family: var(--f-display); font-weight: 900; font-stretch: 125%; letter-spacing: 0.02em; color: var(--ink); }

/* Botones: un solo dorado sólido por pantalla (.btn-primary); las acciones de fila van con borde */
.btn { border-radius: 14px; border-color: var(--line-strong); background: transparent; box-shadow: none; font-weight: 600; min-height: 46px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; box-shadow: none; }
.btn-small { min-height: var(--tap); border-radius: var(--radius-sm); }
.btn-small.btn-primary { background: transparent; border-color: var(--line-strong); color: var(--accent); }
/* El cambio al pasar el mouse solo donde hay mouse: en el celular, después de tocar, el navegador deja el botón
   "con el mouse encima" y se quedaba de otro color (21/10/2026, Esteban: "el botón se queda gris") */
@media (hover: hover) {
  .btn-primary:hover { filter: none; background: #efdcae; border-color: #efdcae; box-shadow: none; }
  .btn-small.btn-primary:hover { background: rgba(226, 202, 150, 0.12); border-color: var(--accent); }
}
.btn-quiet { border-color: transparent; }
.btn-icon-only { width: var(--tap); }
.btn-danger { background: transparent; border-color: rgba(255, 92, 114, 0.5); color: var(--danger); box-shadow: none; }
.btn-danger:hover { background: rgba(255, 92, 114, 0.12); border-color: var(--danger); filter: none; }

/* Acceso */
.auth-card { box-shadow: none; }
/* Ayuda para quien compró: un bloque propio, separado del formulario, con la pregunta y un botón claro */
.auth-registro { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); text-align: center; font-size: 13.5px; color: var(--muted); text-decoration: none; }
.auth-registro strong { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--accent); font-size: 14px; font-weight: 600; transition: border-color 0.15s ease, color 0.15s ease; }
.auth-registro:hover strong, .auth-registro:focus-visible strong { border-color: var(--accent); color: var(--ink); }
/* Campo con foco: un solo borde dorado con un halo suave (antes salían dos bordes: el del campo y el contorno) */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(225, 201, 145, 0.18); }

/* Tarjetas y filas: planas, con el borde dorado tenue del manual */
.card { background: var(--surface); box-shadow: none; }
.card h2 svg { filter: none; }
.task-card, .rank-row, .reward-card, .mission-row, .cat-row, .cp-row, .flag-row, .verify-row, .award-row, .profile-stat, .badge { background: var(--surface); box-shadow: none; }
.task-card:hover { box-shadow: none; transform: none; border-color: var(--line-strong); }
.banner { border-radius: var(--radius-sm); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.section-head h1 { font-size: clamp(26px, 3vw, 34px); font-stretch: 110%; }
.section-head h2 { font-size: 20px; }
.bar { display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent-2); transition: width 0.4s ease; }

/* Cascarón */
.sidebar { width: 240px; padding: 28px 16px 18px; gap: 20px; border-right-color: rgba(198, 165, 106, 0.15); }
.sidebar-brand { padding: 0 8px; }
.sidebar-nav { flex: 1; }
.nav-link { min-height: var(--tap); border-radius: var(--radius-sm); font-weight: 500; gap: 12px; }
.nav-link.active { background: rgba(226, 202, 150, 0.12); color: var(--accent); font-weight: 600; box-shadow: none; }
.nav-link.active svg { filter: none; }
.nav-link:hover svg { transform: none; }
.nav-section-head { min-height: 32px; }
.sidebar-store { font-size: 13px; color: var(--muted); text-decoration: none; padding: 0 8px; min-height: var(--tap); display: flex; align-items: center; }
.sidebar-store:hover { color: var(--ink); }
.sidebar-install { border-color: var(--line-strong); color: var(--accent); justify-content: center; margin-top: 0; }
.topbar-mobile { justify-content: space-between; padding: calc(12px + env(safe-area-inset-top)) 20px 12px; border-bottom-color: rgba(198, 165, 106, 0.15); }
.topbar-mobile .brand strong { font-size: 18px; }
.topbar-mobile .brand span { font-size: 9px; margin-top: 3px; }
.topbar-mobile .brand { gap: 10px; }
.topbar-mobile .brand-logo { width: 32px; height: 32px; }
.content { max-width: 760px; padding: 20px 20px calc(96px + env(safe-area-inset-bottom)); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg-2); border-top: 1px solid rgba(198, 165, 106, 0.18);
}
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; color: var(--muted); font-size: 11px; text-decoration: none; }
.tab.active { color: var(--accent); font-weight: 600; }

@media (min-width: 1024px) {
  .tabbar { display: none; }
  .content { padding: 32px clamp(20px, 3vw, 40px) 48px; }
  .content:has(> .home) { max-width: 1180px; }
}

/* Hoy */
.dash-hero { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; overflow: visible; }
.dash-date { font-size: 13px; color: var(--muted); }
.dash-greeting { font-size: clamp(28px, 3vw, 40px); font-stretch: 110%; line-height: 1.05; margin: 4px 0 0; }
.dash-greeting span { color: var(--accent); }
.coin-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid rgba(198, 165, 106, 0.25); border-radius: var(--radius-pill); padding: 9px 16px; }
.coin-icon { display: grid; color: var(--accent); }
.coin-pill .points-value { font-size: 16px; line-height: 1; font-weight: 700; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink); font-variant-numeric: tabular-nums; }
.coin-label { font-size: 12px; color: var(--muted); }
.home-grid { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.home-col { display: flex; flex-direction: column; min-width: 0; }
.stat-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
.stat-chip { align-items: flex-start; gap: 4px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
.stat-chip.streak, .stat-chip.level { border-color: var(--line); }
.stat-chip .stat-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; }
.stat-chip .stat-value, .stat-chip.streak .stat-value, .stat-chip.level .stat-value { font-size: 32px; line-height: 1.1; font-weight: 800; color: var(--ink); }
.stat-chip .stat-value small { font-family: var(--f-text); font-size: 14px; font-weight: 500; color: var(--muted); }
.stat-chip .stat-value.name { font-size: 22px; line-height: 1.35; overflow-wrap: anywhere; }
.stat-chip .bar { width: 100%; margin-top: 6px; }
.stat-chip .bar-fill { background: var(--accent); }
.stat-note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.streak-bars { display: flex; gap: 4px; width: 100%; margin-top: 6px; }
.streak-bars span { flex: 1; height: 6px; border-radius: 3px; background: var(--track); }
.streak-bars span.on { background: var(--accent-2); }
.mission-row { border-radius: 14px; border-color: transparent; }
.mission-row .bar { margin: 5px 0 2px; height: 5px; }
.mission-check { color: var(--accent); }
.day-groups { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.day-group + .day-group { border-top: 1px solid rgba(198, 165, 106, 0.15); }
.day-head { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; background: transparent; border: 0; color: var(--ink); text-align: left; }
.day-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.day-dot.d1 { background: var(--accent-2); }
.day-dot.d2 { background: #8a8170; }
.day-name { flex: 1; font-weight: 600; font-size: 14px; }
.day-count { font-size: 12px; color: var(--muted); }
.day-chevron { display: grid; color: var(--muted); transition: transform 0.2s ease; }
.day-head.open .day-chevron { transform: rotate(180deg); }
.day-group .task-list { padding: 0 12px 12px; }
.day-group .task-list[hidden] { display: none; }
.task-form-row input[type='text'], .task-form-row select, .task-form-row input[type='date'] { font-size: 16px; min-height: 46px; }
.rank-pos.top { color: var(--accent); }
@media (min-width: 1024px) {
  .home-grid:has(> .home-col + .home-col) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .bar-fill, .day-chevron { transition: none; } }
.task-form-row input[type='date'] { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; color-scheme: dark; }
.task-form-row select { background: var(--surface); }
@media (max-width: 520px) {
  .task-form-row > * { flex: 1 1 100%; }
  .task-form-row input[type='date'] { flex: 1 1 40%; }
  .task-form-row .btn { flex: 1 1 50%; }
}

/* Scoop del día y aviso de recompra */
.scoop-card { display: flex; align-items: center; gap: 14px; padding: 18px; margin-bottom: 20px; border-radius: 20px; background: var(--surface-2); border: 1px solid rgba(226, 202, 150, 0.35); }
.scoop-ring { --pct: 0; width: 64px; height: 64px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--track) 0); }
.scoop-ring span { width: 54px; height: 54px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 18px; color: var(--ink); }
.scoop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.scoop-kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); }
.scoop-main strong { font-size: 15px; font-weight: 600; }
.scoop-main .hint { font-size: 12px; }
.scoop-btn { min-height: var(--tap); padding: 0 16px; border-radius: var(--radius-sm); font-size: 13px; flex-shrink: 0; }
.scoop-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-weight: 600; font-size: 13px; flex-shrink: 0; }
.recompra-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; margin-bottom: 20px; border-radius: 20px; background: var(--surface); border: 1px solid rgba(226, 202, 150, 0.45); }
.recompra-card strong { font-size: 15px; font-weight: 700; }
.recompra-card .btn { text-decoration: none; }
@media (max-width: 380px) { .scoop-card { flex-wrap: wrap; } .scoop-btn { flex: 1 1 100%; } }

/* Retos de la bodega */
.reto-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reto-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); }
.reto-row.done { opacity: 0.7; }
.reto-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--track); color: var(--muted); flex-shrink: 0; }
.reto-tag.medium { background: #3a3322; color: var(--accent); }
.reto-tag.hard { background: var(--accent); color: var(--on-accent); }
.reto-tag.daily { background: transparent; border: 1px solid var(--line-strong); color: var(--accent); }
.reto-main { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.reto-title { font-size: 14px; font-weight: 600; }
.reto-desc { font-size: 12px; color: var(--muted); }
.reto-main .bar { height: 5px; margin-top: 4px; }
.reto-reward { font-size: 12px; font-weight: 600; color: var(--accent); flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.reto-row.done .reto-reward { color: var(--mint); }
.reto-swap { flex-shrink: 0; }
.link { font-size: 13px; color: var(--accent); text-decoration: none; }
.link:hover { color: var(--ink); }
.retos { max-width: 760px; }
/* Bodega (administrador) */
.bodega { margin: 14px 0 22px; }
.bodega-cuerpo { padding: 0 12px 12px; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; }
.cp-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.tag-ejemplo { margin-left: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--accent-2); vertical-align: middle; }
.check-line { flex-direction: row !important; align-items: center; gap: 10px; }
.check-line input { width: 20px; height: 20px; min-height: 0; accent-color: var(--accent); flex-shrink: 0; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.stack-form label[hidden] { display: none; }

/* Referidos */
.referidos-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
.referidos-codigo { display: flex; flex-direction: column; min-width: 0; }
.referidos-codigo strong { font-family: var(--f-display); font-size: 20px; letter-spacing: 0.12em; color: var(--accent); }
.referidos-cuenta { margin-top: 10px; }

/* Menús desplegables propios (public/js/select.js): el <select> del sistema queda invisible debajo */
.sel { position: relative; display: inline-flex; min-width: 0; flex: 1 1 180px; }
.stack-form .sel, .field .sel { display: flex; width: 100%; flex: none; }
.rank-filters .sel { flex: 1 1 160px; }
.sel-nativo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; margin: 0; }
.sel-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 16px; font-weight: 500; text-align: left;
  transition: border-color 0.15s ease;
}
.sel-btn:hover, .sel.abierta .sel-btn { border-color: var(--line-strong); }
.sel-btn:disabled { opacity: 0.55; cursor: default; }
.sel-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-flecha { display: grid; color: var(--muted); flex-shrink: 0; transition: transform 0.18s ease; }
.sel.abierta .sel-flecha { transform: rotate(180deg); color: var(--accent); }
.sel-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); min-width: 100%; width: max-content; max-width: min(360px, 90vw); max-height: 288px; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.85); animation: sel-entra 0.14s ease-out;
}
.sel-lista[hidden] { display: none; }
.sel.arriba .sel-lista { top: auto; bottom: calc(100% + 6px); }
.sel-op { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding: 0 12px; border-radius: 10px; font-size: 15px; color: var(--ink); cursor: pointer; }
.sel-op.activa { background: rgba(226, 202, 150, 0.12); }
.sel-op.elegida { color: var(--accent); font-weight: 600; }
.sel-op[aria-disabled='true'] { opacity: 0.45; cursor: default; }
.sel-op svg { flex-shrink: 0; }
@keyframes sel-entra { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sel-lista { animation: none; } .sel-flecha { transition: none; } }

/* Mover: actividad con GPS y mapa */
.mover { max-width: 760px; }
.segmento { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.segmento a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; }
.segmento a.activo { background: rgba(226, 202, 150, 0.14); color: var(--accent); }
.mover-semana, .mover-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mover-semana { margin-bottom: 16px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.mover-semana > div, .mover-cifras > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cifra-rotulo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cifra-grande { font-family: var(--f-display); font-weight: 800; font-size: clamp(22px, 6vw, 30px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cifra-grande small { font-family: var(--f-text); font-size: 13px; font-weight: 500; color: var(--muted); }
.chips { display: flex; gap: 8px; margin-bottom: 14px; }
.chip { flex: 1; min-height: var(--tap); border-radius: var(--radius-sm); border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; }
.chip.activo { border-color: var(--accent); color: var(--accent); background: rgba(226, 202, 150, 0.1); }
.mover-iniciar { min-height: 56px; font-size: 16px; }
.mover-nueva .hint { margin-top: 10px; }
.mover-vivo, .mover-resumen { display: flex; flex-direction: column; gap: 14px; padding: 16px; margin-bottom: 20px; border-radius: 20px; background: var(--surface-2); border: 1px solid rgba(226, 202, 150, 0.35); }
.mover-barra { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.mover-senal { color: var(--mint); font-weight: 600; }
.mover-vivo.pausa .mover-senal { color: var(--muted); }
.mover-tipo { color: var(--muted); }
.mover-sello { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 600; }
.mover-sello.ok { color: var(--mint); }
.mover-coins { font-size: 13px; color: var(--muted); }
.mover-coins strong { font-family: var(--f-display); font-size: 20px; color: var(--accent); }
.mover-acciones { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; }
.mover-acciones .btn { min-height: 54px; }
.mover-detalle { margin: 4px 0 20px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.mover-detalle summary { min-height: 52px; display: flex; align-items: center; padding: 0 16px; font-weight: 600; font-size: 14px; cursor: pointer; list-style: none; }
.mover-detalle summary::-webkit-details-marker { display: none; }
.mover-detalle summary::after { content: '+'; margin-left: auto; color: var(--muted); font-size: 20px; }
.mover-detalle[open] summary::after { content: '–'; }
.mover-manual { padding: 0 16px 16px; }
.mover-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mover-fila { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); }
.mover-fila-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mover-fila-main strong { font-size: 14px; font-weight: 600; }
.mover-fila-coins { font-size: 13px; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.mini-ruta { width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; background: var(--bg-2); display: grid; place-items: center; color: var(--muted); }
.mini-ruta polyline { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Mapa propio (public/js/mapa.js) */
.mapa, .mover-mapa { position: relative; height: clamp(200px, 38vh, 340px); border-radius: 16px; overflow: hidden; background: var(--bg-2); background-image: linear-gradient(rgba(198, 165, 106, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(198, 165, 106, 0.06) 1px, transparent 1px); background-size: 32px 32px; }
.mapa-baldosas { position: absolute; inset: 0; }
.mapa-baldosas img { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; user-select: none; }
.mapa-ruta { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-ruta polyline { fill: none; stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(226, 202, 150, 0.55)); }
.mapa-punto { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.mapa-inicio { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.mapa-credito { position: absolute; right: 6px; bottom: 4px; font-size: 9px; color: rgba(247, 243, 235, 0.55); background: rgba(7, 8, 7, 0.55); padding: 1px 5px; border-radius: 4px; }
.mapa.vacio::before { content: 'Esperando tu ubicación…'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--muted); }

/* Tu día: anillo de pasos y siguiente paso */
.dia-card { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.dia-card.completo { border-color: rgba(79, 191, 127, 0.45); }
.dia-anillo { --pct: 0; width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--track) 0); transition: background 0.4s ease; }
.dia-card.completo .dia-anillo { background: var(--mint); }
.dia-anillo span { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 15px; }
.dia-card.completo .dia-anillo span { color: var(--mint); }
.dia-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dia-titulo { font-size: 15px; font-weight: 600; }
.dia-pasos { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.dia-pasos li { display: inline-flex; align-items: center; gap: 5px; }
.dia-pasos li.hecho { color: var(--mint); }
.dia-ir { flex-shrink: 0; text-decoration: none; }
/* Avisos de logro */
.toasts { position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 900; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 12px; max-width: 420px; width: 100%; padding: 12px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.9); animation: toast-entra 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.toast.sale { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; }
.toast-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(226, 202, 150, 0.14); color: var(--accent); flex-shrink: 0; }
.toast div { display: flex; flex-direction: column; min-width: 0; }
.toast strong { font-size: 14px; }
.toast span { font-size: 12.5px; color: var(--muted); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@media (min-width: 1024px) { .toasts { bottom: 28px; align-items: flex-end; padding-right: 28px; } }
/* Movimiento al entrar a una pantalla: las barras de progreso crecen (dicen cuánto llevas). Las tarjetas ya no
   suben una por una: se mueve la pantalla entera, como en una app (ver "Se siente como una app", al final). */
.route-enter .bar-fill, .route-enter .streak-bars span.on { animation: barra-crece 0.5s 0.12s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: left; }
@keyframes barra-crece { from { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .route-enter .bar-fill, .route-enter .streak-bars span.on, .toast { animation: none; }
  .dia-anillo { transition: none; }
}

/* El club como vista dentro de kallpanutrition.com: la tienda ya es de la página que lo contiene. "Instalar app" sí
   se ve: abre el club aparte, en su propia dirección (pwa.js, installButton) */
.embebido .sidebar-store { display: none; }
/* La página que lo contiene ya muestra la marca: aquí queda solo el botón del menú, en una franja delgada */
.embebido .topbar-mobile .brand { display: none; }
.embebido .topbar-mobile { justify-content: flex-end; padding: 2px 10px; border-bottom: 0; background: transparent; position: static; }
.embebido .content { padding-top: 4px; }

/* Elegir con quién compartir */
.compartir-lista { display: flex; flex-direction: column; gap: 8px; width: 100%; margin: 6px 0; }
.compartir-op { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); text-align: left; }
.compartir-op:hover, .compartir-op:focus-visible { border-color: var(--accent); }
.compartir-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(226, 202, 150, 0.14); color: var(--accent); flex-shrink: 0; }
.compartir-texto { display: flex; flex-direction: column; min-width: 0; }
.compartir-texto strong { font-size: 14px; }
/* Grupos de amigos */
.grupos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.grupo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.grupo-fila .grupo-nombre { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; }
.grupo-codigo { font-family: var(--f-display); letter-spacing: 0.14em; color: var(--accent); font-weight: 700; }
.grupo-form { display: flex; gap: 8px; flex-wrap: wrap; }
.grupo-form input { flex: 1 1 150px; min-height: 46px; padding: 0 12px; font-size: 16px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; }
.tribu-grupo { font-size: 11px; font-weight: 600; color: var(--accent-2); }
.tribu-foto { width: 100%; max-height: 420px; object-fit: cover; border-radius: 14px; background: var(--bg-2); display: block; }
/* Tribu: muro de actividades */
.tribu { max-width: 760px; }
.tribu-filtros { max-width: 480px; }
.tribu-lista { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.tribu-post { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid rgba(198, 165, 106, 0.18); }
.tribu-cabeza { display: flex; align-items: center; gap: 10px; }
.tribu-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: var(--track); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.tribu-quien { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tribu-quien strong { font-size: 14px; font-weight: 600; }
.tribu-nivel { font-size: 11px; font-weight: 500; color: var(--accent-2); }
.tribu-titulo { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.tribu-mapa { height: 170px; }
.tribu-pie { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tribu-fuego { border-color: transparent; background: rgba(226, 202, 150, 0.08); color: var(--muted); }
.tribu-fuego.dado { background: rgba(226, 202, 150, 0.18); color: var(--accent); }
.tribu-fuego.dado svg { fill: currentColor; animation: fuego-salta 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.6); }
.tribu-seguir[aria-pressed='true'] { color: var(--accent); }
.tribu-sello { margin-left: auto; font-size: 12px; color: var(--muted); }
.tribu-sello.ok { color: var(--accent-2); }
.tribu-hitos { margin-top: 24px; }
.mover-publicar-fila { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mover-publicada { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 13px; color: var(--mint); }
@keyframes fuego-salta { from { transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { .tribu-fuego.dado svg { animation: none; } }

.mover-senal.debil { color: var(--accent); }

/* Día y hora de una tarea */
.campo-corto { display: flex; flex-direction: column; gap: 4px; flex: 1 1 130px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.task-form-row .campo-corto input { width: 100%; min-height: 46px; padding: 0 12px; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color-scheme: dark; }
.task-form-row .campo-corto input:focus { border-color: var(--accent); }
.task-hora { color: var(--accent-2); font-weight: 600; }
@media (max-width: 520px) { .task-form-row .campo-corto { flex: 1 1 40%; } }

/* Tareas del club */
.task-club { margin-left: 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line-strong); color: var(--accent-2); vertical-align: middle; white-space: nowrap; }
.agregar-tarea { margin-top: 14px; }
.agregar-cuerpo { padding: 0 16px 16px; }
/* El mapa de OpenStreetMap llega claro: se oscurece y se le baja el color para que combine con el club y la ruta dorada resalte */
.mapa-baldosas { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.88) saturate(0.35); transform: translateZ(0); }
/* En iPhone: el filtro del mapa en su propia capa (Safari repintaba todo el mapa y se veía saltar), las baldosas
   aparecen con un fundido en vez de golpe, y tocarlas no abre el menú de "guardar imagen" ni las arrastra */
.mapa-baldosas img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; opacity: 0; transition: opacity 0.25s ease; }
.mapa-baldosas img.lista { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .mapa-baldosas img { transition: none; } }
.mapa, .mover-mapa { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mover-aqui { height: clamp(170px, 30vh, 260px); margin-bottom: 14px; }
.mover-aqui.vacio::before { content: 'Aquí verás el mapa del lugar donde estás'; padding: 0 16px 56px; text-align: center; }
/* Sin permiso de ubicación: debajo del mapa, paso a paso dónde se activa */
.mapa-ayuda { margin: -2px 0 14px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(226, 202, 150, 0.06); font-size: 14px; line-height: 1.45; }
.mapa-ayuda strong { display: block; color: var(--ink); margin-bottom: 4px; }
.mapa-ayuda p { margin: 0 0 8px; color: var(--muted); }
.mapa-ayuda ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); }
.mapa-accion { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); background: var(--surface-2); border-color: var(--line-strong); color: var(--accent); white-space: nowrap; z-index: 2; }

/* Recordatorios */
.recordatorios { max-width: 640px; }
.rec-intro { margin-bottom: 16px; }
.rec-estado { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.rec-estado.activo { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid rgba(79, 191, 127, 0.4); }
.rec-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--mint); font-weight: 600; font-size: 14px; }
.rec-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.rec-lista { list-style: none; margin: 0 0 14px; padding: 0; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.rec-fila { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px; }
.rec-fila + .rec-fila { border-top: 1px solid rgba(198, 165, 106, 0.15); }
.rec-fila input[type='checkbox'] { width: 22px; height: 22px; accent-color: var(--accent); flex-shrink: 0; }
.rec-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.rec-texto strong { font-size: 14px; font-weight: 600; }
.rec-fila input[type='time'] { min-height: 44px; padding: 0 10px; font-size: 16px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color-scheme: dark; }
.rec-fila input[type='time']:disabled { opacity: 0.45; }

/* Cámara y foto de evidencia */
.cam { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; gap: 12px; padding: calc(14px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); background: rgba(7, 8, 7, 0.97); }
.cam-cabeza { display: flex; flex-direction: column; gap: 2px; }
.cam-cabeza strong { font-family: var(--f-display); font-size: 18px; }
.cam-marco { flex: 1; min-height: 0; border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line); display: grid; place-items: center; }
.cam-video, .cam-foto { width: 100%; height: 100%; object-fit: contain; }
.cam-video[hidden], .cam-foto[hidden] { display: none; }
.cam-acciones { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
.cam-acciones .btn { min-height: 54px; }
.ver-foto { cursor: pointer; }
.task-foto { margin: 0 0 0 10px; min-height: var(--tap); color: var(--accent); }
/* Aviso para activar los recordatorios */
.rec-aviso { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; margin-bottom: 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.rec-aviso-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(226, 202, 150, 0.14); color: var(--accent); flex-shrink: 0; }
.rec-aviso-texto { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.rec-aviso-texto strong { font-size: 14px; }
.rec-aviso .btn { text-decoration: none; }

.reward-contador { display: inline-flex; align-self: flex-start; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--accent); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

.cam-comentario { width: 100%; min-height: 56px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; resize: none; }
.cam-comentario[hidden] { display: none; }
.cam-comentario:focus { border-color: var(--accent); }
.cam-cabeza.con-cerrar { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.cam-cerrar { flex-shrink: 0; min-height: var(--tap); width: var(--tap); border-color: var(--line-strong); color: var(--ink); }
.cam-nota { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.ver-foto { cursor: default; }

.task-pista { font-size: 12px; color: var(--accent-2); }

/* El premio mayor: el tarro sobre su podio */
.premio-mayor { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 18px 18px; margin: 14px 0 18px; border-radius: 22px; text-align: center; overflow: hidden; background: radial-gradient(120% 70% at 50% 0%, rgba(226, 202, 150, 0.2), transparent 70%), var(--surface-2); border: 1px solid var(--line-strong); }
.premio-cinta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.premio-podio { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 6px; }
.premio-foto { width: min(210px, 56vw); height: auto; position: relative; z-index: 1; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6)); animation: premio-flota 4s ease-in-out infinite; }
.premio-base { display: grid; place-items: center; width: min(240px, 64vw); height: 46px; margin-top: -14px; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #e2ca96, #c6a56a 60%, #8f7340); color: var(--on-accent); font-family: var(--f-display); font-weight: 900; font-size: 22px; box-shadow: 0 10px 24px -10px rgba(226, 202, 150, 0.5); }
.premio-titulo { font-size: 22px; font-stretch: 110%; margin-top: 8px; }
.premio-costo { font-size: 13px; color: var(--muted); }
.premio-costo strong { font-family: var(--f-display); font-size: 24px; color: var(--accent); }
.premio-avance { width: 100%; display: flex; flex-direction: column; gap: 5px; }
.premio-avance .bar { height: 8px; }
.premio-avance .bar-fill { background: var(--accent); }
.premio-mayor .btn { margin-top: 6px; }
.premio-mayor.ganado .premio-foto { filter: grayscale(0.6) drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6)); opacity: 0.75; animation: none; }
@keyframes premio-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: reduce) { .premio-foto { animation: none; } }

/* Comunidad */
.task-rechazada { font-size: 12px; color: var(--danger); }
.tribu-racha { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: rgba(226, 202, 150, 0.14); color: var(--accent); font-size: 11px; font-weight: 700; vertical-align: middle; }
.tribu-comentarios { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(198, 165, 106, 0.15); }
.tribu-comentarios ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tribu-comentarios li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; overflow-wrap: anywhere; }
.tribu-comentarios .btn-link { margin: 0; flex-shrink: 0; min-height: var(--tap); }
.retos-grupos { margin-bottom: 18px; }
.reto-grupo { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin-bottom: 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.reto-grupo-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.reto-grupo-mio { font-size: 14px; }
.reto-grupo-miembros, .reto-grupo-tabla { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.reto-grupo-miembros li { display: flex; justify-content: space-between; color: var(--muted); }
.reto-grupo-miembros li.yo { color: var(--accent); font-weight: 600; }
.reto-grupo-tabla li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.reto-grupo-tabla li.mio { border: 1px solid var(--accent); }
.reto-grupo-nombre { flex: 1; min-width: 0; font-weight: 600; }
.resumen { max-width: 640px; }
.resumen-cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.resumen-coins { margin-bottom: 14px; }
.negocio-semanas { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.negocio-semanas li { display: grid; grid-template-columns: 48px 1fr 32px minmax(110px, auto); align-items: center; gap: 10px; font-size: 13px; }

.tribu-comentario { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tribu-comentario-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tribu-comentario-cabeza time { font-size: 12px; }

/* Cámara: cerrar, girar (selfie) y flash */
.cam-titulo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cam-marco { position: relative; }
.cam-video.espejo { transform: scaleX(-1); }
.cam-herramientas { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 10px; }
.cam-herramientas[hidden], .cam-flash[hidden], .cam-destello[hidden] { display: none; }
.cam-herramientas .btn { width: 48px; min-height: 48px; border-radius: 50%; background: rgba(7, 8, 7, 0.6); border-color: var(--line-strong); color: var(--ink); }
.cam-flash[aria-pressed='true'] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.cam-destello { position: fixed; inset: 0; z-index: 1300; background: #fff; pointer-events: none; }

/* Celulares: el formulario de tareas en cuadrícula (nada se sale ni se monta) y el título de la tarea con aire */
@media (max-width: 520px) {
  .task-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: end; }
  .task-form-row > * { grid-column: 1 / -1; min-width: 0; max-width: 100%; }
  .task-form-row .campo-corto { grid-column: auto; display: flex; flex-direction: column; gap: 4px; }
  .task-form-row .campo-corto input, .task-form-row input[type='date'], .task-form-row input[type='time'] { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; height: 46px; -webkit-appearance: none; appearance: none; text-align: left; }
  .task-form-row input::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }
  .task-form-row .btn { width: 100%; min-height: 50px; }
  .task-card .task-main { flex: 1 1 60%; min-width: 60%; }
  .task-card .task-actions { flex: 1 1 100%; justify-content: flex-end; }
}

/* Aviso de datos al entrar */
.privacidad-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: 14px; color: var(--muted); }
.privacidad-lista li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.privacidad-lista strong { color: var(--ink); }
.privacidad .hint { margin-bottom: 14px; }

/* Auditoría: todo lo que se toca con el dedo mide al menos 44 px */
.segmento a { min-height: 44px; }
.check-line { min-height: 44px; }
.auth-card .btn-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
@media (max-width: 900px) {
  .nav-section-head { min-height: 44px; }
  .content input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), .content select { min-height: 44px; }
}

/* Auditoría: pulido */
/* El pie del menú (Salir) es sólido: la lista pasa por debajo sin que se monten los textos */
.sidebar-logout { background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 0; margin-top: 12px; padding-top: 10px; }
/* Aire entre un texto de ayuda y lo que sigue */
.card > .hint + :not(.hint):not(button):not(.btn) { margin-top: 12px; }
.card > .hint + .hint { margin-top: 6px; }
.card > h2 + .hint { margin-bottom: 2px; }
.resumen .btn + .hint { margin-top: 12px; }
/* Fichas de cifras: si queda una sola en la última fila, ocupa todo el ancho */
@media (max-width: 520px) {
  .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Perfil de salud: peso y estatura lado a lado, del mismo tamaño */
.card .stack-form input[placeholder='Peso (kg)'], .card .stack-form input[placeholder='Estatura (cm)'] { width: 100%; max-width: 320px; }
/* Premios en celular: el texto a todo el ancho; el precio y el botón, debajo en una fila */
@media (max-width: 520px) {
  .reward-card { flex-wrap: wrap; align-items: flex-start; }
  .reward-card .reward-main { flex: 1 1 0; min-width: 60%; }
  .reward-card .reward-side { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); }
  .reward-card .reward-side .btn { min-width: 120px; }
}

/* Ajustes: grupos con título */
.ajustes-grupo { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--accent); }
.stack-form > .ajustes-grupo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Muestra de un ejercicio: recuadro con el video o el GIF */
.muestra { margin: 0; width: 100%; max-width: 420px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid var(--line); display: grid; place-items: center; }
.muestra img, .muestra video, .muestra iframe { width: 100%; height: 100%; border: 0; display: block; }
.muestra img, .muestra video { object-fit: contain; }
.muestra-ver { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(80% 80% at 50% 40%, rgba(226, 202, 150, 0.16), transparent 70%), var(--surface-2); border: 0; color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.muestra-play { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); padding-left: 3px; transition: transform 0.15s ease; }
.muestra-ver:active .muestra-play { transform: scale(0.94); }
.ex-con-muestra { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: 11.5px; font-weight: 600; }
.ex-demo { width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ex-demo:focus { border-color: var(--accent); outline: none; }
@media (max-width: 520px) { .ex-body { padding-left: 16px; } }

/* Muestra incluida: la foto final aparece y desaparece sobre la de inicio */
.muestra-fotos { position: relative; aspect-ratio: 3 / 2; }
.muestra-fotos img { position: absolute; inset: 0; object-fit: contain; }
.muestra-fotos .muestra-final { animation: muestra-tiempos 2.4s ease-in-out infinite; }
@keyframes muestra-tiempos { 0%, 35% { opacity: 0; } 50%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .muestra-fotos { aspect-ratio: 3 / 1; display: grid; grid-template-columns: 1fr 1fr; }
  .muestra-fotos img { position: static; }
  .muestra-fotos .muestra-final { animation: none; }
}

/* Rutina: un check por ejercicio */
.ex-row-top { display: flex; align-items: center; }
.ex-row-top .ex-row-head { flex: 1; min-width: 0; padding-left: 4px; }
.ex-check { flex-shrink: 0; width: 44px; height: 44px; margin-left: 10px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; border: 0; color: var(--on-accent); cursor: pointer; position: relative; box-shadow: none; min-height: 0; }
.ex-check::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.ex-check.done::before { background: var(--mint); border-color: var(--mint); }
.ex-check:active::before { transform: scale(0.9); }
.ex-check svg { position: relative; }
.ex-row.done .ex-title { color: var(--muted); text-decoration: line-through; }
.ex-row-top .ex-icon { display: none; }
@media (max-width: 520px) { .ex-body { padding-left: 16px; } }

/* Foto y cámara: la imagen siempre cabe entera en su marco, sin deformarse ni recortarse. Al ver una foto ya
   tomada no se agranda más allá de su tamaño real (en un computador se vería borrosa). */
.cam { overflow: hidden; }
.cam-marco { position: relative; min-height: 0; }
.cam-marco > .cam-video, .cam-marco > .cam-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.ver-foto .cam-marco > .cam-foto { object-fit: scale-down; }
.tribu-foto { object-fit: contain; background: #000; }

/* ---------- Insignias ---------- */
.insignia { display: inline-grid; place-items: center; flex-shrink: 0; line-height: 0; }
.insignia svg { display: block; }
.ins-mini { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; vertical-align: middle; }
/* Perfil: vitrina y colección */
.ins-card .section-head { margin-bottom: 14px; }
.ins-cuenta { font-variant-numeric: tabular-nums; }
.ins-vitrina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ins-vitrina-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font: inherit; text-align: center; cursor: pointer; min-width: 0; }
.ins-vitrina-item strong { font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.ins-vitrina-item .hint { font-size: 11.5px; line-height: 1.3; }
.ins-cambiar { margin-bottom: 14px; }
.ins-eligiendo { margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.ins-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.ins-coleccion { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; justify-items: center; }
.ins-celda { width: 100%; max-width: 76px; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border-radius: 14px; background: transparent; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, border-color 0.15s ease; min-height: 0; }
.ins-celda .insignia, .ins-celda svg { width: 100% !important; height: 100% !important; max-width: 58px; max-height: 58px; }
.ins-celda:active { transform: scale(0.94); }
.ins-celda.marcada { border-color: var(--accent); background: rgba(226, 202, 150, 0.1); }
.ins-celda:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) { .ins-celda:not(:disabled):hover { border-color: var(--line-strong); } }
/* Hoy: próxima insignia */
.ins-proxima { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 14px 0; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.ins-proxima-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ins-proxima-texto .eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.ins-proxima-texto .bar { height: 6px; }
.ins-proxima > svg { color: var(--muted); flex-shrink: 0; }
/* Capas: ficha (hoja desde abajo) y desbloqueo (pantalla completa) */
.ins-capa { position: fixed; inset: 0; z-index: 990; display: flex; background: rgba(7, 8, 7, 0.78); animation: ins-fondo 0.2s ease both; }
.ins-hoja-fondo { align-items: flex-end; justify-content: center; }
.ins-hoja { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 22px calc(20px + env(safe-area-inset-bottom)); border-radius: 26px 26px 0 0; background: var(--bg-2); border: 1px solid var(--line-strong); border-bottom: 0; text-align: center; animation: ins-sube 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (min-width: 700px) { .ins-hoja-fondo { align-items: center; } .ins-hoja { border-radius: 26px; border-bottom: 1px solid var(--line-strong); } }
.ins-nivel, .ins-etiqueta { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.ins-nombre { font-family: var(--f-display); font-size: 22px; line-height: 1.15; text-transform: uppercase; }
.ins-nombre.grande { font-size: 28px; }
.ins-significado { color: var(--ink); font-size: 15px; line-height: 1.45; max-width: 34ch; }
.ins-datos { width: 100%; margin: 8px 0 4px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; text-align: left; font-size: 13.5px; }
.ins-datos dt { color: var(--muted); }
.ins-datos dd { margin: 0; font-weight: 600; }
.ins-estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; color: var(--accent); }
.ins-estado.ganada { color: var(--mint); }
.ins-barra { width: 100%; height: 6px; }
.ins-hoja .btn { margin-top: 10px; min-height: 48px; }
.ins-desbloqueo { align-items: center; justify-content: center; background: radial-gradient(90% 60% at 50% 30%, rgba(226, 202, 150, 0.2), transparent 70%), #070807; overflow-y: auto; }
.ins-desbloqueo-caja { width: 100%; max-width: 420px; margin: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
.ins-desbloqueo-caja .btn { min-height: 50px; }
.ins-desbloqueo-caja .btn-primary { margin-top: 12px; }
.ins-requisito { color: var(--accent); font-weight: 600; font-size: 14px; }
.ins-premio { font-family: var(--f-display); font-size: 18px; color: var(--accent); }
.ins-sigue { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); text-align: left; }
.ins-sigue > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 13px; }
.ins-aparece { animation: ins-aparece 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes ins-aparece { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ins-sube { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ins-fondo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ins-capa, .ins-hoja, .ins-aparece { animation: none; } }
/* Administrador */
.ins-admin { flex-direction: column; align-items: stretch; }
.ins-admin-cabeza { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ins-admin-cabeza .cp-main { flex: 1 1 200px; min-width: 0; }
.ins-admin.abierta .stack-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }

/* Premios con cupo: quiénes se lo llevaron */
.reward-ganadores { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(226, 202, 150, 0.08); border: 1px solid var(--line); font-size: 13px; overflow-wrap: anywhere; }
.reward-ganadores-titulo { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.premio-mayor .reward-ganadores { align-items: center; width: 100%; }

/* Dar acceso a un comprador */
.acceso-form { margin: 14px 0; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
.acceso-listo { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 14px; border-radius: 16px; background: rgba(79, 191, 127, 0.08); border: 1px solid rgba(79, 191, 127, 0.4); }
.acceso-datos { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.acceso-datos dt { color: var(--muted); font-size: 13px; }
.acceso-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.acceso-clave { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: 0.04em; color: var(--accent); user-select: all; }
@media (max-width: 420px) { .acceso-datos { grid-template-columns: 1fr; } .acceso-datos dd { margin-bottom: 6px; } }
.acceso-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.acceso-acciones a.btn { text-decoration: none; }

/* ---------- Videos de los fundadores: pantalla para subirlos (admin-videos.js, se usa desde el panel) ---------- */
.vf-titulo { font-size: 22px; margin: 4px 0 6px; }
.vf-publicados { margin-top: 30px; }
.vf-nuevo { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 22px; align-items: start; margin-top: 16px; }
.vf-form { display: flex; flex-direction: column; gap: 14px; }
.vf-zona { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; padding: 22px; border: 1.5px dashed var(--line-strong); border-radius: 14px; text-align: center; cursor: pointer; transition: border-color 0.15s, background-color 0.15s; }
.vf-zona:hover, .vf-zona-encima { border-color: var(--accent); background: rgba(226, 202, 150, 0.05); }
.vf-zona svg { color: var(--accent); }
.vf-archivo { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vf-subiendo { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.vf-subiendo svg { color: var(--accent); flex-shrink: 0; }
.vf-subiendo-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.vf-subiendo-texto strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vf-barra { display: block; height: 4px; border-radius: 99px; background: var(--track); overflow: hidden; }
.vf-barra i { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
.vf-campo { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.vf-campo input, .vf-campo select, .vf-campo textarea { color: var(--ink); font-size: 15px; }
.vf-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vf-interruptor { align-items: flex-start; }
.vf-interruptor > span { display: flex; flex-direction: column; gap: 2px; }
.vf-quitar { flex-shrink: 0; }
.vf-ver { display: inline-flex; align-items: center; gap: 6px; }
.vf-acciones { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); }
.vf-prev { position: sticky; top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.vf-prev-rotulo { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); }
.vf-prev-cel { position: relative; width: 210px; aspect-ratio: 9 / 18; border-radius: 26px; border: 1px solid var(--line-strong); overflow: hidden; background: #000; }
.vf-prev-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf-prev-vacio { background: linear-gradient(180deg, #1a1c16, #070807); }
.vf-prev-cabeza { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: #fff; }
.vf-avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, 0.45); }
.vf-prev-pie { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; padding: 40px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85) 45%); }
.vf-ceja { font-size: 8px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); }
.vf-prev-titulo { font-size: 14px; line-height: 1.2; color: #fff; }
.vf-prev-boton { margin-top: 4px; padding: 8px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; text-align: center; }
.vf-tabla-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.vf-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.vf-tabla th { padding: 12px 14px; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap; }
.vf-tabla td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.vf-tabla tr:last-child td { border-bottom: 0; }
.vf-apagado { opacity: 0.55; }
.vf-video { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.vf-video img, .vf-sin-imagen { width: 34px; height: 54px; border-radius: 6px; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.vf-video div { display: flex; flex-direction: column; gap: 2px; }
.vf-nowrap { white-space: nowrap; }
.vf-estado { display: inline-block; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line-strong); font-size: 12px; white-space: nowrap; color: var(--muted); }
.vf-estado-vivo { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.vf-estado-prog { color: var(--accent); }
.vf-acciones-fila { white-space: nowrap; text-align: right; }
@media (max-width: 860px) {
  .vf-nuevo { grid-template-columns: 1fr; }
  .vf-prev { position: static; }
  .vf-dos { grid-template-columns: 1fr; }
}

/* ---------- Ventana de anuncios y videos de los fundadores (announcement-modal.js; diseños 1 y 4) ---------- */
.fv-capa { position: fixed; inset: 0; z-index: 980; display: grid; place-items: center; padding: 12px; background: rgba(4, 5, 4, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fv-fundido 0.2s ease-out; }
.fv-capa.fv-saliendo { opacity: 0; transition: opacity 0.15s ease-in; }
.fv-tarjeta { position: relative; display: flex; flex-direction: column; width: min(420px, 100%); max-height: calc(100dvh - 24px); overflow: hidden; border-radius: 22px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8); animation: fv-subir 0.2s ease-out; }
@keyframes fv-subir { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fv-fundido { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fv-capa, .fv-tarjeta { animation: none; } }
/* Con video: en el celular el video llena la tarjeta y el texto va encima, abajo */
.fv-con-video { height: min(760px, calc(100dvh - 24px)); background: #000; }
.fv-medio { position: absolute; inset: 0; background: #000; }
.fv-video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.fv-medio-enlace { position: static; }
.fv-enlace { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.fv-barras { position: absolute; top: 10px; left: 14px; right: 14px; z-index: 3; display: flex; gap: 4px; }
.fv-barras span { flex: 1; height: 3px; border-radius: 99px; background: rgba(247, 243, 235, 0.3); overflow: hidden; }
.fv-barras i { display: block; width: 0; height: 100%; background: var(--accent); }
.fv-barras .fv-lleno i { width: 100%; }
.fv-cabeza { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 24px 14px 12px; }
.fv-con-video .fv-cabeza { background: linear-gradient(rgba(0, 0, 0, 0.55), transparent); }
.fv-autor { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fv-autor > div { display: flex; flex-direction: column; min-width: 0; }
.fv-autor strong { display: flex; align-items: center; gap: 7px; font-size: 14px; color: #fff; }
.fv-avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent); font-weight: 800; background: rgba(0, 0, 0, 0.45); }
.fv-avatar-logo, .vf-avatar-logo { padding: 0; overflow: hidden; background: #000; }
.fv-avatar-logo img, .vf-avatar-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fv-etiqueta { padding: 1px 7px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; }
.fv-cuando { font-size: 12px; color: rgba(247, 243, 235, 0.75); }
.fv-botones { display: flex; gap: 8px; flex-shrink: 0; }
.fv-redondo { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(247, 243, 235, 0.25); background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; }
.fv-redondo:hover { border-color: var(--accent); color: var(--accent); }
.fv-activar-sonido { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 99px; border: 1px solid rgba(247, 243, 235, 0.35); background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.fv-activar-sonido[hidden] { display: none; }
.fv-controles { display: none; }
.fv-cuerpo { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; margin-top: auto; padding: 60px 18px 18px; }
.fv-con-video .fv-cuerpo { background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 38%); }
.fv-sin-video .fv-cuerpo { margin-top: 0; padding-top: 0; }
.fv-ceja { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); }
.fv-titulo { font-family: var(--f-display); font-stretch: 112%; font-size: 23px; line-height: 1.15; font-weight: 900; color: #fff; margin: 0; }
.fv-mensaje { color: rgba(247, 243, 235, 0.85); font-size: 14.5px; white-space: pre-wrap; margin: 0; }
.fv-reacciones { display: flex; align-items: center; gap: 8px; }
.fv-fuego { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1px solid rgba(247, 243, 235, 0.3); background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.fv-fuego svg { color: var(--accent); }
.fv-fuego-on { border-color: var(--accent); background: rgba(226, 202, 150, 0.16); color: var(--accent); }
.fv-cuenta { margin-left: auto; font-size: 12px; color: rgba(247, 243, 235, 0.65); }
.fv-sigue { display: none; }
.fv-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.fv-despues { min-height: 44px; padding: 0 6px; border: 0; background: none; color: rgba(247, 243, 235, 0.8); font-size: 14px; cursor: pointer; }
.fv-despues:hover { color: #fff; }
.fv-principal { flex: 1; max-width: 240px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Computador: video vertical a la izquierda; autor, título, mensaje, Fuego y lo que sigue a la derecha */
@media (min-width: 900px) {
  .fv-con-video { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; width: min(940px, 100%); height: min(640px, calc(100dvh - 48px)); padding: 18px; gap: 0 28px; background: var(--surface); }
  .fv-con-video .fv-medio { position: relative; inset: auto; grid-row: 1 / span 2; height: 100%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
  .fv-con-video .fv-barras { top: 28px; left: 32px; right: auto; width: calc((min(640px, 100dvh - 48px) - 36px) * 9 / 16 - 36px); }
  .fv-con-video .fv-cabeza { grid-column: 2; padding: 12px 0 0; background: none; }
  .fv-con-video .fv-cuerpo { grid-column: 2; margin-top: 0; padding: 18px 4px 4px; background: none; justify-content: flex-start; }
  .fv-con-video .fv-titulo { font-size: 32px; }
  .fv-con-video .fv-controles { display: flex; position: absolute; left: 12px; right: 12px; bottom: 10px; justify-content: flex-end; font-size: 12px; color: rgba(247, 243, 235, 0.8); }
  .fv-sigue { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
  .fv-sigue img { width: 34px; height: 54px; border-radius: 6px; object-fit: cover; }
  .fv-sigue div { display: flex; flex-direction: column; font-size: 13px; }
  .fv-sigue span { color: var(--muted); font-size: 12px; }
  .fv-con-video .fv-pie { justify-content: flex-start; margin-top: auto; }
  .fv-con-video .fv-principal { flex: 0 0 auto; order: -1; margin-left: 0; }
}
/* Aviso sin video (como los de antes): tarjeta sencilla */
.fv-sin-video { width: min(520px, 100%); }
.fv-sin-video .fv-cabeza { padding-top: 18px; }
.fv-sin-video .fv-titulo { color: var(--ink); font-size: 22px; }
.fv-sin-video .fv-mensaje { color: var(--muted); }
.fv-sin-video .fv-despues { color: var(--muted); }
.fv-sin-video .fv-redondo { background: transparent; color: var(--muted); border-color: var(--line); }
.fv-sin-video .fv-cabeza { order: 1; }
.fv-sin-video .fv-medio { order: 2; margin: 0 18px 14px; border-radius: 12px; overflow: hidden; }
.fv-sin-video .fv-cuerpo { order: 3; }

/* ---------- De los fundadores: fila en Hoy y archivo (views/fundadores.js; diseños 2 y 3) ---------- */
.fun-fila { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 16px; }
.fun-fila[hidden] { display: none; }
.fun-fila-cabeza { display: flex; align-items: center; justify-content: space-between; }
.fun-ceja { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); }
.fun-ver-todos { font-size: 13px; color: var(--muted); text-decoration: none; }
.fun-ver-todos:hover { color: var(--ink); }
.fun-carrusel { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.fun-carrusel::-webkit-scrollbar { display: none; }
.fun-tarjeta { flex: 0 0 auto; display: flex; flex-direction: column; gap: 6px; width: 112px; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.fun-portada { position: relative; display: block; width: 100%; aspect-ratio: 9 / 15; border-radius: 14px; overflow: hidden; border: 2px solid var(--accent); background: var(--surface-2); }
.fun-visto .fun-portada { border-color: var(--line); }
.fun-visto .fun-portada img { opacity: 0.6; }
.fun-portada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fun-sin-portada { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent); }
.fun-nuevo { display: inline-block; padding: 1px 7px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; }
.fun-portada .fun-nuevo { position: absolute; top: 7px; left: 7px; }
.fun-titulo { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 8px; font-size: 12px; line-height: 1.2; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)); }
.fun-autor { font-size: 12px; color: var(--muted); }
.fun-archivo { display: flex; flex-direction: column; gap: 10px; }
.fun-volver { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; min-height: 44px; }
.fun-h1 { font-family: var(--f-display); font-stretch: 112%; font-size: 30px; line-height: 1.08; font-weight: 900; margin: 4px 0 0; }
.fun-h1 span { color: var(--accent); }
.fun-filtros { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.fun-chip { flex: 0 0 auto; min-height: 40px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; }
.fun-chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
.fun-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.fun-item { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: inherit; text-align: left; cursor: pointer; }
.fun-item:hover { border-color: var(--line-strong); }
.fun-mini { position: relative; flex: 0 0 auto; width: 54px; height: 80px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
.fun-mini img { width: 100%; height: 100%; object-fit: cover; }
.fun-visto .fun-mini img { opacity: 0.6; }
.fun-duracion { position: absolute; left: 4px; bottom: 4px; padding: 0 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 10.5px; font-weight: 700; }
.fun-item-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fun-item-texto strong { font-size: 15px; line-height: 1.25; }
.fun-item-fecha { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }

/* Espacio de videos (admin-videos.js): avisa en rojo desde el 80 % */
.vf-espacio { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 4px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.vf-espacio-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 260px; font-size: 13px; color: var(--muted); }
.vf-espacio-texto strong { color: var(--ink); font-size: 14px; }
.vf-espacio-barra { flex: 1 1 180px; height: 6px; }
.vf-espacio-alerta { border-color: var(--danger); background: rgba(255, 92, 114, 0.08); }
.vf-espacio-alerta strong { color: var(--danger); }
.vf-espacio-alerta .vf-barra i { background: var(--danger); }

/* Agregar una actividad (computador): el botón a la altura de los campos y la ayuda con aire */
@media (min-width: 521px) {
  .task-form-row { align-items: flex-end; }
  .task-form-row > .btn { min-height: 46px; }
}
.task-form-row + .hint { margin-top: 12px; }

/* ===== Pulido: todo parejo ===== */
/* Los mensajes de error vacíos no dejan huecos */
.error:empty { min-height: 0; margin: 0; }
/* Un título de sección que viene después de otra cosa tiene aire arriba */
.section-head:not(:first-child) { margin-top: 24px; }
/* Misiones: todas las barras del mismo largo, sin importar si el premio es +25 o +150 */
.mission-reward { min-width: 44px; text-align: right; }
/* Celular: la marca "Hecha" al mismo lado que el botón "Hecha" */
@media (max-width: 520px) { .task-card .task-done-mark { margin-left: auto; } }
/* Celulares de 320 px: fecha y hora siguen lado a lado, con menos relleno para que no se corten */
@media (max-width: 359px) { .task-form-row .campo-corto input { padding: 0 8px; } }
/* Calendario en computador: días más bajos para que el formulario quepa en la pantalla; flechas visibles */
@media (min-width: 720px) { .cal-cell { aspect-ratio: auto; min-height: 56px; } }
.cal-header .btn { color: var(--accent); }
/* Perfil: las cinco cifras en una sola fila en computador */
@media (min-width: 521px) { .profile-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* Ranking: el puesto ocupa menos y en celular el nombre puede ir en dos líneas */
.rank-pos { width: 26px; }
@media (max-width: 520px) { .rank-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } }
/* Tribu: los filtros con la misma forma de pastilla que las pestañas de Mover y Retos */
.tribu-filtros .chip { border-radius: var(--radius-pill); }
@media (max-width: 520px) { .card:has(> .reward-list) { padding: 16px 12px; } }
/* Todas las páginas del mismo ancho */
.recordatorios, .resumen { max-width: 760px; }
@media (max-width: 520px) { .rec-fila { flex-wrap: wrap; } .rec-fila input[type='time'] { margin-left: 34px; } }
/* Administración (en el panel): una fila apagada no apaga el botón que la vuelve a activar */
.cat-row.inactive, .cp-row.inactive { opacity: 1; }
.cp-row.inactive > .cp-main, .cat-row.inactive > :first-child { opacity: 0.5; }

/* Tareas del club (administración): buscador y filtros sobre la lista larga */
.hab-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 12px; }
.hab-barra input[type='search'] { flex: 1 1 220px; min-height: 42px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 15px; }
.hab-barra select { flex: 0 1 220px; min-height: 42px; }
.hab-estados { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.hab-estados button { min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.hab-estados button.activo { background: rgba(226, 202, 150, 0.14); color: var(--accent); }
.hab-cuenta { margin-left: auto; }

/* Hoy: puesto en el ranking de la temporada */
.ranking-linea { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: -6px 0 16px; padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); font-size: 14px; text-decoration: none; width: fit-content; max-width: 100%; }
.ranking-linea strong { color: var(--accent); }
.ranking-linea svg:first-child { color: var(--accent); flex-shrink: 0; }
.ranking-linea svg:last-child { flex-shrink: 0; opacity: 0.6; }
.ranking-linea:hover { border-color: var(--line-strong); color: var(--ink); }
/* Hoy: la racha subió */
.racha-sube { color: var(--mint); font-weight: 800; letter-spacing: 0; }
.stat-chip.streak.sube { border-color: var(--mint); animation: racha-pulso 1.2s ease-out 2; }
@keyframes racha-pulso { 0% { box-shadow: 0 0 0 0 rgba(111, 191, 139, 0.45); } 100% { box-shadow: 0 0 0 14px rgba(111, 191, 139, 0); } }
@media (prefers-reduced-motion: reduce) { .stat-chip.streak.sube { animation: none; } }
.dia-manana { flex-shrink: 0; white-space: normal; text-align: center; max-width: 180px; }

/* Ajustes del club: una sección a la vez y la barra para guardar siempre a la vista */
.ajustes-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.ajustes-pestana { position: relative; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ajustes-pestana:hover { color: var(--ink); border-color: var(--line-strong); }
.ajustes-pestana[aria-selected='true'] { background: rgba(226, 202, 150, 0.14); border-color: var(--accent); color: var(--accent); }
.ajustes-pestana.con-cambios::after { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ajustes-seccion { border: 0; margin: 0; padding: 0; min-width: 0; }
.ajustes-seccion[hidden] { display: none; }
.ajustes-seccion > legend { padding: 0; margin-bottom: 12px; }
.ajustes-barra { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px -4px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.35); }
.ajustes-barra .ajustes-cambios { color: var(--muted); font-size: 14px; }
.ajustes-barra.con-cambios { border-color: var(--accent); }
.ajustes-barra.con-cambios .ajustes-cambios { color: var(--accent); font-weight: 700; }
.ajustes-barra .btn { margin-left: auto; }
.ajustes-barra .error:empty, .ajustes-barra .hint:empty { display: none; }

/* ===== Animación con propósito (revisión del 15/10/2026) ===== */
/* Las tarjetas suben solo al entrar a una pantalla, no cada vez que se repinta tras marcar algo */
.points-hero, .dash-hero, .mission-row, .streak-strip, .task-card, .rank-row, .reward-card, .feed-row { animation: none; }
.route-enter :is(.task-card, .rank-row, .feed-row) { animation: sube 0.3s ease-out both; }
/* Racha que sube: un aro que se abre y se desvanece (transform y opacidad, no sombra) */
.stat-chip.streak { position: relative; }
.stat-chip.streak.sube { animation: none; }
.stat-chip.streak.sube::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--mint); pointer-events: none; animation: racha-aro 900ms cubic-bezier(0.23, 1, 0.32, 1) 2 both; }
@keyframes racha-aro { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.1); } }
/* Movimiento al pasar el puntero solo donde hay puntero (en celular se quedaba pegado tras tocar) */
@media (hover: none), (pointer: coarse) {
  .badge.earned:hover, .task-card:hover, .reward-card:hover { transform: none; }
}
/* Enlace del ranking: respuesta al toque */
.ranking-linea { transition: transform 120ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.ranking-linea:active { transform: scale(0.98); }
/* Barra de Ajustes: el cambio de estado se nota sin saltos */
.ajustes-barra { transition: border-color 180ms ease-out; }
@media (prefers-reduced-motion: reduce) {
  .stat-chip.streak.sube::after, .route-enter :is(.task-card, .rank-row, .feed-row) { animation: none; }
  .toast.sale { transform: none; }
  .ranking-linea, .ajustes-barra { transition: none; }
}

/* ===== Usabilidad (revisión del 15/10/2026) ===== */
/* Meta de hoy en celular con el día completo: el botón de mañana va debajo, a lo ancho (antes el texto quedaba
   con una palabra por renglón) */
@media (max-width: 520px) {
  .dia-card.completo { flex-wrap: wrap; }
  .dia-card.completo .dia-main { flex: 1 1 calc(100% - 74px); }
  .dia-manana { flex: 1 1 100%; max-width: none; }
  /* Recordatorios: el texto ocupa la fila y la hora baja al renglón de abajo */
  .rec-texto { flex: 1 1 calc(100% - 34px); }
}

/* Tarea de otro día en el Calendario: dice para cuándo es en vez de ofrecer "Hecha" */
.task-para { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }

/* Hoy: puesto en el ranking y premio más cercano, uno al lado del otro (uno debajo del otro en celular) */
.lineas-hoy { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.lineas-hoy .ranking-linea { margin: 0; }

/* Rutina de gym: elegir los días que entrena */
.rutina-dias-campo { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.rutina-dias-titulo { font-size: 13px; font-weight: 600; color: var(--muted); }
.rutina-dias { display: grid; grid-template-columns: repeat(7, minmax(40px, 1fr)); gap: 4px; max-width: 460px; }
@media (max-width: 359px) { .rutina-dias { grid-template-columns: repeat(4, minmax(40px, 1fr)); } }
.rutina-dia { min-width: 40px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; }
.rutina-dia.activo { background: rgba(226, 202, 150, 0.16); border-color: var(--accent); color: var(--accent); }
.rutina-dias-pista { margin: 0; }
.rutina-editar { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .rutina-dia { transition: none; } }

/* Hoy, domingo a martes: "¿Qué días entrenas esta semana?" */
.semana-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.semana-titulo { font-family: var(--f-display); font-size: 17px; font-weight: 800; }
.semana-card .hint { margin: 0; }

/* Ingreso: el video de la entrada al club de fondo, sin sonido, con una capa oscura; la tarjeta queda encima */
.auth-wrap.con-fondo { position: relative; isolation: isolate; overflow: hidden; }
/* La imagen fija del estadio (un cuadro del mismo video) se ve al instante; el video entra encima cuando carga */
.auth-fondo { position: fixed; inset: 0; z-index: -1; background: var(--bg, #090a08) url('/fondo/ingreso-vertical.jpg') center / cover no-repeat; pointer-events: none; overflow: hidden; }
@media (min-aspect-ratio: 1/1) { .auth-fondo { background-image: url('/fondo/ingreso-horizontal.jpg'); } }
.auth-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.18); transition: opacity 800ms ease-out; }
.auth-video.listo { opacity: 1; }
.auth-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9, 10, 8, 0.25) 0%, rgba(9, 10, 8, 0.4) 55%, rgba(9, 10, 8, 0.6) 100%); }
.auth-wrap.con-fondo .auth-card { background: rgba(16, 18, 15, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgba(226, 202, 150, 0.22); }
@media (prefers-reduced-motion: reduce) { .auth-video { transition: none; } }

/* Aviso con "Deshacer" (eliminar una tarea): el botón se puede tocar aunque la zona de avisos no reciba toques */
.toast-con-accion { pointer-events: auto; }
.toast-deshacer { margin-left: auto; flex-shrink: 0; min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); background: transparent; color: var(--accent); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.toast-deshacer:hover, .toast-deshacer:focus-visible { border-color: var(--accent); }

/* Coins que se reinician a fin de mes: el aviso se distingue en ámbar */
.vence-linea { border-color: rgba(232, 163, 92, 0.45); }
.vence-linea strong, .vence-linea svg:first-child { color: #e8a35c; }

/* Miembros (administración): la lista primero, con buscador; dar acceso en su propia tarjeta */
.usuarios-vista { display: flex; flex-direction: column; gap: 16px; }
.usuarios-buscar { width: 100%; min-height: 42px; margin: 4px 0 12px; padding: 0 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-size: 15px; box-sizing: border-box; }

/* Hoy: primeros pasos de quien acaba de llegar */
.pasos-card { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.pasos-cabeza { display: flex; align-items: center; gap: 10px; }
.pasos-cabeza .hint { margin: 0; }
.pasos-ocultar { margin-left: auto !important; min-height: 40px; }
.pasos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pasos-lista li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pasos-lista li > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pasos-lista li .hint { margin: 2px 0 0; font-size: 13px; }
.pasos-lista li.hecho { opacity: 0.6; }
.pasos-lista li.hecho strong { text-decoration: line-through; }
.pasos-marca { color: var(--accent); display: inline-flex; flex-shrink: 0; }
.pasos-lista li.hecho .pasos-marca { color: var(--mint); }
.pasos-lista a.btn { text-decoration: none; }

/* ---------- Hoy en acordeones (16/10/2026) ---------- */
/* Una sección abierta a la vez: título a la izquierda, resumen a la derecha (se entiende sin abrirla) y la flecha */
.hoy-acordeones { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.hoy-acordeon { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); scroll-margin-top: 84px; }
.hoy-acordeon > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; cursor: pointer; border-radius: var(--radius); }
.hoy-acordeon > summary::-webkit-details-marker { display: none; }
.hoy-acordeon > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hoy-acordeon-titulo { flex: 1; min-width: 0; font-family: var(--f-display); font-weight: 700; font-size: 17px; color: var(--ink); }
.hoy-acordeon-resumen { color: var(--muted); font-size: 13.5px; text-align: right; }
.hoy-acordeon > summary svg { flex-shrink: 0; color: var(--accent-2); transition: transform 0.2s ease; }
.hoy-acordeon[open] > summary svg { transform: rotate(180deg); }
.hoy-acordeon[open] > summary .hoy-acordeon-titulo { color: var(--accent); }
.hoy-acordeon-cuerpo { display: flex; flex-direction: column; gap: 12px; padding: 0 14px 16px; }
.hoy-acordeon[open] .hoy-acordeon-cuerpo { animation: hoy-abre 0.2s ease; }
@keyframes hoy-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hoy-acordeon[open] .hoy-acordeon-cuerpo { animation: none; } .hoy-acordeon > summary svg { transition: none; } }
/* Lo de adentro sin doble borde ni márgenes de cuando eran tarjetas sueltas */
.hoy-acordeon-cuerpo > .day-groups, .hoy-acordeon-cuerpo > .card { margin: 0; }
.hoy-acordeon-cuerpo > .mover-detalle { margin: 0; background: var(--surface-2); }
.hoy-acordeon-cuerpo .stat-pair { margin: 0; }
.hoy-acordeon-cuerpo .reto-list, .hoy-acordeon-cuerpo .mission-list { margin: 0; }
.hoy-acordeon-cuerpo .pasos-ocultar { align-self: flex-start; margin-left: 0 !important; }
.hoy-semana { margin: 0; }
.hoy-ver-todos { align-self: flex-start; min-height: 40px; display: inline-flex; align-items: center; }
.hoy-subtitulo { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); }
/* Las tareas adentro de "Tu día" sin otro marco alrededor, y en celulares angostos menos margen para que el título se lea */
.hoy-acordeon-cuerpo > .day-groups { border: 0; background: transparent; border-radius: 12px; }
@media (max-width: 380px) {
  .hoy-acordeon > summary { padding: 0 14px; }
  .hoy-acordeon-cuerpo { padding: 0 6px 12px; }
}

/* ---------- Tarjetas con la receta del premio mayor (decisión de Esteban, 16/10/2026) ---------- */
/* Sobre el negro del fondo, cada tarjeta lleva un baño dorado que sale desde arriba, un negro un poco más claro y el
   borde dorado marcado, para que nada se vea plano. Lo que va dentro de una tarjeta, más suave, para no competir. */
.card, .dia-card, .scoop-card, .rec-aviso, .hoy-acordeon, .stat-chip, .ins-proxima, .reto-row, .mission-row, .reward-card, .tribu-post, .rank-row, .profile-stat, .mover-semana, .fun-tarjeta .fun-portada {
  background: radial-gradient(120% 70% at 50% 0%, rgba(226, 202, 150, 0.16), transparent 70%), var(--surface-2);
  border: 1px solid var(--line-strong);
}
.ranking-linea, .coin-pill { background: radial-gradient(120% 120% at 50% 0%, rgba(226, 202, 150, 0.14), transparent 75%), var(--surface-2); border-color: var(--line-strong); }
.hoy-acordeon-cuerpo .card, .hoy-acordeon-cuerpo .stat-chip, .hoy-acordeon-cuerpo .ins-proxima, .hoy-acordeon-cuerpo .reto-row, .hoy-acordeon-cuerpo .mission-row, .pasos-lista li, .day-groups .task-card {
  background: linear-gradient(180deg, rgba(226, 202, 150, 0.07), rgba(226, 202, 150, 0.015));
  border-color: rgba(198, 165, 106, 0.28);
}

/* ---------- Recorrido de bienvenida (tour.js) ---------- */
/* Todo el club queda oscuro menos lo que se explica: una "luz" del tamaño del elemento con una sombra enorme
   alrededor. La burbuja lleva la receta del premio mayor. Los dos se mueven suave entre pasos. */
.tour-capa { position: fixed; inset: 0; z-index: 1000; }
.tour-luz { position: fixed; pointer-events: none; box-shadow: 0 0 0 200vmax rgba(4, 5, 4, 0.8), 0 0 0 2px var(--accent), 0 0 26px 6px rgba(226, 202, 150, 0.35); transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease; }
.tour-burbuja { position: fixed; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 14px; border-radius: 18px; background: radial-gradient(120% 70% at 50% 0%, rgba(226, 202, 150, 0.18), transparent 70%), var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 22px 44px -14px rgba(0, 0, 0, 0.95); transition: top 0.3s ease, left 0.3s ease; animation: tour-entra 0.22s ease; }
@keyframes tour-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tour-arriba { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-cuenta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.tour-puntos { display: flex; align-items: center; gap: 5px; }
.tour-puntos span { width: 6px; height: 6px; border-radius: 3px; background: rgba(226, 202, 150, 0.3); transition: width 0.2s ease, background 0.2s ease; }
.tour-puntos span.activo { width: 16px; background: var(--accent); }
.tour-titulo { font-family: var(--f-display); font-size: 19px; font-weight: 800; color: var(--ink); }
.tour-texto { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.tour-nota { margin: 0; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tour-botones { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.tour-botones .btn { min-height: 44px; padding: 0 18px; }
/* Saltar a la izquierda; Atrás y Siguiente juntos a la derecha */
.tour-botones .btn-quiet { margin-right: auto; padding: 0 10px; }
@media (max-width: 380px) { .tour-botones .btn { padding: 0 14px; } .tour-botones .btn-quiet { padding: 0 8px; } }
/* "Siguiente" es la acción de la burbuja: dorado sólido (lo de atrás queda oscuro, así que no compite con otro) */
.tour-botones .btn-primary, .tour-botones .btn-primary:hover, .tour-botones .btn-primary:focus, .tour-botones .btn-primary:active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.tour-botones .btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .tour-luz, .tour-burbuja, .tour-puntos span { transition: none; animation: none; } }
/* En el menú */
.sidebar-tour { margin-bottom: 8px; }

/* ---------- Recordatorios ordenados (16/10/2026) ---------- */
/* Antes, en celular, la casilla quedaba sola en un renglón y el texto debajo. Ahora: casilla y texto en la misma
   fila, y la hora debajo alineada con el texto. La lista lleva el estilo de tarjeta del club. */
.rec-lista { background: radial-gradient(120% 70% at 50% 0%, rgba(226, 202, 150, 0.16), transparent 70%), var(--surface-2); border-color: var(--line-strong); }
.rec-fila { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 10px; padding: 14px 16px; }
.rec-fila input[type='checkbox'] { width: 22px; height: 22px; min-height: 0; margin: 0; padding: 0; grid-column: 1; }
.rec-texto { grid-column: 2; }
.rec-texto .hint { margin: 2px 0 0; }
.rec-fila input[type='time'] { grid-column: 3; width: auto; }
@media (max-width: 520px) {
  .rec-fila { grid-template-columns: 24px minmax(0, 1fr); }
  .rec-texto { flex: none; }
  .rec-fila input[type='time'] { grid-column: 2; margin-left: 0; justify-self: start; }
}

/* ===== Lanzamiento del club (auditoría del 21/10/2026) ===== */
/* Botones de al menos 44 px para tocar con el dedo */
.auth-switch button { min-height: 44px; padding: 0 6px; }
.fv-redondo { width: 44px; height: 44px; }
.fun-chip, .toast-deshacer, .pasos-ocultar, .hoy-ver-todos { min-height: 44px; }
.fun-ver-todos { display: inline-flex; align-items: center; min-height: 44px; }
/* El filtro activo de fundadores no parece un botón principal (un solo dorado sólido por pantalla) */
.fun-chip[aria-pressed='true'] { background: rgba(226, 202, 150, 0.12); border-color: var(--accent); color: var(--accent); }
/* El texto del mapa no se corta en pantallas de 360 px */
.mapa-accion { white-space: normal; max-width: calc(100% - 28px); text-align: center; }
/* Se ve en qué campo se está escribiendo */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; box-shadow: none; }
/* La franja de la semana se lee mejor */
.week-day.rest { opacity: 0.7; }
@media (max-width: 420px) { .week-day { font-size: 11px; } }

/* Casillas de autorización (mayoría de edad, datos de salud) */
.casilla { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 6px 0; color: var(--ink); font-size: 14px; line-height: 1.45; cursor: pointer; }
.casilla input { flex: none; width: 22px; height: 22px; margin-top: 1px; accent-color: var(--accent); }
/* Cómo te ven los demás */
.chips-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-opcion { min-height: 44px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font-size: 14px; cursor: pointer; }
.chip-opcion[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); background: rgba(226, 202, 150, 0.12); font-weight: 700; }
/* Acciones que borran algo: en rojo, sin parecer el botón principal */
.btn-peligro { color: var(--danger) !important; }
/* Una pantalla que no cargó: el error y el botón para reintentar */
.estado-error { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 0; }
/* Código de quien te invitó */
.referidos-invito { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.referidos-invito input { flex: 1; min-width: 0; min-height: 44px; text-transform: uppercase; }
/* Reportes de la Tribu (panel) */
.reporte-fila { align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.reporte-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reporte-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
/* Dentro de un formulario apilado, la casilla va al lado de su texto */
.stack-form .casilla { flex-direction: row; align-items: flex-start; gap: 12px; font-weight: 400; font-size: 13.5px; color: var(--ink); }
.stack-form .casilla input { width: 22px; height: 22px; min-height: 0; padding: 0; flex: none; }
.referidos-invito input::placeholder { text-transform: none; }

/* ===== El club en el día a día (21/10/2026): agenda de la semana en Hoy y el calendario a un toque ===== */
.topbar-acciones { display: flex; align-items: center; gap: 4px; }
.topbar-calendario { color: var(--accent); min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; }
.agenda-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 14px 14px 12px; }
.agenda-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.agenda-ver { font-size: 13px; min-height: var(--tap); display: inline-flex; align-items: center; }
.agenda-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.agenda-dia { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 64px; padding: 8px 0 7px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.agenda-dia:active { transform: scale(0.96); }
.agenda-dia:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agenda-dia-nombre { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.agenda-dia-num { font-size: 17px; line-height: 1; font-weight: 700; }
.agenda-dia.hoy { border-color: var(--accent); background: rgba(226, 202, 150, 0.1); }
.agenda-dia.hoy .agenda-dia-nombre { color: var(--accent); }
.agenda-puntos { display: flex; gap: 3px; min-height: 6px; }
.agenda-puntos i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.agenda-puntos i.hecho { background: var(--line-strong); }
.agenda-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.agenda-proxima { margin: 0; font-size: 13.5px; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.agenda-agendar { flex: none; min-height: var(--tap); }
/* En celulares angostos la tarjeta usa un poco más del ancho para que cada día mida al menos 44 px */
@media (max-width: 420px) {
  .agenda-card { margin-inline: -10px; padding: 12px 8px 10px; }
  .agenda-cabeza, .agenda-pie { padding-inline: 6px; }
  .agenda-dias { gap: 2px; }
  .agenda-dia { min-height: 60px; border-radius: 12px; }
  .agenda-dia-num { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .agenda-dia { transition: none; } .agenda-dia:active { transform: none; } }

/* ===== Se siente como una app (21/10/2026, Esteban: "se siente muy IA, hazla más dinámica") ===== */
/* Sin el recuadro gris que pinta el celular al tocar (la señal típica de "página web"), sin la espera del doble
   toque y sin seleccionar el texto de un botón al dejarlo presionado */
html { -webkit-tap-highlight-color: transparent; }
:is(.btn, .tab, .chip, .chip-opcion, .sel-btn, .agenda-dia, .nav-link, .tribu-fuego, .hoy-acordeon summary, .rutina-dia) { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.tab { -webkit-touch-callout: none; }

/* Cambiar de pantalla: la de antes se corre y se atenúa en el acto (mientras carga la nueva); la nueva entra
   deslizándose desde el lado al que se va (--paso: 1 hacia adelante, -1 hacia atrás) */
.main-area { overflow-x: clip; }
.content { --paso: 1; }
.content.saliendo { opacity: 0.45; transform: translateX(calc(var(--paso) * -16px)); transition: opacity 0.12s ease-out, transform 0.12s ease-out; pointer-events: none; }
.content.route-enter.entrando { animation: pantalla-entra 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes pantalla-entra { from { opacity: 0; transform: translateX(calc(var(--paso) * 28px)); } }
/* Si la pantalla tarda más de un momento en cargar, una barra delgada arriba lo dice */
body.cargando-ruta::before { content: ''; position: fixed; z-index: 60; top: env(safe-area-inset-top, 0px); left: 0; height: 2px; width: 40%; background: var(--accent); border-radius: 0 2px 2px 0; animation: ruta-carga 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes ruta-carga { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* Botones: se hunden en el instante del toque y vuelven con un pequeño rebote */
.btn, .chip, .chip-opcion, .sel-btn, .agenda-dia, .tribu-fuego, .rutina-dia { transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, opacity 0.15s ease; }
:is(.btn, .chip, .chip-opcion, .sel-btn, .rutina-dia):active:not(:disabled) { transform: scale(0.95); transition-duration: 0.06s; }
.agenda-dia:active, .tribu-fuego:active { transform: scale(0.92); transition-duration: 0.06s; }
.btn-block:active:not(:disabled) { transform: scale(0.98); }
.nav-link { transition: background 0.15s ease, color 0.15s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-link:active { transform: scale(0.97); transition-duration: 0.06s; }
/* Tarjetas que se abren o se tocan: un leve hundido */
.hoy-acordeon summary { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hoy-acordeon summary:active { transform: scale(0.985); transition-duration: 0.06s; }

/* Barra de abajo: la pestaña activa lleva su cápsula dorada, que aparece con rebote al cambiar de pestaña, y el
   ícono da un saltito. Al presionar cualquier pestaña, se hunde. */
.tab { position: relative; isolation: isolate; transition: color 0.2s ease; }
.tab svg { position: relative; z-index: 1; transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab::before { content: ''; position: absolute; z-index: 0; top: 4px; left: 50%; width: 56px; height: 30px; margin-left: -28px; border-radius: 15px; background: rgba(226, 202, 150, 0.16); opacity: 0; transform: scaleX(0.4); transition: opacity 0.2s ease, transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab.active::before { opacity: 1; transform: scaleX(1); }
.tab.active.recien::before { animation: capsula 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab.active.recien svg { animation: icono-salta 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.tab:active svg { transform: scale(0.86); transition-duration: 0.06s; }
@keyframes capsula { from { opacity: 0; transform: scaleX(0.3); } }
@keyframes icono-salta { 0% { transform: scale(0.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .content.saliendo { transform: none; transition: none; }
  .content.route-enter.entrando, body.cargando-ruta::before, .tab.active.recien::before, .tab.active.recien svg { animation: none; }
  :is(.btn, .chip, .chip-opcion, .sel-btn, .agenda-dia, .tribu-fuego, .rutina-dia, .nav-link, .hoy-acordeon summary, .tab svg, .tab::before) { transition: none; }
  :is(.btn, .chip, .chip-opcion, .sel-btn, .agenda-dia, .tribu-fuego, .rutina-dia, .nav-link, .hoy-acordeon summary):active, .tab:active svg { transform: none; }
}

/* ----- Segunda tanda: lo que pasa responde, nada se repite sin motivo ----- */
/* Estas tarjetas volvían a "subir" en cada repintado (al marcar una tarea, todas se animaban otra vez): ahora la
   entrada la da la pantalla completa al navegar */
.points-hero, .dash-hero, .mission-row, .streak-strip, .task-card, .rank-row, .reward-card, .feed-row { animation: none; }
/* La tarea que acabas de completar: rebota y el chulo aparece girando */
.task-card.done.recien { animation: tarea-hecha 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.task-card.done.recien .task-done-mark svg { animation: chulo 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes tarea-hecha { 0% { transform: scale(0.96); opacity: 1; } 45% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes chulo { 0% { transform: scale(0) rotate(-35deg); } 70% { transform: scale(1.3) rotate(6deg); } 100% { transform: none; } }
/* "+10" que sube flotando desde los coins */
.coins-flota { position: fixed; z-index: 950; pointer-events: none; font-weight: 800; font-size: 16px; color: var(--accent); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7); animation: coins-sube 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes coins-sube { 0% { opacity: 0; transform: translate(-50%, 6px) scale(0.7); } 18% { opacity: 1; transform: translate(-50%, -6px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
/* La barra de arriba del celular toma sombra al bajar */
.topbar-mobile { transition: box-shadow 0.2s ease, background-color 0.2s ease; }
.topbar-mobile.con-sombra { box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.95); }
/* Ventanas en el celular: suben desde abajo como una hoja, con su agarradera */
@media (max-width: 480px) {
  .dialog-overlay { padding: 0; }
  .dialog { width: 100%; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); position: relative; animation: hoja-sube 0.34s cubic-bezier(0.16, 1, 0.3, 1); }
  .dialog::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: var(--line-strong); }
  .dialog-overlay.closing .dialog { transform: translateY(30px); transition: transform 0.14s ease-in; }
}
@keyframes hoja-sube { from { transform: translateY(100%); } }
/* Las secciones de Hoy se abren y se cierran deslizando (en los navegadores que ya lo permiten; en los demás, igual que antes) */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .hoy-acordeon::details-content { height: 0; overflow: clip; transition: height 0.32s cubic-bezier(0.16, 1, 0.3, 1), content-visibility 0.32s allow-discrete; }
  .hoy-acordeon[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .task-card.done.recien, .task-card.done.recien .task-done-mark svg, .coins-flota, .dialog { animation: none; }
  .hoy-acordeon::details-content { transition: none; }
}

/* ===== El Pulso: cambiar de pantalla como un latido (21/10/2026, Esteban: "hazlo más cool y único") =====
   La pantalla nueva se revela en un círculo que crece desde donde se tocó (--px, --py hasta --pr), con un anillo
   dorado montado en el borde y su eco un instante después (tum-tum). La de antes se hunde y se apaga debajo. Las
   barras de arriba y de abajo y el menú lateral no se mueven: solo cambia el contenido. */
.tabbar { view-transition-name: barra-tabs; }
.topbar-mobile { view-transition-name: barra-arriba; }
.sidebar { view-transition-name: menu-lateral; }
::view-transition-group(barra-tabs), ::view-transition-group(barra-arriba), ::view-transition-group(menu-lateral) { animation: none; z-index: 3; }
::view-transition-old(barra-tabs), ::view-transition-old(barra-arriba), ::view-transition-old(menu-lateral) { display: none; }
::view-transition-new(barra-tabs), ::view-transition-new(barra-arriba), ::view-transition-new(menu-lateral) { animation: none; }
::view-transition-group(root) { animation-duration: 0.56s; }
::view-transition-old(root) { animation: pulso-sale 0.56s cubic-bezier(0.4, 0, 0.2, 1) both; transform-origin: var(--px) var(--py); }
::view-transition-new(root) { animation: pulso-entra 0.56s cubic-bezier(0.65, 0, 0.2, 1) both; }
@keyframes pulso-sale { to { transform: scale(0.93); filter: brightness(0.35) saturate(0.5); } }
@keyframes pulso-entra { from { clip-path: circle(0px at var(--px) var(--py)); } to { clip-path: circle(var(--pr) at var(--px) var(--py)); } }
/* El anillo viaja con el borde del círculo (misma curva y duración); el eco va detrás, más tenue */
/* Los anillos se dibujan completos (solo existen mientras dura la transición) y se anima su imagen */
.pulso-anillo { position: fixed; z-index: 70; pointer-events: none; border-radius: 50%; border: 2px solid var(--accent); box-shadow: 0 0 22px 2px rgba(226, 202, 150, 0.45), inset 0 0 22px 2px rgba(226, 202, 150, 0.25); }
.pulso-anillo.eco { border-width: 1px; box-shadow: 0 0 14px 1px rgba(226, 202, 150, 0.3); }
::view-transition-group(pulso-1), ::view-transition-group(pulso-2) { animation: none; z-index: 2; }
::view-transition-old(pulso-1), ::view-transition-old(pulso-2) { display: none; }
::view-transition-new(pulso-1) { animation: pulso-anillo 0.56s cubic-bezier(0.65, 0, 0.2, 1) both; }
::view-transition-new(pulso-2) { animation: pulso-eco 0.66s 0.09s cubic-bezier(0.65, 0, 0.2, 1) both; }
@keyframes pulso-anillo { 0% { transform: scale(0); opacity: 1; } 75% { opacity: 0.9; } 100% { transform: scale(1); opacity: 0; } }
@keyframes pulso-eco { 0% { transform: scale(0); opacity: 0.55; } 100% { transform: scale(0.86); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .pulso-anillo { display: none; }
}
/* El latido bajo el dedo, en el instante del toque: un punto dorado que late dos veces (tum-tum) y se abre */
.pulso-toque { position: fixed; z-index: 75; pointer-events: none; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 2px solid var(--accent); background: radial-gradient(circle, rgba(226, 202, 150, 0.35), transparent 65%); animation: pulso-toque 0.62s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes pulso-toque { 0% { transform: scale(0.2); opacity: 1; } 22% { transform: scale(0.55); } 34% { transform: scale(0.45); } 56% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
/* Con el Pulso, la pantalla de antes solo se apaga mientras carga la nueva (no se corre de lado) */
.con-pulso .content.saliendo { transform: none; opacity: 0.55; }
@media (prefers-reduced-motion: reduce) { .pulso-toque { display: none; } }

/* ===== Tribu: publicar y comentar (22/10/2026) ===== */
.tribu-publicar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 14px; border-radius: 20px; border-color: rgba(198, 165, 106, 0.28); }
.tribu-pub-fila { display: flex; align-items: flex-start; gap: 10px; }
.tribu-pub-fila textarea { flex: 1; min-width: 0; min-height: 48px; resize: none; padding: 12px 14px; font: inherit; font-size: 16px; line-height: 1.45; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; transition: border-color 0.15s ease; }
.tribu-pub-fila textarea:focus { outline: none; border-color: var(--accent); }
.tribu-pub-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tribu-pub-acciones .btn-primary { margin-left: auto; min-height: var(--tap); padding: 0 22px; }
.tribu-pub-camara { display: inline-flex; align-items: center; gap: 6px; }
.tribu-pub-para { min-height: var(--tap); max-width: 100%; padding: 0 10px; border-radius: 12px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); font-size: 14px; }
.tribu-cuenta { font-size: 12px; }
.tribu-pub-foto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tribu-pub-foto:empty { display: none; }
.tribu-pub-foto img { max-width: 100%; max-height: 260px; border-radius: 14px; object-fit: cover; }
/* La publicación escrita: el texto es el protagonista */
.tribu-texto { margin: 0; font-size: 16px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
/* El campo para comentar está siempre debajo de cada publicación */
.tribu-comentarios-zona { display: flex; flex-direction: column; gap: 10px; }
.tribu-comentarios-zona .tribu-comentarios { padding-top: 10px; }
.tribu-comentar-form { padding-top: 10px; border-top: 1px solid rgba(198, 165, 106, 0.12); }
.tribu-comentarios + .tribu-comentar-form { padding-top: 0; border-top: 0; }
.tribu-comentar-form input { min-height: 44px; border-radius: 22px; padding: 0 14px; }
/* Retirar una publicación: se encoge y desaparece en su sitio */
.tribu-post { transition: opacity 0.24s ease, transform 0.24s ease; }
.tribu-post.saliendo { opacity: 0; transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .tribu-post { transition: none; } }

/* ===== Tribu con más carácter (22/10/2026, Esteban: "ese diseño está re suave, mejóralo") ===== */
/* Publicar: tarjeta con brillo y borde dorado, avatar con aro y "Publicar" dorado sólido */
.tribu-publicar { position: relative; gap: 12px; padding: 16px; border: 1px solid rgba(226, 202, 150, 0.5); background: radial-gradient(130% 90% at 0% 0%, rgba(226, 202, 150, 0.2), transparent 55%), linear-gradient(180deg, #16150f, #0f100d); box-shadow: 0 22px 44px -26px rgba(226, 202, 150, 0.55), inset 0 1px 0 rgba(255, 240, 200, 0.08); }
.tribu-pub-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tribu-pub-cabeza .scoop-kicker { color: var(--accent); font-weight: 700; }
.tribu-pub-fila textarea { background: #0a0b09; border-color: rgba(226, 202, 150, 0.32); }
.tribu-pub-fila textarea::placeholder { color: #a39b8b; }
.tribu-pub-fila textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 202, 150, 0.16); }
.tribu .tribu-avatar { background: linear-gradient(145deg, var(--accent), #b8964f); color: #171400; font-weight: 800; box-shadow: 0 0 0 2px #0f100d, 0 0 0 3.5px rgba(226, 202, 150, 0.55); }
.tribu-pub-camara { border: 1px solid rgba(226, 202, 150, 0.4); border-radius: 999px; color: var(--accent); padding: 0 14px; }
.tribu-pub-para { border-color: rgba(226, 202, 150, 0.4); border-radius: 999px; }
.tribu-pub-acciones .btn-primary:not(:disabled) { background: linear-gradient(135deg, #f1dcab, var(--accent) 45%, #c9a866); color: #171400; border-color: transparent; box-shadow: 0 10px 22px -12px rgba(226, 202, 150, 0.8); }
.tribu-pub-acciones .btn-primary:disabled { background: transparent; color: #8b8373; border: 1px solid rgba(226, 202, 150, 0.25); opacity: 1; }

/* Publicaciones: más contraste y jerarquía */
.tribu-post { gap: 12px; padding: 16px; background: linear-gradient(180deg, #151510, #10110e); border: 1px solid rgba(226, 202, 150, 0.26); box-shadow: 0 16px 36px -28px rgba(0, 0, 0, 0.95); }
.tribu-post.escrita { border-color: rgba(226, 202, 150, 0.38); }
.tribu-quien strong { font-size: 15px; color: #f7f3eb; }
.tribu-texto { font-size: 17px; line-height: 1.55; color: #f7f3eb; }
.tribu-titulo { font-size: 16px; color: #f7f3eb; }
/* Barra de acciones: Fuego y Comentar como botones con ícono; el Fuego dado se llena de dorado y brilla */
.tribu-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(226, 202, 150, 0.14); }
.tribu-pie .tribu-fuego, .tribu-pie .tribu-comentar { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); padding: 0 16px; border-radius: 999px; border: 1px solid rgba(226, 202, 150, 0.35); background: rgba(226, 202, 150, 0.06); color: #f1e6cc; font-weight: 700; }
.tribu-pie .tribu-fuego svg { color: var(--accent); }
.tribu-pie .tribu-fuego.dado { background: linear-gradient(135deg, #f1dcab, var(--accent) 50%, #c9a866); color: #171400; border-color: transparent; box-shadow: 0 0 0 3px rgba(226, 202, 150, 0.18), 0 10px 24px -10px rgba(226, 202, 150, 0.75); }
.tribu-pie .tribu-fuego.dado svg { color: #171400; fill: currentColor; }
.tribu-pie .tribu-comentar[aria-expanded='true'] { border-color: var(--accent); background: rgba(226, 202, 150, 0.14); }
.tribu-pie .tribu-comentar svg { color: var(--accent); }
.tribu-pie .tribu-reportar, .tribu-pie .tribu-retirar { margin-left: auto; color: #9d968a; }
.tribu-pie .tribu-sello:empty { display: none; }

/* Comentarios en burbujas, con el nombre en dorado */
.tribu-comentarios li { align-items: flex-start; }
.tribu-comentario { display: flex; flex-direction: column; gap: 3px; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: #1b1b15; border: 1px solid rgba(226, 202, 150, 0.14); max-width: 100%; }
.tribu-comentario-cabeza strong { color: var(--accent); font-size: 13.5px; }
.tribu-comentario > span:last-child { color: #f2ede2; font-size: 14.5px; line-height: 1.45; }
.tribu-comentar-form input { background: #0a0b09; border: 1px solid rgba(226, 202, 150, 0.3); color: var(--ink); }
.tribu-comentar-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 202, 150, 0.14); }
.tribu-comentar-form .btn { border-radius: 999px; border-color: rgba(226, 202, 150, 0.45); color: var(--accent); font-weight: 700; }

/* A quién va una publicación: la Tribu y varios grupos a la vez (22/10/2026) */
.tribu-pub-para { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-basis: 100%; order: -1; padding: 0; border: 0; background: none; min-height: 0; }
.tribu-pub-para .hint { margin-right: 2px; }
.tribu-para-op { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 999px; border: 1px solid rgba(226, 202, 150, 0.3); background: transparent; color: #cfc6b3; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); touch-action: manipulation; }
.tribu-para-op:active { transform: scale(0.94); transition-duration: 0.06s; }
.tribu-para-op[aria-pressed='true'] { background: rgba(226, 202, 150, 0.16); border-color: var(--accent); color: var(--accent); }
.tribu-para-op svg { flex: none; }
.compartir-op[aria-pressed] { position: relative; padding-right: 44px; }
.compartir-op[aria-pressed]::after { content: ''; position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; border: 2px solid rgba(226, 202, 150, 0.45); }
.compartir-op[aria-pressed='true'] { border-color: var(--accent); background: rgba(226, 202, 150, 0.1); }
.compartir-op[aria-pressed='true']::after { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171400' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .tribu-para-op { transition: none; } .tribu-para-op:active { transform: none; } }

/* ---------- Creadores y foto de perfil (22/10/2026) ---------- */
/* Foto de perfil: la imagen llena el círculo que antes tenía las iniciales */
.con-foto { overflow: hidden; padding: 0; }
.con-foto img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tribu-avatar-boton { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; flex-shrink: 0; min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.tribu-avatar-boton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tribu-avatar.mini { width: 30px; height: 30px; font-size: 11px; align-self: flex-start; margin-top: 2px; }
.tribu-comentarios li:has(> .tribu-avatar.mini) { display: flex; gap: 10px; align-items: flex-start; }
/* Sello de los creadores: chulo dorado de verificado y su etiqueta */
.chulo-creador { display: inline-block; vertical-align: -3px; margin-left: 5px; flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(226, 202, 150, 0.55)); }
.etiqueta-creador { display: inline-flex; align-items: center; width: fit-content; margin: 3px 0 2px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #171400; background: linear-gradient(100deg, #b8934f, #efdcae 48%, #c9a564); box-shadow: 0 0 14px rgba(226, 202, 150, 0.3); white-space: nowrap; }
.tribu-quien { display: flex; flex-direction: column; min-width: 0; }
.tribu-avatar.creador, .profile-avatar.creador, .rank-avatar.creador { box-shadow: 0 0 0 2px #0f100d, 0 0 0 4px #e2ca96, 0 0 22px rgba(226, 202, 150, 0.55); }
/* Ranking: círculo de cada persona y la fila de los creadores (sin número de puesto) */
.rank-avatar { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #171400; background: linear-gradient(145deg, var(--accent), #b8964f); }
.rank-name { display: flex; flex-direction: column; gap: 1px; }
.rank-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name .etiqueta-creador { margin: 0; font-size: 10px; padding: 1px 7px; }
.rank-pos-creador { display: grid; place-items: center; }
.rank-pos-creador .chulo-creador { margin: 0; }
.rank-row.creador { border-color: rgba(226, 202, 150, 0.55); background: linear-gradient(135deg, rgba(226, 202, 150, 0.1), rgba(226, 202, 150, 0.02)); }
/* Perfil: la foto y sus botones */
.profile-avatar { width: 72px; height: 72px; }
.profile-name { display: flex; align-items: center; flex-wrap: wrap; }
.profile-foto { margin: -4px 0 16px; display: flex; flex-direction: column; gap: 6px; }
.profile-foto-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-foto-botones .btn { min-height: 44px; }
.tribu-comentarios li:has(> .tribu-avatar.mini) > .tribu-comentario { flex: 1; }
.reporte-foto { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); margin: 4px 0; }

/* Guía para guardar el club como app (22/10/2026) */
.guia-instalar .dialog { text-align: left; }
.guia-icono { width: 64px; height: 64px; border-radius: 16px; display: block; margin-bottom: 4px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
.guia-pasos { list-style: none; margin: 14px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guia-paso { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; color: var(--ink); }
.guia-paso svg { vertical-align: -5px; color: var(--accent); }
.guia-num { flex: 0 0 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #171400; background: var(--accent); }
.guia-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.guia-acciones .btn { min-height: 48px; width: 100%; }

/* ===== Hoy reorganizado (22/10/2026, Esteban: "ver el calendario un poco más grande") =====
   La agenda es el centro: la semana en grande y, debajo, Tu día con el campo para agendar. Racha y Retos van en dos
   tarjetas lado a lado; la que se abre ocupa todo el ancho. */
.agenda-dia { min-height: 78px; gap: 5px; padding: 10px 0 9px; }
.agenda-dia-num { font-size: 22px; }
.agenda-hoy { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.agenda-hoy-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agenda-hoy-cabeza h2 { margin: 0; font-size: 18px; }
.agenda-hoy .day-groups { margin: 0; }
.agenda-hoy-vacio { margin: 0; }
.hoy-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hoy-tarjetas > .hoy-acordeon[open] { grid-column: 1 / -1; }
.hoy-tarjetas > .hoy-acordeon:only-child { grid-column: 1 / -1; }
.hoy-tarjetas > .hoy-acordeon:not([open]) > summary { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 84px; padding: 14px 16px; }
.hoy-tarjetas > .hoy-acordeon:not([open]) > summary svg { display: none; }
.hoy-tarjetas > .hoy-acordeon:not([open]) .hoy-acordeon-titulo { font-size: 15px; }
.hoy-tarjetas > .hoy-acordeon:not([open]) .hoy-acordeon-resumen { margin-left: 0; color: var(--accent); font-weight: 700; font-size: 15px; }
@media (max-width: 380px) { .agenda-dia { min-height: 70px; } .agenda-dia-num { font-size: 19px; } }
/* Calendario: lo agendado arriba y el campo para agendar abajo */
.cal-agendar { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.cal-agendar .hoy-subtitulo { margin-top: 0; }
.hoy-tarjetas + .hoy-acordeon { margin-top: 12px; }

/* Hoy con lo justo (22/10/2026): calendario de mes normal y tres tarjetas pequeñas */
.mini-cal { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 16px 14px 14px; }
.mini-cal-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 4px; }
.mini-cal-cabeza h2 { margin: 0; font-size: 18px; }
.mini-cal-dow, .mini-cal-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.mini-cal-dow span { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.mini-cal-celda { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.mini-cal-celda.vacia { cursor: default; }
.mini-cal-celda.pasado { color: var(--muted); font-weight: 500; }
.mini-cal-celda.hoy { border-color: var(--accent); background: rgba(226, 202, 150, 0.12); color: var(--accent); font-weight: 800; }
.mini-cal-celda:active:not(.vacia) { background: var(--surface-2); }
.mini-cal-punto { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.mini-cal-punto.hecho { background: var(--mint); }
.mini-cal-hoy { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; padding: 12px 4px 0; border-top: 1px solid var(--line); }
.mini-cal-hoy .hint { margin: 0; }
.mini-cal-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mini-cal-lista li { display: flex; gap: 12px; align-items: baseline; font-size: 15px; min-width: 0; }
.mini-cal-lista li.hecha .mini-cal-titulo { text-decoration: line-through; color: var(--muted); }
.mini-cal-hora { flex: 0 0 72px; color: var(--accent); font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.mini-cal-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-cal-hoy .agenda-agendar { align-self: flex-start; min-height: 44px; }
.hoy-tarjetas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.hoy-tarjetas > .hoy-acordeon:not([open]) > summary { min-height: 76px; padding: 12px; }
.hoy-tarjetas > .hoy-acordeon:not([open]) .hoy-acordeon-titulo { font-size: 14px; }
.hoy-tarjetas > .hoy-acordeon:not([open]) .hoy-acordeon-resumen { font-size: 14px; text-align: left; }
@media (max-width: 400px) {
  .mini-cal { margin-inline: -10px; padding: 14px 8px 12px; }
  .mini-cal-dow, .mini-cal-grilla { gap: 2px; }
}
/* Las tarjetas cerradas no ocupan nada por dentro (su contenido no se acomoda en el ancho de la tarjeta) */
.hoy-tarjetas > .hoy-acordeon:not([open])::details-content { display: none; }
.hoy-tarjetas > .hoy-acordeon:not([open]) > .hoy-acordeon-cuerpo { display: none; }