/* ══════════════════════════════════════════════════════════════
   Programa 21 días · piel del sistema nuevo (2026-08-09)
   Solo estilos. No toca markup, ni clases, ni JS.

   INSTALACIÓN (una línea, en <head>, DESPUÉS del <style> de la página
   y después de auth-shell.css):

     <link rel="stylesheet" href="/programa-21-skin.css?v=1">

   Va al final a propósito: así redefine los tokens del :root de la
   página y gana por orden, sin subir especificidad ni usar !important
   salvo donde la regla original ya era muy específica.

   OJO: esta app SI vive bajo un service worker. index.html registra
   /sw-atomico.js sin scope, o sea scope '/', y controla todo el origen,
   incluido /programa-21-dias.html. Por eso esta hoja va en el CORE de
   sw-atomico.js y su VERSION sube junto con el ?v= del enlace.

   Qué cambia: color, letra, radios, sombras, degradados y blur.
   Qué NO cambia: estructura, estados (.locked, .today, .checked,
   .quitday, .visible), lógica de marcar, drip, auth, offline.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────
   Los nombres viejos se quedan (los usan 200 reglas). Cambian los
   valores. Muertos: #c9a96e, #a8894f, #f7f7f2, #3A71B1, #0f1923. */
:root{
  --bg:#ffffff;
  --bg-alt:#f4f5f7;
  --bg-deep:#f4f5f7;
  --surface:#ffffff;

  --text:#1a2332;
  --text-mid:rgba(26,35,50,.64);
  --text-light:rgba(26,35,50,.64);  /* .56 daba 3.76 sobre blanco y 3.68
                                       sobre #f4f5f7: por debajo del 4.5 de
                                       AA, y se usa 16 veces como texto.
                                       .64 da 4.84 y 4.65. */

  --accent:#1b3a63;
  --accent-2:#1b3a63;

  --line:rgba(26,35,50,.16);
  --soft:rgba(27,58,99,.05);

  --gold:#e0c48a;
  /* gold-deep se usaba como TEXTO sobre claro (2.08:1, prohibido).
     Pasa a tinta azul: mismo papel, contraste real. */
  --gold-deep:#1b3a63;
  --gold-soft:rgba(224,196,138,.14);

  --red:#c0392b;
  --red-soft:rgba(192,57,43,.07);

  /* No hay sistema de sombras: la separación se hace con líneas y aire. */
  --shadow:rgba(26,35,50,.10);
  --shadow-soft:none;
  --shadow-elevated:none;

  --oro-h:#d1b075;
}

/* ── 2 · Letra ─────────────────────────────────────────────────
   Dos familias y nada más. DM Sans fuera; Zen Kaku en su lugar.
   Pesos: Cormorant 400 y 600 normal, 400 y 500 itálica; Zen Kaku 400
   y 500. (La nota original decia que el 300 lo fabrica el navegador:
   eso es cierto en el site, que sirve seis woff2 propios. Aqui las
   fuentes vienen de Google Fonts y el 300 si existe.) */
body,
.btn, .btn-hoy, .btn-hoy-fab, .preview-cta .btn-cta,
.boton-rojo, .no-access-box .support-btn, .no-access-box .logout-link,
.overlay-ceremonial .btn-oro, .overlay-ceremonial .btn-fantasma,
.day-completed .sello-sub{
  font-family:'Zen Kaku Gothic New', sans-serif;
  font-weight:400;
}
body{
  font-size:17px;         /* piso de cuerpo: por debajo, Safari hace zoom */
  line-height:1.65;
  color:var(--text);
}
h1, .day-title, .day-num, .overlay-ceremonial h2,
.no-access-box h2, .footer p, .footer .sig,
.dash-pct .num, .biblio-msg, .dash-clear, .dash-regreso,
.libertos-upsell .lu-t, .nav-brand .name,
.dash-badge-main .badge-meta .name, .day-completed .sello-title{
  font-family:'Cormorant Garamond', Georgia, serif;
}
h1{ font-weight:400; letter-spacing:-.012em; line-height:1.04; }
.overlay-ceremonial h2{ font-weight:400; line-height:1.1; }
.day-title{ font-weight:600; letter-spacing:-.006em; }
.day-note{ font-size:15px; }
.check-label{ font-size:15px; }
.dash-item{ font-size:15px; }

