/* ================================================
   OPERACIÓN PAPÁ DEPORTISTA — PORTAL DE CLIENTES
   Design System: Dark + Gold Premium
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;0,800;1,700&display=swap');

:root {
  --gold: #D4A843;
  --gold-light: #E8C96A;
  --gold-dark: #B8922E;
  --gold-glow: rgba(212, 168, 67, 0.20);
  --gold-glow-strong: rgba(212, 168, 67, 0.35);
  --dark-950: #0A0A0B;
  --dark-900: #111113;
  --dark-800: #1A1A1E;
  --dark-700: #232328;
  --dark-600: #2E2E35;
  --dark-500: #3A3A42;
  --text-primary: #F5F5F5;
  --text-secondary: #B0B0B8;
  --text-muted: #78787F;
  /* Aliases retrocompatibles — varias páginas del proyecto usan estas
     formas abreviadas en su CSS local (--text, --text-sec, --text-dim).
     Sin estos aliases en portal.css, esas referencias caían a "var
     no definida" y heredaban color del padre (visual roto en sitios
     sutiles donde el padre no tenía color forzado).
     Mantener mientras no se haga un refactor que unifique. */
  --text:     var(--text-primary);
  --text-sec: var(--text-secondary);
  --text-dim: var(--text-muted);
  --green: #2ECC71;
  --red: #E74C3C;
  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
  --sidebar-w: 260px;
  --radius: 16px;
  --radius-sm: 10px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: var(--font-sans); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
input, button, textarea { font-family: inherit; }

/* ─── SHARED BACKGROUND ─── */
.portal-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: var(--dark-950);
}
.portal-bg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(212,168,67,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,168,67,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}
.portal-bg__glow {
  position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.25;
}
.portal-bg__glow--1 {
  width: 600px; height: 600px; top: -200px; left: -100px;
  background: radial-gradient(circle, rgba(212,168,67,0.3), transparent 70%);
}
.portal-bg__glow--2 {
  width: 400px; height: 400px; bottom: -100px; right: -100px;
  background: radial-gradient(circle, rgba(212,168,67,0.15), transparent 70%);
}

/* ─── PORTAL LOGIN PAGE ─── */
.portal-body {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.portal-main {
  position: relative; z-index: 1; width: 100%; padding: 24px;
  display: flex; align-items: center; justify-content: center;
}

.portal-card {
  width: 100%; max-width: 440px;
  background: linear-gradient(135deg, rgba(26,26,30,0.95), rgba(17,17,19,0.98));
  border: 1px solid rgba(212,168,67,0.15);
  border-radius: 24px;
  padding: 40px 36px;
  backdrop-filter: blur(20px);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,168,67,0.05);
}

.portal-card__logo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 28px;
}
.portal-card__logo-icon {
  font-size: 2.2rem; line-height: 1;
  filter: drop-shadow(0 0 12px rgba(212,168,67,0.5));
}
.portal-card__logo-eyebrow {
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 2px;
}
.portal-card__logo-title {
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 800;
  color: var(--text-primary); line-height: 1.2;
}
.portal-card__logo-title em { color: var(--gold); font-style: italic; }

.portal-card__divider {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.portal-card__divider::before,
.portal-card__divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(212,168,67,0.15);
}
.portal-card__divider span {
  font-size: 0.75rem; color: var(--text-muted); white-space: nowrap;
}

.portal-card__footer {
  text-align: center; margin-top: 24px;
  font-size: 0.82rem; color: var(--text-muted);
}
.portal-link { color: var(--gold); transition: opacity var(--transition); }
.portal-link:hover { opacity: 0.8; }

/* ─── ALERT ─── */
.portal-alert {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 0.85rem; font-weight: 500; margin-bottom: 16px;
  border: 1px solid transparent;
}
.portal-alert--error {
  background: rgba(231,76,60,0.12); border-color: rgba(231,76,60,0.3); color: #ff7b6e;
}
.portal-alert--success {
  background: rgba(46,204,113,0.12); border-color: rgba(46,204,113,0.3); color: #5eeba0;
}
.portal-alert--info {
  background: rgba(212,168,67,0.12); border-color: rgba(212,168,67,0.3); color: var(--gold-light);
}

/* ─── TABS ─── */
.portal-tabs {
  display: flex; background: var(--dark-800); border-radius: var(--radius-sm);
  padding: 4px; gap: 4px; margin-bottom: 24px;
}
.portal-tab {
  flex: 1; padding: 8px; border: none; background: transparent; cursor: pointer;
  border-radius: 7px; font-size: 0.85rem; font-weight: 600;
  color: var(--text-muted); transition: all var(--transition);
}
.portal-tab--active {
  background: var(--dark-600); color: var(--gold);
}
.portal-tab:hover:not(.portal-tab--active) { color: var(--text-secondary); }

/* ─── FORM ─── */
.portal-form { display: flex; flex-direction: column; gap: 16px; }
.portal-field { display: flex; flex-direction: column; gap: 6px; }
.portal-label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary);
}
.portal-label__hint { font-weight: 400; color: var(--text-muted); }
.portal-input {
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: var(--radius-sm); padding: 12px 14px;
  color: var(--text-primary); font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none; width: 100%;
}
.portal-input::placeholder { color: var(--text-muted); }
.portal-input:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-glow);
}
.portal-field__link {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.78rem;
  text-align: right; transition: color var(--transition); padding: 0;
}
.portal-field__link:hover { color: var(--gold); }

/* ─── BUTTONS ─── */
.portal-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 60px; border: none; cursor: pointer;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  transition: all var(--transition); position: relative; overflow: hidden;
}
.portal-btn--primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-dark));
  color: #000;
  box-shadow: 0 4px 20px var(--gold-glow);
}
.portal-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--gold-glow-strong);
}
.portal-btn--primary:active { transform: translateY(0); }
.portal-btn--ghost {
  background: transparent; color: var(--gold);
  border: 1.5px solid rgba(212,168,67,0.4);
}
.portal-btn--ghost:hover {
  border-color: var(--gold); background: var(--gold-glow);
}
.portal-btn__loader { display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── ACCESO SECUNDARIO: Login con Google (solo admin) ───
   Estilo deliberadamente menos prominente que .portal-btn--primary para que
   los clientes no se confundan. Aspecto: gris oscuro neutro con borde sutil
   y el logo oficial de Google en color. */
.portal-google-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 16px;
  color: var(--text-muted, #78787F);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.portal-google-divider::before,
.portal-google-divider::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
}
.portal-btn--google {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-primary, #F5F5F5);
  border-radius: var(--radius-sm, 10px);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.portal-btn--google:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}
.portal-btn--google:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.portal-btn__google-icon { flex-shrink: 0; }
.portal-google-note {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted, #78787F);
  font-style: italic;
}

/* ─── HINT del botón Google (debajo, pequeñito) ─── */
.portal-google-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted, #78787F);
  letter-spacing: 0.04em;
}

/* ─── DESPLEGABLE: login alternativo (email + contraseña) ───
   Decisión Miguel mayo 2026: Google es el método principal y email/pwd
   queda como red de seguridad. Se renderiza colapsado por defecto
   (<details>) para no competir visualmente con el botón Google. */
