/* ═══════════════════════════════════════════════════════════════
   LYVA — Sistema de diseño v6 ("verde progreso sobre papel cálido")
   Reemplaza el tema azul anterior manteniendo los MISMOS nombres de
   clase: todas las páginas (login, cliente, coach, admin, join,
   invite) se reentapizan sin tocar su lógica.
   Glosario: la rutina se ENVÍA, la sesión se EMPIEZA/TERMINA,
   la serie se GUARDA, la marca se SUPERA.
   ═══════════════════════════════════════════════════════════════ */

/* ── Fuentes self-hosteadas (funcionan sin señal en el gym) ── */
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bricolage Grotesque'; src:url('/fonts/bricolage-grotesque-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
  /* Tokens v6 */
  --bg:#faf9f7;            /* papel cálido */
  --panel:#ffffff;         /* tarjetas */
  --panel2:#f3f1ec;        /* inputs, fondos suaves */
  --line:#ebe9e3;          /* divisores */
  --text:#1b2420;          /* texto principal */
  --dim:#58655e;           /* secundario (AA sobre blanco) */
  --accent:#15804f;        /* verde progreso — acción primaria */
  --accent2:#0e6440;       /* verde profundo — énfasis/activo */
  --accent-soft:#e6f4ec;
  --green:#15804f;
  --red:#a8392c;
  --amber:#996310;
  --amber-soft:#faf0dd;
  --gray:#6f7b74;
  --font-display:'Bricolage Grotesque','Avenir Next','Helvetica Neue',-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  --sh-sm:0 1px 2px rgba(27,36,32,.05);
  --sh-md:0 1px 2px rgba(27,36,32,.04), 0 12px 30px rgba(27,36,32,.08);
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { background:var(--bg); color:var(--text); font-family:var(--font-body); -webkit-font-smoothing:antialiased; font-size:15.5px; line-height:1.55; }
body { padding-bottom:48px; }
a { color:var(--accent2); }
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }

/* ── Header ── */
.header { padding:24px 22px 18px; background:var(--bg); display:flex; justify-content:space-between; align-items:flex-end; }
.kicker { font-size:12.5px; color:var(--dim); font-weight:600; }
h1 { font-family:var(--font-display); font-size:26px; font-weight:700; letter-spacing:-0.015em; margin-top:3px; }
h2 { font-family:var(--font-display); font-size:17px; font-weight:700; margin-bottom:10px; letter-spacing:-0.01em; }
.logout { font-size:12.5px; color:var(--dim); background:var(--panel); border:none; box-shadow:var(--sh-sm); border-radius:10px; padding:9px 13px; cursor:pointer; font-weight:600; }
.logout:active { color:var(--accent2); }

.pad { padding:18px 22px 6px; max-width:760px; margin:0 auto; }
.section-label { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--text); margin:10px 0 12px; letter-spacing:-0.01em; }

/* ── Tarjetas ── */
.card { background:var(--panel); border:none; border-radius:16px; padding:17px 18px; margin-bottom:12px; box-shadow:var(--sh-sm); }
.card.flat { box-shadow:var(--sh-sm); }
.row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.muted { color:var(--dim); font-size:13.5px; }
.tag { font-size:11px; font-weight:700; color:var(--accent2); background:var(--accent-soft); border:none; border-radius:999px; padding:4px 10px; }

/* ── Formularios ── */
input, textarea, select { width:100%; background:var(--panel2); color:var(--text); border:1.5px solid transparent; border-radius:12px; font-family:inherit; outline:none; font-size:16px; padding:13px 13px; transition:border-color .15s, background .15s; }
input:focus, textarea:focus, select:focus { border-color:var(--accent); background:var(--panel); }
input::placeholder, textarea::placeholder { color:var(--gray); }
/* Mostrar/ocultar contraseña */
.pw-wrap { position:relative; display:block; }
.pw-wrap input.pw-input { padding-right:48px; }
.pw-toggle { position:absolute; right:7px; top:50%; transform:translateY(-50%); width:36px; height:36px; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; margin:0; cursor:pointer; color:var(--gray); border-radius:9px; }
.pw-toggle:hover { color:var(--accent); }
.pw-toggle:active { color:var(--accent2); }
.pw-toggle svg { width:21px; height:21px; display:block; }
label { display:block; font-size:13px; font-weight:600; color:var(--dim); margin:14px 0 6px; text-transform:none; letter-spacing:0; }
textarea { resize:vertical; }

/* ── Botones ── */
.btn { width:100%; background:var(--accent); color:#fff; border:none; border-radius:13px; padding:15px; font-size:15px; font-weight:700; letter-spacing:0; cursor:pointer; text-transform:none; transition:transform .12s, background .15s; font-family:inherit; }
.btn:active { background:var(--accent2); transform:scale(.985); }
.btn:disabled { opacity:.45; transform:none; }
.btn.secondary { background:var(--panel); border:none; box-shadow:var(--sh-sm); color:var(--text); }
.btn.secondary:active { background:var(--panel2); }
.btn.small { width:auto; padding:11px 16px; font-size:13.5px; border-radius:11px; }

/* ── Grid de sets (registro de sesión) ── */
.grid-sets { display:grid; grid-template-columns:34px 1fr 1fr; gap:8px; align-items:start; }
.col-label { font-size:12px; color:var(--dim); font-weight:600; text-transform:none; letter-spacing:0; }
.set-num { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--accent2); text-align:center; padding-top:13px; }
.prefill { font-size:12px; color:var(--dim); text-align:center; margin-top:4px; }
.prefill b { color:var(--accent2); }

