/*
 * Paquete W (2026-10-12): área de cuenta reorganizada. Barra rápida, tarjetas de saldo, movimientos, formularios.
 * Colores: solo variables del tema (--pub-glob-cuenta-*, --b-*) y neutros (blanco, sombras). Las variables las publica
 * public/branding.css.php en :root; los valores de respaldo de abajo son los mismos por defecto (por si la hoja del tema
 * no cargara).
 */
/* La letra de la cuenta con nombre propio, para que el menú lateral se vea igual también en las páginas públicas (allí
   "Hartwell Regular" apunta a un archivo que no existe, Hartwell_Alt_Regular.woff, y no carga). */
@font-face { font-family: 'CW Hartwell'; src: url('/public/fonts/Hartwell_Regular.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'CW Hartwell'; src: url('/public/fonts/Hartwell_Alt_Bold.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
  --cw-barra-alto: 64px;
  --cw-barra-bg: var(--pub-glob-cuenta-barra-bg, var(--b-primary));
  --cw-barra-text: var(--pub-glob-cuenta-barra-text, rgba(255, 255, 255, .8));
  --cw-barra-activo: var(--pub-glob-cuenta-barra-activo, var(--b-accent));
  --cw-centro-bg: var(--pub-glob-cuenta-barra-centro-bg, var(--b-accent));
  --cw-centro-text: var(--pub-glob-cuenta-barra-centro-text, var(--cw-titulo));
  --cw-saldo-bg: var(--pub-glob-cuenta-saldo-bg, var(--b-primary));
  --cw-saldo-text: var(--pub-glob-cuenta-saldo-text, #fff);
  --cw-saldo-sub: var(--pub-glob-cuenta-saldo-sub, rgba(255, 255, 255, .8));
  --cw-titulo: var(--pub-glob-cuenta-titulo, var(--bs-body-color));
  --cw-suave: var(--pub-glob-cuenta-texto-suave, var(--bs-secondary-color));
  --cw-borde: var(--pub-glob-cuenta-borde, var(--bs-border-color));
  --cw-suave-bg: var(--pub-glob-cuenta-suave-bg, var(--b-secondary));
  --cw-entra: var(--pub-glob-cuenta-entra, var(--bs-success));
  --cw-sale: var(--pub-glob-cuenta-sale, var(--bs-danger));
}

/* ---------------- Barra rápida (teléfono y tablet) ---------------- */
.cuenta-barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  height: calc(var(--cw-barra-alto) + env(safe-area-inset-bottom));
  padding: 0 4px env(safe-area-inset-bottom);
  background: var(--cw-barra-bg);
  display: flex; justify-content: space-around; align-items: stretch;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
.cuenta-barra-item {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--cw-barra-text) !important; text-decoration: none !important; font-size: 12px; font-weight: 700; line-height: 1.1;
  min-height: 44px;
}
.cuenta-barra-item svg { width: 24px; height: 24px; }
.cuenta-barra-item.activo { color: var(--cw-barra-activo) !important; }
.cuenta-barra-centro { justify-content: flex-end; padding-bottom: 8px; }
.cuenta-barra-circulo {
  width: 58px; height: 58px; margin-top: -30px; border-radius: 50%;
  background: var(--cw-centro-bg); color: var(--cw-centro-text);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.cuenta-barra-centro.activo .cuenta-barra-circulo { outline: 3px solid var(--cw-barra-activo); outline-offset: 2px; }
.cuenta-barra-centro .cuenta-barra-circulo svg { width: 26px; height: 26px; }
.cuenta-barra-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Que la barra no tape nada: espacio abajo, WhatsApp y los avisos de la app (N) por encima. Con la barra de instalar de
   N encima de la de W, el espacio suma las dos (esta regla gana a la de N por ser más específica). */
body.con-cuenta-barra { --cw-reserva: calc(var(--cw-barra-alto) + 80px + env(safe-area-inset-bottom)); padding-bottom: var(--cw-reserva) !important; }
body.con-cuenta-barra.app-con-barra { --cw-reserva: calc(var(--cw-barra-alto) + 76px + 80px + env(safe-area-inset-bottom)); }
/* (Ajuste 8; ronda 2, ajuste 6) En las páginas con el pie del sitio el espacio va DENTRO del pie y es exactamente el
   alto de la barra (más el margen de gestos del iPhone), para que el scroll termine en el borde inferior del pie. */
body.con-cuenta-barra:has(footer.grass-footer) { padding-bottom: 0 !important; }
html body.con-cuenta-barra footer.grass-footer::after { content: ""; display: block; height: calc(var(--cw-barra-alto) + env(safe-area-inset-bottom)); }
html body.con-cuenta-barra.app-con-barra footer.grass-footer::after { height: calc(var(--cw-barra-alto) + 76px + env(safe-area-inset-bottom)); }
body.con-cuenta-barra .whatsapp-float { bottom: calc(var(--cw-barra-alto) + 18px + env(safe-area-inset-bottom)) !important; }
body.con-cuenta-barra .app-barra { bottom: calc(var(--cw-barra-alto) + env(safe-area-inset-bottom)) !important; }

@media (min-width: 992px) {
  .cuenta-barra { display: none; }
  body.con-cuenta-barra { padding-bottom: 0 !important; }
  html body.con-cuenta-barra footer.grass-footer::after { display: none; }
  body.con-cuenta-barra .whatsapp-float { bottom: 20px !important; }
  body.con-cuenta-barra .app-barra { bottom: 0 !important; }
}

/* ---------------- Piezas comunes de las pantallas de cuenta ---------------- */
.cw { color: var(--cw-titulo); display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.cw-ancho { max-width: none; }
.cw h2, .cw .cw-h { color: var(--cw-titulo); font-family: 'Hartwell Bold', sans-serif; }
.cw-saludo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cw-saludo-nombre { font-size: 1.35rem; font-weight: 900; color: var(--b-primary); font-family: 'Hartwell Bold', sans-serif; }
.cw-chico { font-size: .8rem; color: var(--cw-suave); font-weight: 700; }
.cw-gris { color: var(--cw-suave); }

.cw-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); padding: 16px; }
.cw-card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 900; color: var(--b-primary); font-size: 1rem; margin-bottom: 4px; }