/* ── 3 · Nav: sin blur, sin velo ─────────────────────────────── */
.nav{
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid var(--line);
}
.week-label{
  background:var(--bg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.nav-brand .tag{ color:var(--text-light); }
.nav-progress b{ color:var(--accent); }
.nav-bar-fill{ background:var(--gold); border-radius:0; }
.nav-bar-wrap{ border-radius:0; }

/* ── 4 · Fondos planos: fuera los degradados ─────────────────── */
.hero{ background:var(--bg); }
.footer{ background:var(--bg-alt); border-top:1px solid var(--line); }
.no-access-screen{ background:var(--bg); }
.day.quitday{
  background:#1b3a63;
  border:1px solid var(--gold);
  box-shadow:none;
}
.overlay-ceremonial{ background:#1b3a63; color:#ffffff; }
.libertos-upsell{
  background:#1b3a63;
  color:#ffffff;   /* la pagina lo trae en #f7f7f2 a pelo (linea 473) y lo
                      heredan 14 elementos del bloque: no basta con el fondo */
  border:1px solid rgba(224,196,138,.4);
  border-radius:0;
  box-shadow:none;
}

/* ── 5 · Botones: esquina recta, oro y tinta ──────────────────── */
.btn, .btn-video, .btn-outline, .btn-hoy, .btn-hoy-fab,
.preview-cta .btn-cta, .biblio-btn, .libertos-upsell .lu-cta,
.overlay-ceremonial .btn-oro, .no-access-box .support-btn,
.paso-pill, .soon-tag, .tarea-link{
  border-radius:0;
}
.btn-video, .btn-hoy-fab, .preview-cta .btn-cta,
.biblio-btn, .libertos-upsell .lu-cta, .no-access-box .support-btn{
  background:var(--gold);
  color:#1a2332;
  box-shadow:none;
  letter-spacing:.14em;
  font-weight:500;
}
.btn-video:hover, .btn-hoy-fab:hover, .preview-cta .btn-cta:hover,
.biblio-btn:hover, .no-access-box .support-btn:hover{
  background:var(--oro-h);
  color:#1a2332;
  opacity:1;
}
.btn-outline{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--line);
}
.btn-outline:hover{ border-color:var(--accent); opacity:1; }
.btn-hoy{
  border:1px solid var(--line);
  color:var(--accent);
  background:transparent;
  font-weight:500;
}
.btn-hoy:active{ background:var(--bg-alt); }
.btn:hover{ opacity:1; }

/* Foco único del sistema: aro blanco y luego azul. */
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{
  outline:none;
  box-shadow:0 0 0 2px #ffffff, 0 0 0 4px #1b3a63;
}

/* ── 6 · Tarjetas de día: línea y aire, no sombra ─────────────── */
.day{
  border-radius:0;
  border:1px solid var(--line);
  box-shadow:none;
}
.day.locked, .day.preview-locked{
  background:var(--bg-alt);
  filter:none;          /* el saturate(.6) sobraba: ya no hay color que apagar */
  opacity:.62;
}
.day.today{
  border-color:var(--gold);
  box-shadow:none;
}
.day.today::before{
  background:var(--gold);
  color:#1a2332;
  border-radius:0;
  letter-spacing:.24em;
}
.day.today::after{ background:var(--gold); border-radius:0; }
.day.sellado{ animation:none; }   /* la respiración de sombra ya no aplica */
.paso-pill{ background:var(--gold); color:#1a2332; }
.paso-pill.cont{ background:transparent; color:var(--accent); border:1px solid var(--line); }
.paso-banner span{ color:var(--accent); }
.paso-banner i{ background:var(--gold); opacity:1; }
.day.quitday .paso-banner span,
.day.quitday .quit-kicker{ color:var(--gold); }
.day.quitday .day-title{ color:#ffffff; }
.day.quitday .day-note{ color:rgba(255,255,255,.72); }
.day.quitday .day-num, .day.quitday .day-weekday{ color:var(--gold); }
.hero-mision::before{ background:var(--gold); opacity:1; width:2.5rem; }

/* ── 7 · Bloques contenidos: radio 8, velo plano ─────────────── */
.audio-block, .preview-cta, .tz-banner, .dash-regreso{
  border-radius:8px;
  box-shadow:none;
}
.audio-block{ background:var(--soft); border:1px solid var(--line); }
.audio-label{ color:var(--accent); }
.audio-label::before{ color:var(--gold); }
.preview-banner{ border-radius:0; color:var(--accent); }
.tz-banner, .dash-regreso{ color:var(--accent); }
.dominus{
  border-radius:0;
  background:var(--soft);
  border:1px solid var(--line);
  color:var(--accent);
}

/* ── 8 · Dashboard ───────────────────────────────────────────── */
.dash-card{
  border-radius:0;
  border:1px solid var(--line);
  border-top:2px solid var(--gold);   /* el filete de marca, no un marco de oro */
  box-shadow:none;
}
.dash-bar{ border-radius:0; background:var(--line); }
.dash-bar i{ border-radius:0; background:var(--gold); }
.dash-pct .num{ font-weight:400; color:var(--text); }
.dash-cap{ color:var(--text-mid); font-weight:500; letter-spacing:.24em; }
.dash-item .d{ color:var(--accent); font-weight:500; }
.dash-item:hover span:last-child{ color:var(--accent); }
.dash-clear{ color:var(--accent); }
.badge-orb{ border-radius:50%; box-shadow:none; }
.badge-orb.tier-bronce{ background:#1b3a63; color:#ffffff; }
.badge-orb.tier-plata{ background:var(--bg-alt); color:#1a2332; }
.badge-orb.tier-liberto{ background:var(--gold); color:#1a2332; box-shadow:none; }
.dash-atomico-mini .mini-stars{ color:var(--accent); }
.dash-atomico-mini .mini-atoms{ color:var(--accent); }
.biblio-btn{ border-radius:0; }

/* ── 9 · Checks ──────────────────────────────────────────────── */
.check-circle{ border:2px solid var(--line); }
.check-row.checked .check-circle{ border-color:var(--gold); background:var(--gold); }
.check-row.checked .check-label{
  text-decoration-color:rgba(224,196,138,.7);
}
.day.quitday .check-label{ color:rgba(255,255,255,.66); }
.day.quitday .check-row.checked .check-label{ color:var(--gold); }
.day-completed{ color:var(--accent); }
.day-completed .sello-title{ color:var(--accent); font-weight:500; }
.day-completed.glow{ animation:none; }   /* el resplandor de texto usaba el oro viejo */
.tarea-link{ color:var(--accent); border-color:var(--line); font-weight:500; }
.tarea-link:hover{ border-color:var(--accent); }

/* ── 10 · Botón Rojo flotante: la brasa, sin píldora ─────────── */
.boton-rojo{
  border-radius:0;
  background:var(--red);
  box-shadow:none;
  letter-spacing:.14em;
  font-weight:500;
}
.boton-rojo .dot{ background:#ffffff; }

/* ── 11 · Overlays ceremoniales ──────────────────────────────── */
.overlay-ceremonial p{ color:rgba(255,255,255,.78); font-size:17px; }
.overlay-ceremonial .kicker-c{ color:var(--gold); letter-spacing:.24em; font-weight:500; }
.overlay-ceremonial .btn-oro{ background:var(--gold); color:#1a2332; border-radius:0; font-weight:500; }
.overlay-ceremonial .btn-oro:hover{ background:var(--oro-h); }
.overlay-ceremonial .btn-fantasma{ color:rgba(255,255,255,.6); }
.overlay-ceremonial .price-lock span{
  border-radius:0;
  border:1px solid rgba(224,196,138,.35);
  color:var(--gold);
}
.overlay-ceremonial .price-lock .was{
  color:rgba(255,255,255,.6);   /* .45 daba 3.65 */
  border-color:rgba(255,255,255,.16);
}
.libertos-upsell .lu-k{ color:var(--gold); letter-spacing:.22em; font-weight:500; }
.libertos-upsell .lu-p{ color:rgba(255,255,255,.72); }
.libertos-upsell .lu-p b{ color:var(--gold); font-weight:500; }
.libertos-upsell .lu-cta{ border-radius:0; background:var(--gold); color:#1a2332; }
.libertos-upsell .lu-x{ color:rgba(255,255,255,.6); }  /* .5 daba 4.11 y es un control, no adorno: .6 da 5.22 */

/* ── 12 · Pie y varios ───────────────────────────────────────── */
.footer .sub{ letter-spacing:.24em; color:var(--text-light); }
.footer .sig{ font-weight:600; }
.no-access-box p{ font-size:17px; color:var(--text-mid); }
.progress-status.is-ok{ color:var(--accent); }
.progress-status.is-saving{ color:var(--text-light); }
.progress-status.is-err{ color:var(--red); }

/* El blur ya se apaga arriba, en sus dos selectores reales: .nav y
   .week-label (lineas 45 y 124 del HTML). Son las dos unicas
   declaraciones de backdrop-filter del origen. No hace falta un
   universal con !important. */