.empty { text-align:center; color:var(--dim); font-size:14px; padding:30px 10px; line-height:1.6; }
.flash { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--text); color:#fff; font-size:13px; font-weight:600; padding:11px 20px; border-radius:999px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:50; box-shadow:var(--sh-md); }
.flash.show { opacity:1; }
.flash.error { background:var(--red); }

/* ── Tendencias (lenguaje simple, nunca castiga) ── */
.trend { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; }
.trend .arrow { font-size:15px; }
.trend.up { color:var(--green); }
.trend.down { color:var(--amber); }   /* bajar = atención, no alarma roja */
.trend.flat, .trend.none, .trend.new { color:var(--gray); }

.spark { width:100%; height:46px; display:block; margin-top:10px; }

/* ── Login ── */
.auth-wrap { max-width:420px; margin:9vh auto 0; padding:0 22px; }
.brand { font-family:var(--font-display); font-size:42px; font-weight:700; color:var(--text); letter-spacing:-0.02em; }
.brand-sub { color:var(--dim); font-size:15px; margin:8px 0 26px; }
.toggle-role { display:flex; background:var(--panel2); border-radius:999px; padding:4px; gap:0; margin-bottom:20px; }
.toggle-role button { flex:1; background:transparent; border:none; color:var(--dim); border-radius:999px; padding:12px; font-weight:600; font-size:14.5px; cursor:pointer; font-family:inherit; transition:all .2s; }
.toggle-role button.active { background:var(--panel); color:var(--text); box-shadow:var(--sh-sm); border:none; }
.switch-mode { text-align:center; font-size:13.5px; color:var(--dim); margin-top:18px; line-height:1.55; }
.switch-mode a { cursor:pointer; font-weight:600; }

.pill-stat { display:inline-block; font-size:12.5px; color:var(--dim); margin-right:16px; }
.pill-stat b { color:var(--text); font-size:18px; display:block; font-family:var(--font-display); font-weight:700; }

.client-item { cursor:pointer; }
.client-item:active { background:var(--panel2); }
.alert-dot { display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--amber); margin-left:7px; }
.back { font-size:13.5px; color:var(--dim); cursor:pointer; margin-bottom:14px; display:inline-block; font-weight:600; }

/* ── Buscador (lista de clientes del coach) ── */
.search-box { display:flex; align-items:center; gap:10px; background:var(--panel); border:1.5px solid transparent; border-radius:13px; padding:0 14px; box-shadow:var(--sh-sm); margin:14px 0 12px; }
.search-box:focus-within { border-color:var(--accent); }
.search-box input { background:none; border:none; padding:13px 0; }
.search-box input:focus { background:none; border:none; }

/* ── Estado grande del progreso ("¿Cómo voy?") ── */
.bigstat { background:var(--panel); border-radius:16px; box-shadow:var(--sh-md); padding:20px 18px; margin-bottom:12px; }
.bigstat .v { font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--accent2); }
.bigstat.floja .v { color:var(--amber); }
.bigstat.nueva .v { color:var(--text); }
.bigstat .l { font-size:14.5px; color:var(--dim); margin-top:4px; line-height:1.5; }

/* ── Estadísticas del admin ── */
.card.stat { text-align:center; padding:18px 12px; }
.stat-n { font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--text); line-height:1; }
.stat-n .stat-of { font-size:16px; font-weight:600; color:var(--dim); }
.stat-l { font-size:12px; color:var(--dim); margin-top:8px; font-weight:600; }

/* ── Calendario de actividad (mapa tipo racha) ── */
.cal { background:var(--panel); border-radius:16px; box-shadow:var(--sh-md); padding:18px; margin-bottom:12px; }
.cal-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.cal-streak { font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--accent); line-height:1; }
.cal-streak .u { font-size:13px; color:var(--dim); font-weight:600; }
.cal-streak.zero { color:var(--gray); }
.cal-sub { font-size:12px; color:var(--dim); }
.cal-total { text-align:right; }
.cal-total .n { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text); line-height:1; }
.cal-grid { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:3px; overflow-x:auto; padding-bottom:2px; }
.cal-cell { width:13px; height:13px; border-radius:3px; background:var(--g0); flex:none; }
.cal-cell.g1 { background:var(--g1); } .cal-cell.g2 { background:var(--g2); }
.cal-cell.g3 { background:var(--g3); } .cal-cell.g4 { background:var(--g4); }
.cal-legend { display:flex; align-items:center; gap:5px; justify-content:flex-end; margin-top:10px; font-size:10.5px; color:var(--dim); }
.cal-legend .cal-cell { width:11px; height:11px; }
/* Escala de intensidad derivada del verde de marca (#15804f), sobre papel cálido */
:root {
  --g0:#ece9e3; --g1:#bfe0cb; --g2:#7fc59c; --g3:#3f9e6e; --g4:#15804f;
}
/* Mini-racha del coach (7 días) en la fila del cliente */
.mini-cal { display:inline-flex; gap:2.5px; vertical-align:middle; margin-left:8px; }
.mini-cal .cal-cell { width:10px; height:10px; border-radius:2px; }