/* Tarjeta de saldo */
.cw-saldo { background: var(--cw-saldo-bg); color: var(--cw-saldo-text); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.cw-saldo-et { font-size: .85rem; font-weight: 700; color: var(--cw-saldo-sub); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cw-saldo-cifra { font-size: 2.25rem; font-weight: 900; line-height: 1; font-family: 'Hartwell Black', sans-serif; }
.cw-saldo-cifra small { font-size: 1.1rem; }
.cw-saldo-partes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; background: rgba(255, 255, 255, .1); border-radius: 12px; padding: 10px; }
.cw-saldo-partes span { display: block; }
.cw-saldo-partes .et { font-size: .72rem; color: var(--cw-saldo-sub); font-weight: 700; }
.cw-saldo-partes .v { font-size: .98rem; font-weight: 900; }
.cw-saldo-nota { font-size: .78rem; color: var(--cw-saldo-sub); }
.cw-i { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; font-weight: 900; font-size: .85rem;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; flex: none; font-family: Georgia, serif; font-style: italic; }
.cw-saldo .cw-i { color: var(--cw-saldo-sub); }
.cw-card .cw-i { color: var(--b-primary); }

/* Botones */
.cw-botones { display: flex; gap: 10px; }
.cw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 12px; font-weight: 900; font-size: 1rem;
  text-decoration: none !important; border: 0; cursor: pointer; flex: 1 1 0; }