.portal-altlogin {
  margin-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 14px;
}
.portal-altlogin__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary, #B0B0B8);
  font-weight: 500;
  transition: background 0.18s, color 0.18s;
  user-select: none;
}
.portal-altlogin__summary::-webkit-details-marker { display: none; }
.portal-altlogin__summary:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary, #F5F5F5);
}
.portal-altlogin__arrow {
  font-size: 0.72rem;
  transition: transform 0.2s ease;
  color: var(--text-muted, #78787F);
}
.portal-altlogin[open] .portal-altlogin__arrow {
  transform: rotate(180deg);
}
.portal-altlogin__form {
  margin-top: 16px;
  animation: portalAltloginIn 0.25s ease;
}
@keyframes portalAltloginIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── COMUNICACIÓN UNIFICADA (Mensajes + Notificaciones) ───
   Sección con 2 pestañas internas. Reemplaza las dos secciones separadas
   que existían antes en el sidebar. */
.comm-tabs {
  display: flex; gap: 6px;
  padding: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  margin: 0 0 24px;
  /* width fit-content + nowrap se desbordaba en móviles estrechos
     (sobre todo con 'Notificaciones'). Ahora los tabs se ajustan
     al ancho del contenedor y, si no caben en una fila, se reparten
     en dos. Mantenemos look pill-card que encierra los 3 botones. */
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}
.comm-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  background: transparent;
  border: none;
  color: var(--text-muted, #78787F);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
  /* En móvil cada tab ocupa proporcionalmente, así con 3 caben
     en una fila si hay sitio o se reparten en 2 si no. */
  flex: 1 1 auto;
  min-width: 0;
  justify-content: center;
}
.comm-tab:hover { color: var(--text-primary, #F5F5F5); }
.comm-tab--active {
  background: linear-gradient(135deg, var(--gold, #D4A843), #B8922E);
  color: #0A0A0B;
  box-shadow: 0 4px 14px rgba(212,168,67,0.25);
}
.comm-tab__ico { font-size: 1rem; line-height: 1; }
.comm-tab__badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #E74C3C;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
}
.comm-tab--active .comm-tab__badge {
  background: rgba(0,0,0,0.20);
  color: #0A0A0B;
}

/* Paneles de la sección de comunicación: solo se muestra el activo */
.comm-panel { display: none; animation: comm-fade 0.2s ease; }
.comm-panel--active { display: block; }
@keyframes comm-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.comm-panel__sub {
  font-size: 0.84rem;
  color: var(--text-muted, #78787F);
  margin: 0 0 14px;
}

/* En móviles muy estrechos, comprimir las tabs aún más para que
   los 3 botones quepan en una sola fila siempre que sea posible. */
@media (max-width: 480px) {
  .comm-tab { padding: 8px 10px; font-size: 0.78rem; gap: 5px; }
  .comm-tab__ico { font-size: 0.92rem; }
}

/* ── L.1: Card de onboarding del cliente (home) ──
   Tarjeta dorada con checklist de 5 pasos. Persistente hasta
   completar todo. Estados: done (verde), pending (gris), waiting
   ("Lo prepara Miguel"), next (resaltado dorado). */
.onb-card {
  background: linear-gradient(135deg, rgba(212,168,67,0.06), rgba(212,168,67,0.02));
  border: 1px solid rgba(212,168,67,0.22);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.onb-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--gold,#D4A843), transparent);
}
.onb-card__head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 18px;
}
.onb-card__ico {
  font-size: 2rem; line-height: 1; flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(212,168,67,0.25));
}
.onb-card__txt { flex: 1; min-width: 0; }
.onb-card__title {
  font-family: var(--font-serif);
  font-size: 1.35rem; font-weight: 800;
  color: var(--text-primary, #F5F5F5);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.onb-card__title #onbName { color: var(--gold,#D4A843); }
.onb-card__sub {
  font-size: 0.88rem; line-height: 1.5;
  color: var(--text-muted, #B0B0B8);
  margin: 0;
}
.onb-card__progress {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
}
.onb-card__bar {
  flex: 1; height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px; overflow: hidden;
}
.onb-card__fill {
  height: 100%;
  background: linear-gradient(90deg, #E8C96A, #D4A843);
  width: 0%;
  transition: width 0.6s cubic-bezier(.4,0,.2,1);
  border-radius: 100px;
}
.onb-card__count {
  font-size: 0.78rem; font-weight: 700;
  color: var(--gold,#D4A843);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.onb-card__lead {
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim, #78787F);
  margin: 0 0 12px;
}
.onb-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.onb-list li { list-style: none; }
.onb-step {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  text-decoration: none; color: inherit;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.onb-step:hover { background: rgba(255,255,255,0.04); }
a.onb-step:hover { transform: translateX(2px); }
.onb-step__ico {
  font-size: 1.15rem; flex-shrink: 0;
  width: 28px; text-align: center;
}
.onb-step__label {
  flex: 1; min-width: 0;
  font-size: 0.92rem; font-weight: 600;
  color: var(--text, #F5F5F5);
}
.onb-step__check {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(46,204,113,0.18);
  color: #2ECC71;
  border-radius: 50%;
  font-weight: 800; font-size: 0.84rem;
}
.onb-step__arrow {
  flex-shrink: 0;
  color: var(--text-dim, #78787F);
  font-size: 1.1rem; font-weight: 600;
  transition: color 0.18s ease, transform 0.18s ease;
}
a.onb-step:hover .onb-step__arrow {
  color: var(--gold,#D4A843);
  transform: translateX(3px);
}
.onb-step__pill {
  flex-shrink: 0;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 100px;
  background: rgba(212,168,67,0.10);
  color: var(--gold,#D4A843);
  white-space: nowrap;
}
/* Estado: completado — texto tachado suave + opacidad */
.onb-step--done .onb-step__label {
  color: var(--text-muted, #B0B0B8);
  text-decoration: line-through;
  text-decoration-color: rgba(176,176,184,0.4);
}
.onb-step--done .onb-step__ico { opacity: 0.6; }
/* Estado: esperando publicación de Miguel */
.onb-step--waiting {
  cursor: default;
  opacity: 0.85;
}
.onb-step--waiting .onb-step__label { color: var(--text-muted, #B0B0B8); }
.onb-step--waiting .onb-step__ico  { opacity: 0.65; }
/* Estado: próximo paso accionable — destacar con borde dorado y pulso suave */
.onb-step--next {
  background: rgba(212,168,67,0.08);
  border-color: rgba(212,168,67,0.32);
  box-shadow: 0 0 0 0 rgba(212,168,67,0.20);
  animation: onb-pulse 2.4s ease-in-out infinite;
}
@keyframes onb-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,168,67,0.20); }
  50%      { box-shadow: 0 0 0 6px rgba(212,168,67,0.0); }
}

/* En móviles muy estrechos, comprimir un poco la card */
@media (max-width: 480px) {
  .onb-card { padding: 20px 18px; }
  .onb-card__title { font-size: 1.18rem; }
  .onb-card__sub   { font-size: 0.82rem; }
  .onb-card__ico   { font-size: 1.7rem; }
  .onb-step        { padding: 10px 12px; gap: 10px; }
  .onb-step__label { font-size: 0.86rem; }
  .onb-step__pill  { font-size: 0.65rem; padding: 3px 8px; }
}

/* ── L.2: Lista de quincenas de feedback (tab Comunicación) ── */
.fb-quincenas-list {
  display: flex; flex-direction: column; gap: 12px;
}
.fb-q {
  background: linear-gradient(135deg, var(--dark-800), var(--dark-700));
  border: 1px solid rgba(212,168,67,0.10);
  border-radius: var(--radius);
  padding: 16px 18px;
  transition: border-color var(--transition);
}
.fb-q:hover { border-color: rgba(212,168,67,0.22); }
.fb-q__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.fb-q__num {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 800;
  color: var(--text-primary);
}
.fb-q__estado {
  font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
  white-space: nowrap;
}
.fb-q--done .fb-q__estado     { background: rgba(46,204,113,.14); color:#2ECC71; }
.fb-q--late .fb-q__estado     { background: rgba(231,76,60,.14);  color:#E74C3C; }
.fb-q--today .fb-q__estado    { background: rgba(212,168,67,.18); color:var(--gold,#D4A843); }
.fb-q--soon .fb-q__estado     { background: rgba(212,168,67,.10); color:var(--gold,#D4A843); }
.fb-q--upcoming .fb-q__estado { background: rgba(255,255,255,.06); color:var(--text-muted); }
.fb-q--skip .fb-q__estado     { background: rgba(255,255,255,.04); color:var(--text-muted); }
.fb-q__date {
  font-size: 0.78rem; color: var(--text-muted);
  display: block; margin-bottom: 10px;
}
.fb-q__action { margin-top: 4px; }
.fb-q__cta {
  display: inline-block;
  padding: 9px 16px; border-radius: 100px;
  background: linear-gradient(135deg, #E8C96A, #D4A843);
  color: #0A0A0B; font-weight: 800;
  font-size: 0.82rem; letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fb-q__cta:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(212,168,67,.30); }

/* ─── DASHBOARD LAYOUT ─── */
.dashboard-body {
  background: var(--dark-950); min-height: 100vh; display: flex;
}

/* SIDEBAR */
.sidebar {
  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh;
  background: linear-gradient(180deg, rgba(17,17,19,0.98), rgba(10,10,11,0.99));
  border-right: 1px solid rgba(212,168,67,0.1);
  display: flex; flex-direction: column;
  z-index: 100; overflow-y: auto;
  transition: transform var(--transition);
}
.sidebar__logo {
  display: flex; align-items: center; gap: 12px;
  padding: 24px 20px 20px; border-bottom: 1px solid rgba(212,168,67,0.08);
}
.sidebar__logo-icon { font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(212,168,67,0.4)); }
.sidebar__logo-name {
  font-family: var(--font-serif); font-size: 0.95rem; font-weight: 800;
  color: var(--text-primary); line-height: 1.1;
}
.sidebar__logo-sub {
  font-family: var(--font-serif); font-size: 0.82rem;
  color: var(--gold); font-style: italic;
}

.sidebar__nav { flex: 1; padding: 20px 12px; }
.sidebar__nav-label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  padding: 0 8px; margin-bottom: 8px;
}
.sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 0.88rem; font-weight: 500; color: var(--text-secondary);
  transition: all var(--transition); margin-bottom: 2px; cursor: pointer;
}
.sidebar__link-icon { font-size: 1rem; }
.sidebar__link:hover { background: rgba(212,168,67,0.06); color: var(--text-primary); }
.sidebar__link--active {
  background: rgba(212,168,67,0.12); color: var(--gold); font-weight: 600;
}

.sidebar__footer {
  padding: 16px; border-top: 1px solid rgba(212,168,67,0.08);
}
.sidebar__user {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.sidebar__user-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; color: #000; flex-shrink: 0;
}
.sidebar__user-name { font-size: 0.85rem; font-weight: 700; color: var(--text-primary); }
.sidebar__user-plan { font-size: 0.72rem; color: var(--green); }

/* Bloque de usuario movido al header del sidebar (encima del menú "Mi espacio").
   Estilos diferenciados del que vivía antes en el footer. */
.sidebar__user-link--top {
  display: block;
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: rgba(212,168,67,0.06);
  border: 1px solid rgba(212,168,67,0.15);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition);
}
.sidebar__user-link--top:hover {
  background: rgba(212,168,67,0.12);
  border-color: rgba(212,168,67,0.30);
}
.sidebar__user-link--top .sidebar__user {
  margin-bottom: 0;
}
/* Texto 'Ver mi perfil ›' debajo del plan. Indica explícitamente que el
   bloque entero es un enlace al perfil del cliente. Antes solo había un
   chevron '›' a la derecha hecho con ::after que el usuario consideró
   poco visible. */
.sidebar__user-link-cta {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
  transition: transform var(--transition);
}
.sidebar__user-link--top:hover .sidebar__user-link-cta {
  transform: translateX(2px);
}

.sidebar__logout {
  width: 100%; padding: 8px; background: rgba(231,76,60,0.08);
  border: 1px solid rgba(231,76,60,0.2); border-radius: var(--radius-sm);
  color: #ff7b6e; font-size: 0.8rem; font-weight: 600; cursor: pointer;
  transition: all var(--transition);
}
.sidebar__logout:hover { background: rgba(231,76,60,0.16); }

/* TOPBAR (mobile) */
.topbar {
  display: none; position: fixed; top: 0; left: 0; right: 0; height: 56px;
  background: rgba(17,17,19,0.95); backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(212,168,67,0.1);
  align-items: center; justify-content: space-between;
  padding: 0 16px; z-index: 200;
}
.topbar__menu {
  background: none; border: none; color: var(--gold); font-size: 1.4rem; cursor: pointer;
  flex-shrink: 0;
}
.topbar__title {
  font-family: var(--font-serif); font-size: 0.9rem; font-weight: 800; color: var(--text-primary);
  /* Asegurar que el título nunca se corte: ocupa el espacio disponible entre
     menú y botón Salir, centrado, y trunca con ellipsis si no cabe. */
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__logout {
  width: auto !important; padding: 6px 12px !important; font-size: 0.75rem !important;
  flex-shrink: 0;
}

/* En pantallas muy estrechas (< 380px) reducir aún más el texto del título. */
@media (max-width: 380px) {
  .topbar__title { font-size: 0.78rem; }
  .topbar__logout { padding: 5px 9px !important; font-size: 0.7rem !important; }
}

/* MAIN */
.dashboard-main {
  position: relative; z-index: 1;
  margin-left: var(--sidebar-w); min-height: 100vh;
  padding: 24px 48px; max-width: calc(100vw - var(--sidebar-w));
}

/* SECTIONS */
.dash-section { display: none; animation: fadeUp 0.4s ease both; }
.dash-section--active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* HEADER */
.dash-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 24px; flex-wrap: wrap; gap: 16px;
}
.dash-header__eyebrow {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 4px;
}
.dash-header__title {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800; color: var(--text-primary); line-height: 1.2;
}
.dash-header__sub { font-size: 0.9rem; color: var(--text-secondary); margin-top: 4px; }
.dash-header__date {
  font-size: 0.82rem; color: var(--text-muted);
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: var(--radius-sm); padding: 8px 14px; white-space: nowrap;
}

/* STATS */
.dash-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px; margin-bottom: 40px;
}
.dash-stat {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, var(--dark-800), var(--dark-700));
  border: 1px solid rgba(212,168,67,0.1); border-radius: var(--radius);
  padding: 20px; transition: border-color var(--transition);
  min-width: 0; /* permite que el flex item se contraiga si hace falta */
}
.dash-stat:hover { border-color: rgba(212,168,67,0.25); }
.dash-stat__icon { font-size: 1.8rem; flex-shrink: 0; }
/* El bloque de texto necesita min-width:0 dentro del flex para que el
   word-wrap funcione (sin esto, el texto fuerza el ancho mínimo del
   contenedor y se sale). Sin min-width:0, los valores tipo "70.5 kg"
   o labels como "Semana en programa" desbordaban en móvil. */
.dash-stat > div { min-width: 0; flex: 1; }
.dash-stat__val {
  font-size: 1.3rem; font-weight: 800; color: var(--gold); line-height: 1.1;
  word-wrap: break-word; overflow-wrap: break-word;
}
.dash-stat__label {
  font-size: 0.75rem; color: var(--text-muted); margin-top: 2px;
  word-wrap: break-word; overflow-wrap: break-word;
}

/* ── PRÓXIMAS FECHAS (sustituye "Accesos rápidos") ──
   2 cards con la próxima cita con Miguel y el próximo feedback
   bisemanal. Lo accionable y útil para el cliente, en lugar de
   atajos que ya están en el menú lateral. */
.prox-fechas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}
.prox-card {
  background: linear-gradient(135deg, #1A1A1E, #111113);
  border: 1px solid rgba(212,168,67,0.18);
  border-radius: 16px;
  padding: 20px;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}
.prox-card:hover {
  border-color: rgba(212,168,67,0.35);
  transform: translateY(-1px);
}
.prox-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.prox-card__icon { font-size: 1.5rem; line-height: 1; }
.prox-card__type {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #D4A843;
}
.prox-card__body { min-height: 80px; }
.prox-card__loading,
.prox-card__empty {
  font-size: 0.86rem;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}
.prox-card__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: #F5F5F5;
  margin: 0 0 6px;
  line-height: 1.25;
}
.prox-card__date {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}
.prox-card__when {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(212,168,67,0.14);
  color: #E8C96A;
}
.prox-card__when--today {
  background: rgba(45,189,126,0.18);
  color: #6FE0A2;
}
.prox-card__when--late {
  background: rgba(192,57,43,0.22);
  color: #ff9a8c;
}
.prox-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #D4A843;
  text-decoration: none;
  cursor: pointer;
}
.prox-card__cta:hover { color: #E8C96A; }
.prox-card__notas {
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(212,168,67,0.4);
  border-radius: 6px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* SUBTITLE */
.dash-subtitle {
  font-family: var(--font-serif); font-size: 1.15rem; font-weight: 800;
  color: var(--text-primary); margin-bottom: 20px;
}

/* CARDS GRID */
.dash-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
}
.dash-card {
  background: linear-gradient(135deg, var(--dark-800), var(--dark-700));
  border: 1px solid rgba(212,168,67,0.1); border-radius: var(--radius);
  padding: 24px; transition: all var(--transition);
}
.dash-card--clickable { cursor: pointer; }
.dash-card--clickable:hover {
  border-color: rgba(212,168,67,0.35); transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3), 0 0 20px var(--gold-glow);
}
.dash-card__icon { font-size: 2rem; margin-bottom: 12px; }
.dash-card__title {
  font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 8px;
}
.dash-card__desc { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }
.dash-card__cta { font-size: 0.82rem; font-weight: 700; color: var(--gold); }
.dash-card__badge {
  display: inline-block; background: rgba(46,204,113,0.15);
  border: 1px solid rgba(46,204,113,0.3); color: #5eeba0;
  border-radius: 20px; padding: 3px 10px; font-size: 0.72rem; font-weight: 600;
}
.dash-card--locked { opacity: 0.85; }
.dash-card--locked:hover { opacity: 1; }

/* MOTIVATION */
.dash-motivation {
  margin-top: 40px;
  background: linear-gradient(135deg, rgba(212,168,67,0.05), rgba(212,168,67,0.02));
  border: 1px solid rgba(212,168,67,0.15); border-radius: var(--radius);
  padding: 28px 32px; text-align: center;
}
.dash-motivation__quote {
  font-family: var(--font-serif); font-size: 1.1rem; font-style: italic;
  color: var(--gold-light); line-height: 1.6;
}
.dash-motivation__author {
  font-size: 0.8rem; color: var(--text-muted); margin-top: 10px; font-weight: 600;
}

/* COMING SOON */
.dash-coming {
  background: linear-gradient(135deg, var(--dark-800), var(--dark-700));
  border: 1px solid rgba(212,168,67,0.1); border-radius: var(--radius);
  padding: 60px 40px; text-align: center; max-width: 540px; margin: 0 auto;
}
.dash-coming__icon { font-size: 3rem; margin-bottom: 16px; }
.dash-coming__title {
  font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800;
  color: var(--text-primary); margin-bottom: 12px;
}
.dash-coming__text { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.dash-coming__badge {
  display: inline-block; background: rgba(212,168,67,0.1);
  border: 1px solid rgba(212,168,67,0.3); color: var(--gold);
  border-radius: 20px; padding: 5px 16px; font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Spinner de carga genérico para la rutina cliente. Aparece como HTML
   inicial mientras portal.js lee la rutina de Firestore. Sustituye al
   "Tu rutina está en preparación" anterior, que daba un flash erróneo
   a clientes que SÍ tenían rutina pero esperaban a que llegara la
   respuesta de la red. */
.rut-loading {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px;
  padding: 60px 20px; max-width: 540px; margin: 0 auto;
}
.rut-loading__spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(212,168,67,0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.rut-loading__text {
  font-size: 0.92rem; color: var(--text-muted); margin: 0;
  font-weight: 500;
}

/* PROGRESO FORM */
.dash-progress-form {
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: var(--radius); padding: 24px; max-width: 500px;
}
.progress-input-row {
  display: flex; gap: 12px; flex-wrap: wrap;
}
.progress-input-row .portal-input { flex: 1; min-width: 200px; }

/* WEIGHT HISTORY */
.progress-history {
  display: flex; flex-direction: column; gap: 10px; max-width: 500px;
}
.weight-entry {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: var(--radius-sm); padding: 14px 18px;
}
.weight-entry__date { font-size: 0.82rem; color: var(--text-muted); }
.weight-entry__val { font-size: 1.1rem; font-weight: 800; color: var(--gold); }
.weight-entry__diff { font-size: 0.8rem; font-weight: 700; }
.weight-entry__diff--down { color: var(--green); }
.weight-entry__diff--up { color: var(--red); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    /* En móvil, dejar hueco para la topbar fija de arriba (56px). Antes el
       sidebar empezaba en top:0 y la topbar (z-index:200) tapaba los primeros
       56px del logo. */
    top: 56px;
    height: calc(100vh - 56px);
  }
  .sidebar--open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,0.6); }
  .topbar { display: flex; }
  .dashboard-main {
    margin-left: 0; padding: 70px 20px 32px; max-width: 100vw;
  }
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .portal-card { padding: 28px 20px; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dash-cards { grid-template-columns: 1fr; }
  .progress-input-row { flex-direction: column; }
  /* En pantallas estrechas con 2 stats por fila, el padding 20px y
     icono 1.8rem dejaban muy poco espacio para el texto, lo que hacía
     que valores como "70.5 kg" o labels como "Semana en programa" se
     vieran cortados. Reducimos padding, gap interno e icono para
     liberar ancho útil al texto. */
  .dash-stat { padding: 14px 12px; gap: 10px; }
  .dash-stat__icon { font-size: 1.4rem; }
  .dash-stat__val { font-size: 1.1rem; }
  .dash-stat__label { font-size: 0.7rem; line-height: 1.25; }
}

/* ═══ NUEVAS SECCIONES v2 ═══ */

/* ── NOTIFICATION BADGE (sidebar) ── */
.notif-badge {
  display: none; align-items: center; justify-content: center;
  background: #E74C3C; color: #fff; border-radius: 50%;
  width: 18px; height: 18px; font-size: 0.6rem; font-weight: 800;
  margin-left: auto; flex-shrink: 0;
}
.notif-badge--show { display: flex; }

/* ── NOTIFICACIONES ── */
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: all 0.2s;
}
.notif-item--unread {
  border-color: rgba(212,168,67,.25); background: rgba(212,168,67,.04);
}
.notif-item:hover { border-color: rgba(212,168,67,.35); }
.notif-item__ico { font-size: 1.3rem; flex-shrink: 0; }
.notif-item__body { flex: 1; }
.notif-item__msg { font-size: 0.86rem; line-height: 1.5; }
.notif-item__date { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }
.notif-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0; margin-top: 5px;
}

/* ── MENSAJES / CHAT ── */
.chat-wrap { max-width: 640px; }
.chat-msgs {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 380px; overflow-y: auto; margin-bottom: 14px; padding: 4px;
}
.chat-bub {
  max-width: 82%; padding: 10px 14px;
  border-radius: 12px; font-size: 0.86rem; line-height: 1.5;
}
.chat-bub--admin {
  background: rgba(212,168,67,.1); border: 1px solid rgba(212,168,67,.2);
  align-self: flex-end;
}
.chat-bub--cliente {
  background: var(--dark-700); border: 1px solid var(--dark-600);
  align-self: flex-start;
}
.chat-bub__meta { font-size: 0.68rem; color: var(--text-muted); margin-top: 5px; }
.chat-send { display: flex; gap: 8px; margin-top: 4px; }
.chat-input {
  flex: 1; background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: 10px; padding: 10px 12px; color: var(--text);
  font-size: 0.86rem; outline: none; resize: none; font-family: inherit;
  transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--gold); }

/* ── RUTINA CLIENTE ── */
.rut-daytabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.rut-daytab {
  padding: 7px 14px; background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: 20px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.rut-daytab:hover { border-color: rgba(212,168,67,.3); }
.rut-daytab.active {
  background: rgba(212,168,67,.1); border-color: var(--gold); color: var(--gold);
}
.rut-day-focus {
  font-size: 0.82rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px;
}
.ex-item {
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: 12px; padding: 16px; margin-bottom: 10px; transition: border-color 0.2s, background 0.2s;
}
/* ──────────────────────────────────────────────────────────────────
   TIPOS DE EJERCICIO (31 may 2026 — T51 ampliado a 5 tokens)
   ──────────────────────────────────────────────────────────────────
   El admin marca cada ejercicio con uno de los 5 tipos compartidos
   con la app móvil:
     entrenamiento  💪  gold     #D4A843  (default, sin badge)
     calentamiento  🔥  rojo     #E74C3C
     cardio         ❤️  rosa     #E55C8A
     movilidad      🔄  azul     #5BACEE
     estiramiento   🧘  verde    #4ADE80

   Cada tipo aplica:
     - .ex-item--<token>     → fondo con tinte sutil del color del tipo
     - .ex-tipo-badge--<token> → pill con color del tipo
     - Completado (.done)    → verde común gana sobre el color del tipo
   Tintes muy suaves (~6-8% alpha) para no agobiar la lectura.
   ────────────────────────────────────────────────────────────────── */
.ex-item--entrenamiento {
  background: linear-gradient(rgba(212,168,67,.06), rgba(212,168,67,.06)), var(--dark-800);
  border-color: rgba(212,168,67,.18);
}
.ex-item--calentamiento {
  background: linear-gradient(rgba(231,76,60,.07), rgba(231,76,60,.07)), var(--dark-800);
  border-color: rgba(231,76,60,.22);
}
.ex-item--cardio {
  background: linear-gradient(rgba(229,92,138,.07), rgba(229,92,138,.07)), var(--dark-800);
  border-color: rgba(229,92,138,.22);
}
.ex-item--movilidad {
  background: linear-gradient(rgba(91,172,238,.07), rgba(91,172,238,.07)), var(--dark-800);
  border-color: rgba(91,172,238,.22);
}
.ex-item--estiramiento {
  background: linear-gradient(rgba(74,222,128,.07), rgba(74,222,128,.07)), var(--dark-800);
  border-color: rgba(74,222,128,.22);
}
/* Alias legacy para clase antigua .ex-item--cal y .ex-item--entr
   (en caso de que algún cache antiguo aún la cargue, mantener
   visual coherente durante la transición). */
.ex-item--cal { background: linear-gradient(rgba(231,76,60,.07), rgba(231,76,60,.07)), var(--dark-800); border-color: rgba(231,76,60,.22); }
.ex-item--entr { background: linear-gradient(rgba(212,168,67,.06), rgba(212,168,67,.06)), var(--dark-800); border-color: rgba(212,168,67,.18); }

/* Estado completado: gana el verde sobre cualquier tipo. */
.ex-item.done,
.ex-item--cal.done,
.ex-item--entr.done,
.ex-item--entrenamiento.done,
.ex-item--calentamiento.done,
.ex-item--cardio.done,
.ex-item--movilidad.done,
.ex-item--estiramiento.done {
  border-color: rgba(46,204,113,.3);
  background: linear-gradient(rgba(46,204,113,.07), rgba(46,204,113,.07)), var(--dark-800);
}
.ex-item__top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
}
.ex-check {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--dark-500);
  background: none; cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 0.85rem; flex-shrink: 0;
  transition: all 0.2s; color: transparent; font-family: inherit;
}
.ex-check.checked { border-color: #2ECC71; background: #2ECC71; color: #fff; }
.ex-item__name { font-weight: 700; font-size: 0.92rem; flex: 1; }

/* Mini-badge del tipo — solo aparece para tipos no-entrenamiento
   (entrenamiento es default y no necesita marca visual). Una clase
   por tipo controla el color. */
.ex-tipo-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
  border: 1px solid transparent;
}
.ex-tipo-badge--calentamiento, .ex-tipo-badge--cal {
  background: rgba(231,76,60,.14); border-color: rgba(231,76,60,.30); color: #E74C3C;
}
.ex-tipo-badge--cardio {
  background: rgba(229,92,138,.14); border-color: rgba(229,92,138,.30); color: #E55C8A;
}
.ex-tipo-badge--movilidad {
  background: rgba(91,172,238,.14); border-color: rgba(91,172,238,.30); color: #5BACEE;
}
.ex-tipo-badge--estiramiento {
  background: rgba(74,222,128,.14); border-color: rgba(74,222,128,.30); color: #4ADE80;
}
/* En completado, todos los badges bajan saturación para no competir
   con el verde del entorno. */
.ex-item.done .ex-tipo-badge {
  opacity: 0.55;
}
.ex-item__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-badge {
  background: var(--dark-700); border: 1px solid var(--dark-500);
  border-radius: 6px; padding: 3px 9px; font-size: 0.72rem; font-weight: 600;
  color: var(--text-secondary);
}
.ex-mods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ex-mod-lbl {
  font-size: 0.67rem; color: var(--text-muted); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 3px;
}
.ex-mod-input {
  background: var(--dark-700); border: 1px solid var(--dark-500);
  border-radius: 6px; padding: 6px 9px; color: var(--text); font-size: 0.82rem;
  outline: none; width: 100%; transition: border-color 0.2s; font-family: inherit;
}
.ex-mod-input:focus { border-color: var(--gold); }
.ex-mod-input::placeholder { color: var(--text-muted); }
.ex-nota {
  width: 100%; background: var(--dark-700); border: 1px solid var(--dark-500);
  border-radius: 6px; padding: 7px 10px; color: var(--text); font-size: 0.82rem;
  outline: none; margin-top: 8px; resize: none; transition: border-color 0.2s;
  font-family: inherit;
}
.ex-nota:focus { border-color: rgba(212,168,67,.4); }
.ex-nota::placeholder { color: var(--text-muted); }

/* ── Botón "Ver vídeo" del ejercicio ──
   Aparece entre el header del ejercicio y la nota del admin. Solo se
   renderiza cuando el ejercicio tiene una URL válida (http/https),
   para no mostrar un botón roto. */
.ex-video-row {
  margin: 4px 0 8px;
}
.ex-video-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(212,168,67,.16), rgba(232,201,106,.06));
  border: 1px solid rgba(212,168,67,.32);
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}
.ex-video-btn:hover,
.ex-video-btn:focus-visible {
  background: linear-gradient(135deg, rgba(212,168,67,.28), rgba(232,201,106,.12));
  border-color: rgba(212,168,67,.55);
  box-shadow: 0 4px 14px rgba(212,168,67,.22);
  color: #E8C96A;
  outline: none;
}
.ex-video-btn__ico {
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(212,168,67,.22);
}

/* Info de rotación par/impar arriba del header de la rutina */
.rut-rotacion-info {
  display: inline-block;
  margin: 0 0 10px;
  padding: 6px 12px;
  font-size: 0.78rem;
  background: rgba(212,168,67,.10);
  border: 1px solid rgba(212,168,67,.25);
  border-radius: 999px;
  color: #E8C96A;
  font-weight: 600;
}

/* Variante naranja para cuando el cliente está usando una rutina
   distinta de la recomendada para esta semana */
.rut-rotacion-info--manual {
  background: rgba(232,184,75,.10);
  border-color: rgba(232,184,75,.32);
  color: #f0b95e;
}

/* ── Botón "Completar entrenamiento" del día activo ────────────────
   Aparece bajo la lista de ejercicios. Estados:
     --empty   gris muted, sin acción (0 ejercicios marcados)
     --partial dorado lleno, guarda progreso parcial
     --ready   verde llamativo, todos completados sin confirmar
     --saved   verde apagado, ya confirmado por el cliente
   Lleva una mini-barra de progreso encima con el % completado. */
/* ──────────────────────────────────────────────────────────────────
   NOTAS DE LA SESIÓN (26 may 2026)
   - .rut-nota-anterior : banner gold tenue arriba del entreno con la
                          nota de la última sesión con notas.
   - .rut-nota-sesion   : textarea editable al final del entreno donde
                          el cliente apunta sensaciones de HOY.
   Ambos elementos son sutiles: NO compiten visualmente con la lista
   de ejercicios. Inspirados en bloque informativo de roadmap-cliente.
   ────────────────────────────────────────────────────────────────── */
.rut-nota-anterior {
  margin: 4px 0 16px;
  padding: 10px 14px;
  background: rgba(212, 168, 67, 0.05);
  border-left: 3px solid rgba(212, 168, 67, 0.45);
  border-radius: 6px;
}
.rut-nota-anterior__head {
  font-size: 0.74rem;
  color: var(--gold);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rut-nota-anterior__fecha {
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: normal;
  font-size: 0.72rem;
  font-weight: 500;
}
.rut-nota-anterior__txt {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────────
   L.4 — ENTRENO MOVIDO (30 may 2026)
   - .rut-movido-banner : banner gold prominente arriba del entreno
                          cuando rutinaMovidoDeHoy tiene valor.
                          Indica "Entrenando el plan del lunes" (etc).
   - .rut-movido-btn    : botón inline "Hice esto otro día" debajo
                          del entreno, junto a las notas.
   El banner es visible (gold con borde), el botón es ghost (suave)
   porque la acción no es tan común como marcar ejercicios.
   ────────────────────────────────────────────────────────────────── */
.rut-movido-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 16px;
  padding: 12px 14px;
  background: rgba(212, 168, 67, 0.08);
  border: 1px solid rgba(212, 168, 67, 0.35);
  border-radius: 10px;
}
.rut-movido-banner__ico {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.rut-movido-banner__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rut-movido-banner__txt strong {
  color: var(--gold);
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: capitalize;
}
.rut-movido-banner__txt span {
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.rut-movido-banner__quitar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  font-size: 0.86rem;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.18s;
}
.rut-movido-banner__quitar:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.rut-movido-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 14px;
  background: transparent;
  border: 1px dashed rgba(212, 168, 67, 0.35);
  border-radius: 8px;
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
}
.rut-movido-btn:hover {
  background: rgba(212, 168, 67, 0.06);
  border-color: rgba(212, 168, 67, 0.6);
}

.rut-nota-sesion {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rut-nota-sesion__lbl {
  display: block;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.rut-nota-sesion__hint {
  margin: 0 0 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.rut-nota-sesion__ta {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 168, 67, 0.20);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 64px;
  transition: border-color 0.2s, background 0.2s;
}
.rut-nota-sesion__ta:focus {
  outline: none;
  border-color: rgba(212, 168, 67, 0.6);
  background: rgba(255, 255, 255, 0.05);
}
.rut-nota-sesion__ta::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.rut-completar-wrap {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.rut-completar-progress {
  position: relative;
  height: 6px;
  background: rgba(255,255,255,.05);
  border-radius: 999px;
  margin-bottom: 12px;
  overflow: hidden;
}
.rut-completar-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #E8C96A);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.rut-completar-progress__txt {
  position: absolute;
  top: -22px; right: 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.rut-completar {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 800;
  font-family: inherit;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  text-align: center;
}
.rut-completar:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.rut-completar--empty {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: var(--text-muted);
}
.rut-completar--partial {
  background: linear-gradient(135deg, rgba(212,168,67,.18), rgba(212,168,67,.08));
  border-color: rgba(212,168,67,.42);
  color: var(--gold);
}
.rut-completar--partial:hover {
  background: linear-gradient(135deg, rgba(212,168,67,.28), rgba(212,168,67,.14));
  border-color: rgba(212,168,67,.60);
  box-shadow: 0 4px 16px rgba(212,168,67,.22);
  transform: translateY(-1px);
}
.rut-completar--ready {
  background: linear-gradient(135deg, rgba(45,189,126,.22), rgba(45,189,126,.10));
  border-color: rgba(45,189,126,.50);
  color: #4adea1;
  font-size: 1rem;
  animation: rutCompletarPulse 1.6s ease-in-out infinite;
}
.rut-completar--ready:hover {
  background: linear-gradient(135deg, rgba(45,189,126,.34), rgba(45,189,126,.18));
  border-color: rgba(45,189,126,.70);
  box-shadow: 0 4px 18px rgba(45,189,126,.30);
  transform: translateY(-1px);
  animation: none;
}
.rut-completar--saved {
  background: rgba(45,189,126,.08);
  border-color: rgba(45,189,126,.30);
  color: #4adea1;
  cursor: default;
}
@keyframes rutCompletarPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,189,126,.32); }
  50%      { box-shadow: 0 0 0 8px rgba(45,189,126,0); }
}
/* Toast de feedback tras pulsar (insertado dinámicamente) */
.rut-completar-toast {
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: center;
  animation: rutToastIn 0.3s ease-out;
}
.rut-completar-toast--ok {
  background: rgba(45,189,126,.12);
  border: 1px solid rgba(45,189,126,.36);
  color: #4adea1;
}
.rut-completar-toast--err {
  background: rgba(231,76,60,.12);
  border: 1px solid rgba(231,76,60,.36);
  color: #ff7b6e;
}
@keyframes rutToastIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Histórico de entrenamientos (cliente, dentro de Mi Rutina) ──
   Acordeón colapsable al final del día activo. Carga lazy: el panel
   solo se llena la primera vez que el cliente lo expande. */
.rut-historico {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.rut-historico__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}
.rut-historico__toggle:hover {
  border-color: rgba(212,168,67,0.32);
  color: var(--gold);
  background: rgba(212,168,67,0.04);
}
.rut-historico__toggle-ico { font-size: 1.1rem; flex-shrink: 0; }
.rut-historico__toggle-text { flex: 1; text-align: left; }
.rut-historico__toggle-arrow {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
  color: var(--text-muted);
}
.rut-historico--open .rut-historico__toggle-arrow {
  transform: rotate(180deg);
  color: var(--gold);
}
.rut-historico__panel {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: rutHistFade 0.25s ease;
}
@keyframes rutHistFade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rut-historico__loading,
.rut-historico__empty,
.rut-historico__more {
  font-size: 0.84rem;
  color: var(--text-muted);
  text-align: center;
  padding: 16px 12px;
  margin: 0;
}
.rut-hist-row {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr 50px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--dark-800);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 0.15s ease;
  width: 100%;
}
.rut-hist-row:hover { background: rgba(212,168,67,0.04); }
.rut-hist-row__date strong {
  display: block;
  font-size: 0.86rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.rut-hist-row__date span {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: capitalize;
}
.rut-hist-row__bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.rut-hist-row__bar-fill { height: 100%; border-radius: 999px; }
.rut-hist-row__bar-fill--ok  { background: linear-gradient(90deg, #2DBD7E, #4adea1); }
.rut-hist-row__bar-fill--mid { background: linear-gradient(90deg, var(--gold), #E8C96A); }
.rut-hist-row__bar-fill--low { background: linear-gradient(90deg, #E74C3C, #ff7b6e); }
.rut-hist-row__pct {
  font-size: 0.84rem;
  font-weight: 800;
  text-align: center;
}
.rut-hist-row__pct--ok  { color: #4adea1; }
.rut-hist-row__pct--mid { color: var(--gold); }
.rut-hist-row__pct--low { color: #ff7b6e; }
.rut-hist-row__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(45,189,126,0.14);
  border: 1px solid rgba(45,189,126,0.36);
  color: #4adea1;
  vertical-align: middle;
}
.rut-hist-row__expand {
  grid-column: 1 / -1;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
  animation: rutHistFade 0.2s ease;
}
.rut-hist-summary {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.rut-hist-summary strong { color: var(--gold); }
.rut-hist-ej {
  padding: 6px 10px;
  margin-bottom: 4px;
  background: rgba(0,0,0,0.18);
  border-left: 3px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.rut-hist-ej--ok { border-left-color: #2DBD7E; }
.rut-hist-ej__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  font-size: 0.74rem;
  flex-shrink: 0;
}
.rut-hist-ej--ok .rut-hist-ej__check { background: #2DBD7E; color: #fff; font-weight: 900; }
.rut-hist-ej__plan {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}
.rut-hist-ej__real,
.rut-hist-ej__nota {
  flex-basis: 100%;
  padding-left: 24px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  margin-top: 4px;
}
.rut-hist-ej__real strong { color: var(--gold); }
.rut-hist-ej__nota { font-style: italic; color: var(--text-muted); }

/* ── Selector de rutina (cliente con 2+ rutinas publicadas) ── */
.rut-selector {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(212,168,67,.06), rgba(232,201,106,.02));
  border: 1px solid rgba(212,168,67,.22);
  border-radius: 10px;
}
.rut-selector__lbl {
  font-size: 0.78rem;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rut-selector__sel {
  flex: 1;
  min-width: 180px;
  background: var(--dark-700);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--text);
  font-size: 0.84rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.2s;
}
.rut-selector__sel:focus {
  outline: none;
  border-color: rgba(212,168,67,.5);
}
.rut-selector__reset {
  background: rgba(212,168,67,.14);
  border: 1px solid rgba(212,168,67,.3);
  border-radius: 6px;
  padding: 7px 12px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.rut-selector__reset:hover {
  background: rgba(212,168,67,.24);
  border-color: rgba(212,168,67,.5);
}
@media (max-width: 540px) {
  .rut-selector { flex-direction: column; align-items: stretch; gap: 6px; }
  .rut-selector__lbl { font-size: 0.72rem; }
  .rut-selector__reset { text-align: center; }
}

/* ── MENÚ CLIENTE ── */
.menu-view-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.menu-view-tab {
  padding: 7px 14px; background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: 20px; color: var(--text-muted); font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.menu-view-tab:hover { border-color: rgba(212,168,67,.3); }
.menu-view-tab.active {
  background: rgba(212,168,67,.1); border-color: var(--gold); color: var(--gold);
}
.meal-view {
  background: var(--dark-800); border: 1px solid var(--dark-600);
  border-radius: 12px; padding: 16px; margin-bottom: 10px;
}
.meal-view__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.meal-view__name { font-weight: 700; font-size: 0.9rem; }
.meal-foods { display: flex; flex-direction: column; gap: 5px; }
.meal-food {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.86rem; color: var(--text-secondary);
  padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.meal-food:last-child { border-bottom: none; }
.meal-food::before { content: '·'; color: var(--gold); font-weight: 800; flex-shrink: 0; line-height: 1.5; }
.menu-empty { color: var(--text-muted); font-size: 0.82rem; font-style: italic; }

/* ── BONOS PRÓXIMAMENTE ── */
.bono-coming {
  background: linear-gradient(135deg, var(--dark-800), var(--dark-900));
  border: 1px solid rgba(212,168,67,.1); border-radius: 16px;
  padding: 60px 40px; text-align: center; max-width: 520px; margin: 0 auto;
}
.bono-coming__icon { font-size: 3rem; margin-bottom: 14px; }
.bono-coming__title {
  font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800; margin-bottom: 10px;
}
.bono-coming__text { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; }
.bono-coming__badge {
  display: inline-block; background: rgba(212,168,67,.1);
  border: 1px solid rgba(212,168,67,.25); color: var(--gold);
  border-radius: 20px; padding: 4px 16px; font-size: 0.76rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── TOPBAR LOGOUT (MÓVIL) ── */
.topbar__logout {
  font-size: 0.78rem; padding: 5px 12px; border-radius: 8px; margin-left: auto;
}

@media (max-width: 640px) {
  .ex-mods { grid-template-columns: 1fr; }
  .bono-coming { padding: 40px 24px; }
}

/* ════════════════════════════════════════════════════════════════════
   HUD DIARIO — Dashboard cliente (HOY)
   Bloques: saludo, checklist mínimo del día, progreso, accesos rápidos.
   Diseño validado por Miguel con mockup en 5 escenarios (oct/may 2026).
   ════════════════════════════════════════════════════════════════════ */

/* ── Saludo dinámico ────────────────────────────────────────────────── */
.hud-greeting {
  margin-bottom: 32px;
  animation: fadeUp 0.5s ease both;
}
.hud-greeting__hi {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.15;
}
.hud-greeting__hi span { color: var(--gold); }
.hud-greeting__day {
  font-size: 0.92rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hud-greeting__day-num {
  font-weight: 700;
  color: var(--gold);
}
.hud-greeting__motivation {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 500;
}

/* ── Checklist diario ───────────────────────────────────────────────── */
.hud-checklist {
  background: linear-gradient(180deg, rgba(212,168,67,0.04) 0%, rgba(212,168,67,0.01) 100%);
  border: 1px solid rgba(212,168,67,0.20);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
  animation: fadeUp 0.6s ease both;
}
.hud-checklist__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hud-checklist__title-ico { font-size: 1.4rem; }
.hud-checklist__sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.hud-checklist__items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hud-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-primary);
  transition: var(--transition);
}
.hud-item:hover {
  background: rgba(212,168,67,0.06);
  border-color: rgba(212,168,67,0.35);
  transform: translateX(4px);
}
.hud-item__check {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 800;
  transition: var(--transition);
}
.hud-item--done .hud-item__check {
  background: var(--green);
  border-color: var(--green);
  color: white;
}
.hud-item--done { opacity: 0.6; }
.hud-item--done .hud-item__txt {
  text-decoration: line-through;
  color: var(--text-muted);
}
.hud-item__ico {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.hud-item__body {
  flex: 1;
  min-width: 0;
}
.hud-item__txt {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
}
.hud-item__sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.hud-item__cta {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
  white-space: nowrap;
}
.hud-item--urgent {
  border-color: rgba(212,168,67,0.5);
  background: rgba(212,168,67,0.06);
}
.hud-item--urgent .hud-item__check {
  border-color: var(--gold);
  color: var(--gold);
}
.hud-checklist--alldone {
  text-align: center;
  padding: 32px 24px;
}
.hud-checklist--alldone .hud-checklist__title {
  justify-content: center;
  color: var(--green);
}
.hud-checklist__alldone-msg {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* Sub-checklist embebido (revisión mensual, etc.) */
.hud-item__sublist {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.hud-item__sublist li {
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hud-item__sublist-ok { color: var(--green); }
.hud-item__sublist-warn { color: var(--gold-light); }

/* ── Progreso ───────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────
   HUD WIDGET PASOS (27 may 2026)
   Card opt-in en el HUD del dashboard. Cliente la activa desde el
   promo button al final del HUD si quiere trackear pasos diariamente.
   La preferencia vive en /users/{uid}/perfil/preferences.pasosWidgetEnabled.
   Estilo: coherente con hud-checklist y hud-progress, pero con un
   borde gold más sutil para diferenciarse del progress (que es la
   sección "estrella" del HUD).
   ────────────────────────────────────────────────────────────────── */
.hud-pasos {
  background: linear-gradient(135deg, rgba(212,168,67,0.04), rgba(212,168,67,0.01));
  border: 1px solid rgba(212,168,67,0.18);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 24px;
  animation: fadeUp 0.7s ease both;
}
.hud-pasos__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.hud-pasos__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-pasos__sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}
.hud-pasos__menu {
  background: transparent;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text-muted);
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.hud-pasos__menu:hover {
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-color: rgba(255,255,255,.18);
}
.hud-pasos__input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.hud-pasos__input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(212,168,67,.20);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  min-width: 0;
}
.hud-pasos__input:focus {
  outline: none;
  border-color: rgba(212,168,67,.55);
  background: rgba(255,255,255,.05);
}
.hud-pasos__suffix {
  font-size: .82rem;
  color: var(--text-muted);
  font-weight: 600;
}
.hud-pasos__save {
  padding: 10px 16px;
  background: var(--gold);
  border: none;
  border-radius: 8px;
  color: #0F0F11;
  font-weight: 700;
  font-size: .86rem;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, transform .15s;
}
.hud-pasos__save:hover { background: #E8C96A; }
.hud-pasos__save:active { transform: scale(.97); }
.hud-pasos__save:disabled {
  opacity: .5;
  cursor: not-allowed;
  background: var(--gold);
}
.hud-pasos__status {
  font-size: .78rem;
  margin: 0 0 10px;
  min-height: 1em;
  transition: color .2s;
}
.hud-pasos__status.is-ok  { color: #2ECC71; }
.hud-pasos__status.is-err { color: #E74C3C; }
.hud-pasos__stats {
  display: flex;
  gap: 16px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.05);
  flex-wrap: wrap;
}
.hud-pasos__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hud-pasos__stat-lbl {
  font-size: .68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
}
.hud-pasos__stat-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text);
}
.hud-pasos__link {
  margin-left: auto;
  font-size: .78rem;
  color: var(--gold);
  text-decoration: none;
  font-weight: 600;
}
.hud-pasos__link:hover { text-decoration: underline; }

/* Promo button — invitación opt-in al final del HUD. Muy discreto. */
.hud-pasos-promo {
  margin-bottom: 24px;
  animation: fadeUp 0.7s ease both;
}
.hud-pasos-promo__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,.02);
  border: 1px dashed rgba(212,168,67,.25);
  border-radius: var(--radius);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background .2s, border-color .2s, color .2s;
}
.hud-pasos-promo__btn:hover {
  background: rgba(212,168,67,.04);
  border-color: rgba(212,168,67,.50);
  color: var(--text);
}
.hud-pasos-promo__ico {
  font-size: 1.2rem;
  color: var(--gold);
  flex-shrink: 0;
}
.hud-pasos-promo__txt {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hud-pasos-promo__txt strong {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
}
.hud-pasos-promo__sub {
  font-size: .74rem;
  color: var(--text-muted);
}
.hud-pasos-promo__arrow {
  font-size: 1.3rem;
  color: var(--gold);
  flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────
   HUD ÚLTIMA NOTA DE SESIÓN (27 may 2026)
   Banner sutil con la última nota del cliente sobre su sesión.
   Solo aparece si hay nota reciente (últimos 7 días).
   ────────────────────────────────────────────────────────────────── */
.hud-ultima-nota {
  background: linear-gradient(135deg, rgba(212,168,67,0.04), rgba(212,168,67,0.01));
  border-left: 3px solid rgba(212,168,67,0.45);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 24px;
  animation: fadeUp 0.7s ease both;
}
.hud-ultima-nota__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hud-ultima-nota__ico {
  font-size: 1.05rem;
}
.hud-ultima-nota__lbl {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--gold);
}
.hud-ultima-nota__fecha {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-left: auto;
  font-weight: 500;
}
.hud-ultima-nota__txt {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.hud-progress {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 14px;
  margin-bottom: 24px;
  animation: fadeUp 0.7s ease both;
}
.hud-progress__card {
  background: linear-gradient(135deg, rgba(212,168,67,0.08), rgba(212,168,67,0.02));
  border: 1px solid rgba(212,168,67,0.25);
  border-radius: var(--radius);
  padding: 22px 22px;
  position: relative;
  overflow: hidden;
}
.hud-progress__card::before {
  content: '';
  position: absolute;
  top: -50%; right: -30%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(212,168,67,0.15), transparent 70%);
  pointer-events: none;
}
.hud-progress__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}
.hud-progress__big {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
  margin-bottom: 4px;
}
.hud-progress__big-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.hud-progress__bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.hud-progress__pct {
  font-family: 'Playfair Display', serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--gold);
}
.hud-progress__bar {
  height: 10px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin: 12px 0 8px;
}
.hud-progress__bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hud-progress__bar-foot {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ── Accesos rápidos (grid 2x2 editable) ────────────────────────────── */
.hud-quick {
  margin-bottom: 32px;
  animation: fadeUp 0.8s ease both;
}
.hud-quick__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hud-quick__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hud-quick__edit {
  background: rgba(212,168,67,0.10);
  border: 1px solid rgba(212,168,67,0.30);
  color: var(--gold);
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.hud-quick__edit:hover {
  background: rgba(212,168,67,0.20);
  transform: rotate(15deg);
}
.hud-quick__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hud-quick__btn {
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  padding: 22px 20px;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  min-height: 110px;
  cursor: pointer;
}
.hud-quick__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(212,168,67,0.08), transparent 60%);
  opacity: 0;
  transition: var(--transition);
}
.hud-quick__btn:hover {
  border-color: rgba(212,168,67,0.50);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), 0 0 20px rgba(212,168,67,0.15);
}
.hud-quick__btn:hover::before { opacity: 1; }
.hud-quick__btn-ico {
  font-size: 2rem;
  position: relative; z-index: 1;
}
.hud-quick__btn-txt {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  position: relative; z-index: 1;
}
.hud-quick__btn-cta {
  font-size: 0.72rem;
  color: var(--gold);
  font-weight: 600;
  position: relative; z-index: 1;
}

/* ── Modal de edición accesos rápidos ───────────────────────────────── */
.hud-edit-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.2s ease;
}
.hud-edit-modal--open { display: flex; }
.hud-edit-modal__panel {
  background: var(--dark-900);
  border: 1px solid rgba(212,168,67,0.3);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.hud-edit-modal__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 4px;
}
.hud-edit-modal__sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.hud-edit-modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.hud-edit-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}
.hud-edit-modal__item:hover {
  background: rgba(212,168,67,0.05);
  border-color: rgba(212,168,67,0.25);
}
.hud-edit-modal__item--selected {
  background: rgba(212,168,67,0.10);
  border-color: var(--gold);
}
.hud-edit-modal__item-ico { font-size: 1.4rem; }
.hud-edit-modal__item-txt {
  flex: 1;
  font-weight: 600;
  font-size: 0.92rem;
}
.hud-edit-modal__item-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.hud-edit-modal__item--selected .hud-edit-modal__item-check {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-900);
}
.hud-edit-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.hud-edit-modal__btn {
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  font-size: 0.88rem;
  transition: var(--transition);
}
.hud-edit-modal__btn--cancel {
  background: transparent;
  border-color: rgba(255,255,255,0.15);
  color: var(--text-secondary);
}
.hud-edit-modal__btn--cancel:hover {
  background: rgba(255,255,255,0.05);
  color: var(--text-primary);
}
.hud-edit-modal__btn--save {
  background: var(--gold);
  color: var(--dark-900);
}
.hud-edit-modal__btn--save:hover {
  background: var(--gold-light);
}
.hud-edit-modal__hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 14px;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .hud-progress { grid-template-columns: 1fr; }
  .hud-progress__big,
  .hud-progress__pct { font-size: 2.2rem; }
  .hud-item { padding: 12px; gap: 10px; }
  .hud-item__cta { font-size: 0.75rem; }
  .hud-edit-modal__panel { padding: 22px 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   BLOQUE N FASE 8 — Vista cliente (carpetas + rutina del día)
   ════════════════════════════════════════════════════════════════════ */

/* Card grande "Tu rutina de hoy" */
.cli-card-hoy {
  background: linear-gradient(135deg, rgba(212,168,67,.10) 0%, rgba(212,168,67,.04) 100%);
  border: 1px solid rgba(212,168,67,.35);
  border-radius: 18px;
  padding: 24px 22px;
  margin-bottom: 26px;
}
.cli-card-hoy__hdr {
  margin-bottom: 8px;
}
.cli-card-hoy__lbl {
  font-size: .76rem;
  font-weight: 700;
  color: #D4A843;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.cli-card-hoy__nombre {
  font-family: var(--serif);
  font-size: 1.85rem;
  font-weight: 800;
  color: #F5F5F5;
  margin: 6px 0 8px;
  line-height: 1.15;
}
.cli-card-hoy__meta {
  font-size: .88rem;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.cli-card-hoy__btn {
  background: #D4A843;
  color: #111;
  border: none;
  padding: 13px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  width: 100%;
  transition: all .15s ease;
  font-family: inherit;
}
.cli-card-hoy__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212,168,67,.35);
}

/* Card descanso */
.cli-card-descanso {
  background: var(--dark-800);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  padding: 32px 22px;
  text-align: center;
  margin-bottom: 26px;
}
.cli-card-descanso__ico {
  font-size: 2.6rem;
  display: block;
  margin-bottom: 10px;
}
.cli-card-descanso__titulo {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #F5F5F5;
  margin: 0 0 8px;
}
.cli-card-descanso__sub {
  font-size: .92rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
}

/* Sección título */
.cli-section-titulo {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: #F5F5F5;
  margin: 0 0 14px;
}

/* Grid cards de carpetas */
.cli-carpetas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.cli-carpeta-card {
  background: var(--dark-800);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 18px 16px;
  cursor: pointer;
  transition: all .18s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.cli-carpeta-card:hover {
  transform: translateY(-2px);
  border-color: rgba(212,168,67,.3);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.cli-carpeta-card__ico {
  font-size: 1.5rem;
  line-height: 1;
}
.cli-carpeta-card__nombre {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 800;
  color: #F5F5F5;
  margin: 6px 0 2px;
}
.cli-carpeta-card__count {
  font-size: .78rem;
  color: var(--text-muted);
}

/* Back bar (header con botón volver) */
.cli-back-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cli-back-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .88rem;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  flex-shrink: 0;
}
.cli-back-btn:hover {
  background: rgba(212,168,67,.08);
  border-color: rgba(212,168,67,.3);
  color: #D4A843;
}
.cli-back-bar__info {
  flex: 1;
  min-width: 0;
}
.cli-back-bar__titulo {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 800;
  color: #F5F5F5;
  margin: 0;
  line-height: 1.2;
}
.cli-back-bar__meta {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}

/* Lista de rutinas dentro de una carpeta */
.cli-rutinas-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cli-rutina-row {
  background: var(--dark-800);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all .15s ease;
  font-family: inherit;
  color: inherit;
  text-align: left;
}
.cli-rutina-row:hover {
  border-color: rgba(212,168,67,.3);
  background: rgba(212,168,67,.04);
}
.cli-rutina-row--hoy {
  border-color: rgba(212,168,67,.35);
  background: rgba(212,168,67,.06);
}
.cli-rutina-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cli-rutina-row__nombre {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 800;
  color: #F5F5F5;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cli-rutina-row__hoy {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(212,168,67,.18);
  color: #D4A843;
  font-weight: 700;
  letter-spacing: .04em;
}
.cli-rutina-row__meta {
  font-size: .78rem;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.cli-rutina-row__dias {
  display: flex;
  gap: 3px;
}
.cli-rutina-row__dia {
  display: inline-block;
  width: 22px;
  text-align: center;
  padding: 2px 0;
  border-radius: 4px;
  background: rgba(255,255,255,.04);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .68rem;
  font-family: monospace;
}
.cli-rutina-row__dia--on {
  background: rgba(212,168,67,.18);
  color: #D4A843;
}
.cli-rutina-row__chevron {
  font-size: 1.5rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.cli-rutina-row:hover .cli-rutina-row__chevron {
  color: #D4A843;
}

/* Mobile */
@media (max-width: 540px) {
  .cli-card-hoy { padding: 20px 18px; }
  .cli-card-hoy__nombre { font-size: 1.55rem; }
  .cli-carpetas-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Fase 9 — Banner informativo de modo de carpeta */
.cli-modo-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(212,168,67,.08);
  border: 1px solid rgba(212,168,67,.18);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cli-modo-banner__ico {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.cli-modo-banner__txt {
  font-size: .86rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}