/* ═══ Importar rutina con IA (subida: drag & drop + estados) ═══ */
.up-kick { font-size:11.5px; color:var(--accent2); font-weight:700; letter-spacing:.03em; text-transform:uppercase; display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.up-kick svg { width:15px; height:15px; flex:none; }
.up-title { font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.015em; color:var(--text); line-height:1.2; margin-bottom:18px; }
.up-drop { border:1.5px dashed #d0d6cf; border-radius:20px; background:var(--panel); padding:42px 22px; text-align:center; cursor:pointer; transition:border-color .18s, background .18s, transform .18s; }
.up-drop.drag { border-color:var(--accent); border-style:solid; background:var(--accent-soft); transform:scale(1.012); }
.up-ic { color:var(--accent); margin-bottom:14px; display:flex; justify-content:center; }
.up-ic svg { width:30px; height:30px; }
.up-t1 { font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--text); }
.up-t2 { font-size:13.5px; color:var(--dim); margin-top:8px; line-height:1.5; }
.up-fmts { text-align:center; font-size:11.5px; color:var(--dim); letter-spacing:.05em; text-transform:uppercase; margin:18px 0 14px; }
.up-note { font-size:12.5px; color:var(--dim); display:flex; gap:7px; align-items:center; justify-content:center; text-align:center; line-height:1.5; }
.up-note svg { width:16px; height:16px; color:var(--accent); flex:none; }
.up-file { display:flex; align-items:center; gap:12px; background:var(--panel); border:none; box-shadow:var(--sh-sm); border-radius:16px; padding:14px; margin-bottom:14px; }
.up-file .fic { width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.up-file .fic svg { width:21px; height:21px; }
.up-file .fn { font-weight:600; font-size:14px; color:var(--text); word-break:break-all; }
.up-file .fs { font-size:12px; color:var(--accent2); margin-top:2px; font-weight:600; }
.up-file .fx { margin-left:auto; color:var(--dim); background:none; border:none; font-size:17px; cursor:pointer; padding:4px 6px; flex:none; }
.up-state { text-align:center; padding:70px 12px 40px; }
.up-spin { width:42px; height:42px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); margin:0 auto 20px; animation:upspin 1s linear infinite; }
@keyframes upspin { to { transform:rotate(360deg); } }
.up-badge { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.up-badge svg { width:32px; height:32px; }
.up-badge.ok { background:var(--accent); color:#fff; animation:uppop .38s ease; }
.up-badge.err { background:#f6e4e1; color:var(--red); }
@keyframes uppop { 0% { transform:scale(.55); opacity:0; } 100% { transform:scale(1); opacity:1; } }
/* Segmentado plantilla/cliente en la lista de detectadas */
.seg { display:flex; background:var(--panel2); border-radius:999px; padding:3px; margin-bottom:14px; }
.seg button { flex:1; border:none; background:none; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--dim); padding:10px; border-radius:999px; cursor:pointer; }
.seg button.on { background:var(--panel); color:var(--text); box-shadow:var(--sh-sm); }
/* Fila de rutina detectada */
.det-row { display:flex; align-items:center; gap:12px; background:var(--panel); border:none; box-shadow:var(--sh-sm); border-radius:14px; padding:13px 14px; margin-bottom:9px; cursor:pointer; }
.det-row:active { background:var(--panel2); }
.det-row .dn { font-weight:600; font-size:14.5px; color:var(--text); }
.det-row .dx { font-size:12px; color:var(--dim); margin-top:2px; }
.det-row .dv { margin-left:auto; color:var(--accent2); font-size:13px; font-weight:600; white-space:nowrap; }

/* ── Modal propio (reemplaza confirm/prompt nativos) ── */
.lv-overlay { position:fixed; inset:0; background:rgba(27,36,32,.45); display:flex; align-items:center; justify-content:center; padding:22px; z-index:100; opacity:0; transition:opacity .15s; }
.lv-overlay.show { opacity:1; }
.lv-modal { background:var(--panel); border-radius:18px; box-shadow:var(--sh-md); padding:22px; width:100%; max-width:380px; }
.lv-modal h3 { font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-0.01em; margin-bottom:8px; }
.lv-modal .lv-body { color:var(--dim); font-size:14px; line-height:1.55; margin-bottom:18px; }
.lv-modal .lv-actions { display:flex; flex-direction:column; gap:8px; }
.btn.danger { background:var(--red); }
.btn.danger:active { background:#8a2f24; }