.cw-btn svg { width: 22px; height: 22px; }
.cw-btn-amarillo { background: var(--b-accent); color: var(--cw-titulo) !important; }
.cw-btn-amarillo:hover { filter: brightness(.96); }
.cw-btn-claro { background: rgba(255, 255, 255, .14); color: var(--cw-saldo-text) !important; }
.cw-btn-borde { background: #fff; color: var(--b-primary) !important; border: 2px solid var(--b-primary); }
.cw-btn-grande { min-height: 52px; font-size: 1.05rem; width: 100%; }
.cw-btn-chico { min-height: 40px; padding: 0 14px; font-size: .92rem; flex: none; }

/* Sorteo de hoy */
.cw-sorteo { display: flex; align-items: center; gap: 12px; border: 2px solid var(--b-accent); }
.cw-icono { width: 44px; height: 44px; border-radius: 12px; background: var(--cw-suave-bg); display: flex; align-items: center; justify-content: center; flex: none; color: var(--b-primary); }
.cw-icono svg { width: 22px; height: 22px; }
.cw-flex1 { flex: 1 1 auto; min-width: 0; }
.cw-fuerte { font-weight: 900; font-size: 1rem; color: var(--cw-titulo); }

/* Accesos 2×2 */
.cw-accesos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cw-acceso { display: flex; flex-direction: column; gap: 6px; text-decoration: none !important; color: var(--cw-titulo) !important; min-height: 44px; }
.cw-acceso svg { width: 24px; height: 24px; color: var(--b-primary); }
.cw-acceso .t { font-weight: 900; font-size: 1rem; }
.cw-acceso .s { font-size: .8rem; color: var(--cw-suave); }

/* Enlace de afiliado en una línea */
.cw-enlace { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.cw-enlace .et { font-size: .82rem; font-weight: 700; color: var(--b-primary); flex: none; }
.cw-enlace .url { flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--cw-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Filtros (chips) */
.cw-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.cw-chips::-webkit-scrollbar { display: none; }
.cw-chip { flex: none; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--cw-borde); background: #fff; color: var(--cw-suave) !important;
  font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; text-decoration: none !important; white-space: nowrap; }
.cw-chip.activo { background: var(--b-primary); border-color: var(--b-primary); color: #fff !important; }

/* Lista de movimientos / filas */
.cw-lista { padding: 4px 16px; }
.cw-fila { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--cw-borde); }
.cw-fila:first-child { border-top: 0; }
.cw-fila-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; background: var(--cw-suave-bg); color: var(--b-primary); }
.cw-fila-ico svg { width: 20px; height: 20px; }
.cw-fila-ico.entra { color: var(--cw-entra); background: color-mix(in srgb, var(--cw-entra) 14%, #fff); }
.cw-fila-ico.sale { color: var(--cw-sale); background: color-mix(in srgb, var(--cw-sale) 12%, #fff); }
.cw-fila-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-fila-txt .t { font-weight: 900; font-size: .95rem; color: var(--cw-titulo); overflow: hidden; text-overflow: ellipsis; }
.cw-fila-txt .s { font-size: .8rem; color: var(--cw-suave); }
.cw-fila-der { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; text-align: right; }
.cw-monto { font-weight: 900; font-size: 1rem; white-space: nowrap; }
.cw-monto.entra { color: var(--cw-entra); }
.cw-monto.sale { color: var(--cw-sale); }
.cw-monto.neutro { color: var(--cw-suave); }
.cw-estado { font-size: .7rem; font-weight: 900; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.cw-estado.ok { background: color-mix(in srgb, var(--cw-entra) 16%, #fff); color: var(--cw-entra); }
.cw-estado.espera { background: color-mix(in srgb, var(--b-accent) 35%, #fff); color: var(--cw-titulo); }
.cw-estado.mal { background: color-mix(in srgb, var(--cw-sale) 14%, #fff); color: var(--cw-sale); }
.cw-estado.gris { background: var(--cw-suave-bg); color: var(--cw-suave); }
.cw-fila-link { text-decoration: none !important; color: inherit !important; }
.cw-vacio { padding: 28px 0; text-align: center; color: var(--cw-suave); font-weight: 700; }
.cw-mas { display: flex; justify-content: center; padding: 6px 0 2px; }

/* Formularios */
.cw-lbl { font-size: .85rem; font-weight: 900; color: var(--b-primary); display: block; margin-bottom: 6px; }
.cw-in { width: 100%; min-height: 48px; border: 1.5px solid var(--cw-borde); border-radius: 12px; padding: 0 14px; font-size: 1rem; background: #fff; color: var(--cw-titulo); }
.cw-in:focus { outline: none; border-color: var(--b-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-primary) 18%, transparent); }
textarea.cw-in { padding: 10px 14px; min-height: 90px; }
/* (Ajuste 7) Los selectores como los campos: mismo alto, borde, radio y letra; la flecha con el color del texto */
select.cw-in {
  -webkit-appearance: none; appearance: none; height: 48px; font-family: inherit; font-size: 1rem; line-height: 1.2; padding: 0 42px 0 14px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.cw-in-ref { letter-spacing: .35em; font-weight: 900; font-size: 1.15rem; }
.cw-ayuda-linea { font-size: .8rem; color: var(--cw-suave); margin-top: 6px; }
.cw-seg { display: flex; background: var(--cw-suave-bg); border-radius: 12px; padding: 4px; gap: 4px; }
.cw-seg label { flex: 1 1 0; margin: 0; }
.cw-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cw-seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 9px; font-weight: 900; font-size: .95rem; color: var(--cw-suave); cursor: pointer; }
.cw-seg input:checked + span { background: var(--b-primary); color: #fff; }
.cw-seg input:focus-visible + span { outline: 2px solid var(--b-primary); outline-offset: 2px; }
.cw-dato { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cw-borde); }
.cw-dato:first-of-type { border-top: 0; }
.cw-dato .et { font-size: .85rem; color: var(--cw-suave); font-weight: 700; }
.cw-dato .v { font-weight: 900; flex: 1 1 auto; text-align: right; overflow-wrap: anywhere; }
.cw-copiar { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--b-primary); background: #fff; color: var(--b-primary); font-weight: 900; font-size: .8rem; flex: none; }
.cw-copiar.ok { border-color: var(--cw-entra); color: var(--cw-entra); background: color-mix(in srgb, var(--cw-entra) 12%, #fff); }
.cw-caja-foto { display: flex; align-items: center; gap: 12px; border: 1.5px dashed var(--cw-borde); border-radius: 12px; padding: 12px 14px; background: var(--cw-suave-bg); cursor: pointer; margin: 0; min-height: 56px; }
.cw-caja-foto svg { width: 26px; height: 26px; color: var(--b-primary); flex: none; }
.cw-caja-foto .t { font-weight: 700; color: var(--b-primary); }
.cw-caja-foto .s { font-size: .78rem; color: var(--cw-suave); display: block; }
.cw-oculto-archivo { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cw-ayuda { background: var(--cw-suave-bg); border-radius: 10px; padding: 10px 12px; font-size: .85rem; color: var(--cw-suave); line-height: 1.45; }
.cw-plegable > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; font-weight: 900; color: var(--b-primary); }
.cw-plegable > summary::-webkit-details-marker { display: none; }
.cw-plegable > summary .cw-chev { transition: transform .2s; width: 18px; height: 18px; }
.cw-plegable[open] > summary .cw-chev { transform: rotate(180deg); }
.cw-enlace-simple { font-weight: 900; color: var(--b-primary) !important; text-decoration: none !important; background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; }

/* Pestañas (Afiliados) */
.cw-pestanas { display: flex; gap: 6px; border-bottom: 2px solid var(--cw-borde); overflow-x: auto; scrollbar-width: none; }
.cw-pestanas a { flex: none; padding: 10px 14px; min-height: 44px; font-weight: 900; color: var(--cw-suave) !important; text-decoration: none !important; border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; align-items: center; }
.cw-pestanas a.activo { color: var(--b-primary) !important; border-bottom-color: var(--b-primary); }

/* Cifras en fila (Afiliados) */
.cw-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cw-cifra { text-align: center; padding: 12px 8px; }
.cw-cifra .v { font-size: 1.25rem; font-weight: 900; color: var(--b-primary); display: block; }
.cw-cifra .et { font-size: .75rem; color: var(--cw-suave); font-weight: 700; }

/* Perfil */
.cw-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--b-primary); color: #fff; font-weight: 900; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; flex: none; }
.cw-ro { background: var(--cw-suave-bg) !important; color: var(--cw-suave) !important; }
.cw-guardar-fijo { position: sticky; bottom: calc(var(--cw-barra-alto) + 10px + env(safe-area-inset-bottom)); z-index: 5; }
@media (min-width: 992px) { .cw-guardar-fijo { bottom: 10px; } }

/* Escritorio: tablas en vez de tarjetas donde aplica */
.cw-tabla { width: 100%; font-size: .92rem; }
.cw-tabla th { color: var(--cw-suave); font-weight: 700; font-size: .8rem; text-transform: none; border-bottom: 1.5px solid var(--cw-borde); padding: 8px 10px; }
.cw-tabla td { padding: 10px; border-top: 1px solid var(--cw-borde); vertical-align: middle; }
.cw-solo-tel { display: block; }
.cw-solo-esc { display: none; }
@media (min-width: 992px) {
  .cw-solo-tel { display: none !important; }
  .cw-solo-esc { display: block; }
  table.cw-solo-esc { display: table; }
  .cw-fila-esc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}

/* ---------------- Menú lateral (ajustes 2, 4 y 5): el mismo en la cuenta y en las páginas públicas con sesión --------
   Fondo de la barra (marrón), cabecera más oscura con iniciales en un círculo amarillo pequeño, nombre en blanco y código
   en crema. El amarillo sólido es solo de Depositar; el elemento activo, texto amarillo sin fondo. */
.cw-menu { min-height: 100%; background: var(--cw-barra-bg); color: var(--cw-barra-text); padding-bottom: calc(24px + env(safe-area-inset-bottom)); letter-spacing: 0; }
/* Las hojas del sitio público ponen su letra a los enlaces del menú de tres rayas: aquí manda la de la cuenta */
.cw-menu, .cw-menu span, .cw-menu a, .cw-menu small, .cw-menu input { font-family: 'CW Hartwell', sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; }
.cw-menu .cw-menu-nombre, .cw-menu .cw-menu-principal, .cw-menu .cw-menu-principal span, .cw-menu .cw-menu-avatar { font-family: 'CW Hartwell', sans-serif !important; font-weight: 700 !important; }
.cw-menu-cab { display: flex; align-items: center; gap: 12px; padding: 18px 16px; background: rgba(0, 0, 0, .22); }
.cw-menu-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cw-barra-activo); color: var(--cw-centro-text); font-weight: 900; font-size: .95rem;
}
.cw-menu-quien { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cw-menu-nombre { color: var(--cw-saldo-text); font-weight: 800; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-menu-codigo { color: var(--cw-saldo-sub); font-size: .82rem; }
.cw-menu-lista { list-style: none; margin: 8px 0 0; padding: 0; }
.cw-menu-lista li { border: 0 !important; }
.cw-menu .cw-menu-item {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; margin: 0;
  color: var(--cw-barra-text) !important; background: transparent !important; text-decoration: none !important; font-size: 1rem; font-weight: 400;
}
.cw-menu .cw-menu-item svg { width: 22px; height: 22px; flex: 0 0 22px; }
.cw-menu .cw-menu-item:hover, .cw-menu .cw-menu-item:focus { background: rgba(255, 255, 255, .08) !important; color: var(--cw-saldo-text) !important; }
.cw-menu .cw-menu-item.activo { color: var(--cw-barra-activo) !important; font-weight: 700; }
.cw-menu .cw-menu-item.cw-menu-principal {
  margin: 6px 12px; border-radius: 12px; background: var(--cw-centro-bg) !important; color: var(--cw-centro-text) !important; font-weight: 900;
}
.cw-menu .cw-menu-item.cw-menu-principal.activo { box-shadow: 0 0 0 2px var(--cw-saldo-text); }
.cw-menu .cw-menu-chico { min-height: 36px; font-size: .85rem; font-weight: 500; opacity: .8; padding-left: 54px; }
.cw-menu-enlace .cuenta-affiliate-hint { color: var(--cw-barra-activo); font-size: .8rem !important; }
.cw-menu-enlace .input-group > .btn { flex: 0 0 auto !important; width: auto !important; padding: .25rem .6rem !important; }
/* Saldo en la cabecera del menú (ronda 2, ajuste 7c) */
.cw-menu-saldo { color: var(--cw-barra-activo); font-size: .85rem; font-weight: 700; margin-top: 2px; }
/* Sin sesión (ronda 2, ajuste 3): Ingresar como Depositar (amarillo) y Registro con borde */
.cw-menu-botones { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 4px; }
.cw-menu .cw-menu-boton {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; border-radius: 12px; text-decoration: none !important; font-size: 1rem;
}
.cw-menu .cw-menu-boton svg { width: 20px; height: 20px; }
.cw-menu .cw-menu-boton-principal { background: var(--cw-centro-bg); color: var(--cw-centro-text) !important; }
.cw-menu .cw-menu-boton-borde { border: 2px solid var(--cw-barra-activo); color: var(--cw-barra-activo) !important; background: transparent; }
.cw-menu .cw-menu-boton span { font-family: 'CW Hartwell', sans-serif !important; font-weight: 700 !important; }
.cw-menu .cw-menu-avatar svg { width: 22px; height: 22px; }
/* "Instala la app" dentro del menú, justo debajo de lo último (ronda 2, ajuste 5) */
.cw-menu .cw-menu-instalar { margin: 14px 12px 0; }

/* ---------------- Píldora de saldo (ronda 2, ajuste 7) ---------------- */
a.cw-pildora-saldo {
  display: inline-flex !important; align-items: center; gap: 6px; height: 43px; padding: 0 12px !important; border-radius: 999px !important;
  background: rgba(0, 0, 0, .22) !important; border: 1px solid rgba(255, 255, 255, .18) !important; color: var(--cw-saldo-text) !important;
  font-family: 'CW Hartwell', sans-serif; font-size: .95rem !important; font-weight: 700; line-height: 1; white-space: nowrap; text-decoration: none !important;
  flex: 0 1 auto; min-width: 0; overflow: hidden;
}
a.cw-pildora-saldo:hover { background: rgba(0, 0, 0, .32) !important; color: var(--cw-saldo-text) !important; }
a.cw-pildora-saldo svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--cw-barra-activo); }
a.cw-pildora-saldo .cw-p-et { font-weight: 400; opacity: .85; }
a.cw-pildora-saldo.cw-p-n1 .cw-p-et, a.cw-pildora-saldo.cw-p-n2 .cw-p-et, a.cw-pildora-saldo.cw-p-n3 .cw-p-et { display: none; }
a.cw-pildora-saldo.cw-p-n2 .cw-p-dec, a.cw-pildora-saldo.cw-p-n3 .cw-p-dec { display: none; }
a.cw-pildora-saldo.cw-p-n3 .cw-p-bs { display: none; }
/* Sin JavaScript: en pantallas estrechas, ya sin "Saldo:" */
@media (max-width: 374px) { a.cw-pildora-saldo:not(.cw-p-listo) .cw-p-et { display: none; } }

/* Línea discreta de saldo en el formulario de compra (ronda 2, ajuste 7d) */
.cw-saldo-compra { display: block; margin-top: 4px; font-size: .8rem; opacity: .85; font-weight: 400; letter-spacing: 0; }

/* (Ronda 3, ajuste 4) En el teléfono, el panel del área del usuario es como el de tres rayas de las páginas públicas:
   de arriba abajo de la pantalla VISIBLE (top 0 y bottom 0, no 100vh, que en el iPhone es más alto que lo que se ve y
   dejaba el final fuera), 340 px de ancho, y con su propio scroll hasta ver entera la última opción (también con la barra
   de abajo, que queda por debajo del panel). */
@media (max-width: 991.98px) {
  body.app-brand-area .sidebar {
    top: 0 !important; bottom: 0 !important; height: auto !important; width: 340px !important; max-width: 88vw;
    left: -360px; padding: 0 !important; overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  body.app-brand-area .sidebar.active { left: 0; }
}
.offcanvas.cw-offcanvas-cuenta .offcanvas-body { overflow-y: auto; overscroll-behavior: contain; }

/* En la cuenta, el menú ocupa todo el panel lateral */
.sidebar .cw-menu { margin: 0; }
/* En las páginas públicas, el panel de tres rayas toma el mismo fondo */
.offcanvas.cw-offcanvas-cuenta { background: var(--cw-barra-bg) !important; }
.offcanvas.cw-offcanvas-cuenta .offcanvas-header { background: var(--cw-barra-bg); border-color: rgba(0, 0, 0, .25) !important; }

/* Escritorio (plan §6): menú lateral fijo de 240 px y el contenido a su lado; sin hamburguesa. Por debajo de 992 px el
   menú sigue siendo el panel deslizable de siempre (cuenta.css) y la barra de abajo hace de acceso rápido. */
@media (min-width: 992px) {
  body.app-brand-area .sidebar {
    position: fixed; top: 56px; left: 0; width: 240px; height: calc(100vh - 56px); padding-top: 0;
    border-right: 0; transition: none; z-index: 1000;
  }
  body.app-brand-area .content-wrapper,
  body.app-brand-area main.col-lg-10 { margin-left: 240px !important; width: calc(100% - 240px) !important; max-width: none; padding: 24px 32px !important; }
  body.app-brand-area > header.navbar .navbar-toggler { display: none !important; }
  body.app-brand-area .sidebar-overlay { display: none !important; }
}

/* Ventanas de la cuenta: cabecera con el primario de la marca */
.cw-modal-cab { background: var(--b-primary); color: #fff; }
.cw-modal-cab .modal-title { color: #fff; font-weight: 900; font-size: 1.1rem; }

/* Escritorio: más ancho y los accesos del Inicio en una fila de 4 (plan §6) */
@media (min-width: 992px) {
  .cw { max-width: 1100px; }
  .cw-accesos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Compra del sorteo en curso (Mis cartones) */
.cw-resaltada { border: 2px solid var(--b-accent); }

/* Pestañas incrustadas (Mis ventas, Comisiones): sin el párrafo de cabecera de su página vieja; tablas que se deslizan */
.cw-tab-incrustada > p.text-muted:first-child { display: none; }
.cw-tab-incrustada .table-responsive { border-radius: 12px; }
.cw-tab-incrustada .card { border: 0; border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
.cw-plegable-card > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.cw-plegable-card > summary::-webkit-details-marker { display: none; }
.cw-plegable-card > summary::after { content: '▾'; margin-left: auto; font-size: 1.1rem; transition: transform .2s; }
.cw-plegable-card[open] > summary::after { transform: rotate(180deg); }