/* ═══════════════════════════════════════════════════════════════════════
   Lazzo Bienestar · Lado cliente — estilos compartidos
   ───────────────────────────────────────────────────────────────────────
   Subnamespace cliente/. Cada feature pesada (pago, sesiones, valoracion,
   lobby) tendrá su propio archivo hermano. Aquí solo:
   - Variables CSS específicas del módulo cliente
   - Reset/box-sizing por si hace falta
   - Tipografía DM Sans + DM Serif (cargadas en lazzo-app-template.html)
   - Helpers de layout reutilizables (`.bcl-screen`, `.bcl-topbar`, etc.)

   Norma esencial memoria: si este archivo supera 800L → aviso.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Paleta cliente Bienestar — coincide con resto Lazzo */
  --bcl-c1: #9b7fd4;       /* lavanda */
  --bcl-c2: #f4956a;       /* coral */
  --bcl-c1-d: #7a5fb0;
  --bcl-c2-d: #c97551;
  --bcl-bg: #fdf6f0;
  --bcl-bg-soft: #f6f3ee;
  --bcl-line: #ece6dc;
  --bcl-txt: #2a2a2a;
  --bcl-muted: #8a857d;
  --bcl-green: #4caf7d;
  --bcl-amber: #d49b3c;
  --bcl-red: #d75555;
  --bcl-grad: linear-gradient(135deg, var(--bcl-c1) 0%, var(--bcl-c2) 100%);
  --bcl-grad-soft: linear-gradient(135deg,
                    color-mix(in srgb, var(--bcl-c1) 12%, white) 0%,
                    color-mix(in srgb, var(--bcl-c2) 12%, white) 100%);

  /* Sombras + radios homogéneos */
  --bcl-r-sm: 10px;
  --bcl-r-md: 14px;
  --bcl-r-lg: 22px;
  --bcl-shadow-sm: 0 2px 8px -3px rgba(0,0,0,.10);
  --bcl-shadow-md: 0 6px 18px -10px rgba(0,0,0,.15);
}

/* Helpers layout reutilizables (placeholder — se llenan en C2+) */
.bcl-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--bcl-bg);
  color: var(--bcl-txt);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

.bcl-screen h1, .bcl-screen h2, .bcl-screen h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  margin: 0;
}