/* ══════════════════════════════════════════════════════════════
   Botón Rojo · piel del sistema nuevo (2026-08-09)
   Solo estilos. No toca markup, ni clases, ni JS, ni el offline.

   INSTALACIÓN (una línea, en <head>, DESPUÉS del <style> de la página):

     <link rel="stylesheet" href="boton-rojo-skin.css?v=1">

   Y en sw-rojo.js: rojo-sw-v6 → rojo-sw-v7, agregando este archivo al
   precache. En el activate del v7, NO borrar rojo-audio-v1: es el audio
   que la persona necesita en crisis, sin señal. Borrado por nombre
   explícito, nunca "todo lo que no sea la versión actual".

   Qué cambia: color, letra, radios, sombras, degradados, blur y los
   descuadres de la pantalla de crisis en teléfonos cortos.
   Qué NO cambia: el flujo de crisis, el hold, la respiración, el ledger
   de átomos, la racha, el historial, el service worker.
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────
   Los nombres viejos se quedan. Cambian los valores.
   Muertos: #f7f7f2, #c9a96e, #a8894f, #3A71B1, #1a2332 como azul. */
:root{
  --crema:#ffffff;
  --white:#ffffff;

  --navy:#1b3a63;
  --navy-soft:#1b3a63;
  --navy-line:rgba(255,255,255,.16);

  --ink:#1a2332;
  --ink-mid:rgba(26,35,50,.64);
  --ink-soft:rgba(26,35,50,.64);  /* la pagina traia .55 (3.66) y la hoja
                                     proponia .56 (3.76): los dos reprueban
                                     el 4.5 de AA, y son 12 usos y los 12
                                     son color:. .64 da 4.84. */
  --ink-faint:rgba(26,35,50,.38);
  --line:rgba(26,35,50,.16);

  --on-navy:#ffffff;
  --on-navy-soft:rgba(255,255,255,.78);
  --on-navy-faint:rgba(255,255,255,.6);

  /* El azul de acento es el azul del sistema, no el #3A71B1. */
  --blue:#1b3a63;
  --blue-deep:#122a4a;

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

  --red:#c0392b;          /* la brasa: única excepción de la paleta */
  --red-bright:#c0392b;
  --red-deep:#a33125;   /* venia como #a3312508: hex de 8 digitos, o sea 3% de alfa */

  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Zen Kaku Gothic New', sans-serif;

  --oro-h:#d1b075;
}
body{ background:var(--crema); }
[data-theme="crema"]{ background:#ffffff; }

/* ── 2 · Letra ─────────────────────────────────────────────────
   Pesos que de verdad se sirven: Cormorant 400 y 600 normal, 400 y 500
   itálica; Zen Kaku 400 y 500. El 300 lo fabricaba el navegador. */
.onb__title, .onb__desc, .hist__title, .exit-modal__q, .exit-modal__sub,
.crisis-sheet__q, .razones__header h2, .razones__item, .cierre__quote,
.cierre__atomos-num, .cierre__atomos-label, .cierre__stats,
.sq-breath__word, .crisis__player-title, .hold-pad, .hist__sub,
.lavoz-title, .lavoz-body{
  font-weight:400;
}
.onb__title, .hist__title{ letter-spacing:-.006em; line-height:1.15; }
.hist__title strong{ font-weight:600; }
.cierre__stats .big{ font-weight:600; }
.onb__desc, .hist__sub{ font-size:18px; line-height:1.5; }
.razones__item{ font-size:18px; }

/* Piso de cuerpo: 17px. Nada de 10 y 11px salvo versalitas de rótulo. */
.dl__meta, .home__bottom-link, .home__midnight, .hist__info .h-meta,
.onb__ensayo-hint, .lavoz-empty, .ln-p{ font-size:14px; }
.kicker, .streak-unit, .crisis-btn .cb-kicker, .cierre__kicker,
.cierre__quote-author, .hist__dur, .btn, .text-link, .lavoz-firma,
.razones-overlay__hint, .ensayo-banner, .crisis__protocol, .ln-k{
  font-size:11px; font-weight:500; letter-spacing:.24em;
}
.ola-bar__label{ font-size:13px; font-weight:500; letter-spacing:.06em; }

/* ── 3 · Botones: esquina recta, oro y tinta ──────────────────── */
.btn, .btn--gold, .btn--blue, .btn--ghost-navy,
.hold-pad, .cierre__cta-libre, .onb__ensayo-btn,
.ln-cta, .home__muro-teaser, .date-picker-wrap input[type="date"],
.razones__input, .exit-modal__card, .crisis-sheet, .lavoz-card,
.libertos-nudge, .cierre__video-wrap, .dl__bar, .dl__fill,
.ola-bar__track, .ola-bar__fill, .hold-pad__glow{
  border-radius:0;
}
.btn{ padding:18px 30px; }
.btn--gold{ background:var(--gold); color:var(--ink); }
.btn--gold:hover{ background:var(--oro-h); color:var(--ink); }
.btn--blue{ background:var(--gold); color:var(--ink); }   /* el primario del sistema es oro */
.btn--blue:hover{ background:var(--oro-h); }
.btn--ghost-navy{ border:1px solid var(--navy-line); color:var(--on-navy-soft); }
.btn--ghost-navy:hover{ border-color:var(--gold); color:var(--gold); }
.onb__ensayo-btn{ border:1px solid var(--line); color:var(--ink); }
.onb__ensayo-btn:hover{ background:#f4f5f7; }
.cierre__cta-libre{ border:1px solid var(--gold); color:var(--gold); }
.cierre__cta-libre:hover{ background:rgba(224,196,138,.14); }
.ln-cta{ background:var(--gold); color:var(--ink); }
.text-link{ color:var(--on-navy-faint); }
.text-link:hover{ color:var(--on-navy); }

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

/* ── 4 · El botón de crisis: la brasa, plana y sin latido ─────── */
/* Redondo a propósito: es el único botón físico de la casa, y tiene que
   parecerlo. La esquina recta sigue mandando en todos los demás. */
.crisis-btn{
  background:var(--red);
  color:#ffffff;
  box-shadow:none;
  animation:none;            /* el pulso infinito acelera, y aquí se busca calma */
  border-radius:50%;
  width:min(76vw, 300px);
  height:min(76vw, 300px);
  min-height:0;
  margin:24px auto;
  letter-spacing:0;
  gap:2px;
}
.crisis-btn:active{ transform:none; background:#a5301f; }
.crisis-btn .cb-main{ letter-spacing:.02em; font-weight:600; }

/* ── 5 · Hold pad: sin píldora, sin brillo que barre ──────────── */
.hold-pad{
  background:var(--red);
  color:#ffffff;   /* la pagina lo trae en #f7f7f2 a pelo (linea 526) y lo
                      heredan el glow, las particulas y la etiqueta: 4
                      elementos seguian computando el gris muerto */
  box-shadow:none;
  min-height:76px;
  font-weight:600;
  letter-spacing:.02em;
}
.hold-pad.is-held{ transform:none; animation:none; }
.hold-pad.is-held::after{ display:none; }
.hold-pad__particle{ display:none; }   /* corazones y estrellitas fuera */

/* ── 6 · Fondos planos: fuera degradados y blur ───────────────── */
.onb__mark.red{
  background:var(--red);
  box-shadow:none;
}
.onb__mark, .onb__mark.blue, .onb__mark.gold{ border-radius:50%; }
.onb__mark.gold{ border:1px solid var(--gold); background:rgba(224,196,138,.14); }
.onb__mark.blue{ border:1px solid var(--blue); }
.onb__mark .glyph-arrow{ color:var(--blue); }
.dl__fill{ background:var(--gold); }

/* ── La barra de la ola ─────────────────────────────────────────
   Antes: una barra de lado a lado con "0 de 18" pegado a la derecha.
   Parecía una descarga. Ahora la cuenta va centrada encima, en
   versalitas, y el filete debajo, corto y fino. Es un avance, no un
   progreso de sistema. */
.ola-bar{
  flex-direction:column;
  align-items:center;
  gap:8px;
  max-width:260px;
  margin:0 auto;
}
.ola-bar__label{
  order:-1;
  color:var(--gold);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.ola-bar__label .diamond{ color:var(--gold); }
.ola-bar__track{
  width:100%;
  flex:none;
  height:3px;
  background:rgba(255,255,255,.16);
}
.ola-bar__fill{ background:var(--gold); }
.ola-bar.is-complete .ola-bar__fill{ background:#4a7c59; }
.cierre{ background:var(--navy); }
.cierre__glow{ display:none; }         /* halo radial que respira: fuera */
.exit-modal{ background:rgba(26,35,50,.78); backdrop-filter:none; }
.exit-modal__card{ box-shadow:none; border:1px solid var(--line); }
.ensayo-banner{
  background:var(--gold);
  color:var(--ink);
  border-bottom:none;
  backdrop-filter:none;
  font-weight:500;
}
.razones-overlay{
  background:var(--navy);              /* el papel rayado sepia no es del sistema */
}
.razones-overlay__text p{ color:#ffffff; font-family:var(--serif); }
.razones-overlay__caption{ color:#ffffff; text-shadow:none; }
.razones-overlay__caption strong{ color:var(--gold); }
.razones-overlay__hint{ color:var(--on-navy-faint); }
/* El blur se apaga arriba en sus dos selectores reales, .exit-modal y
   .ensayo-banner, que son las dos unicas declaraciones de la pagina.
   No hace falta un universal con !important. */

/* Fuera el placeholder de "Próximamente" y el enlace de La Voz:
   uno anuncia lo que no está, el otro es un desvío en plena crisis. */
.crisis__audio-prox, .lavoz-toggle{ display:none !important; }

/* ── 7 · Descuadres de la crisis en teléfonos cortos ───────────
   Antes: rótulo + barra + cuadro de 184 + control + título + player +
   dos enlaces + hold de 88 + botón + enlace. En un 390×667 no cabía y
   el hold quedaba pegado al borde. Se aprieta el aire, no el contenido. */
.crisis{ padding:56px 24px 24px; }
.crisis__center{ gap:14px; }
.sq-breath-wrap{ width:180px; height:180px; }
.sq-breath-wrap svg{ width:180px; height:180px; }
.sq-breath__word{ font-size:25px; }
.breath-wrap{ gap:12px; flex:0 0 auto; }
/* El play mide 40% del cuadro: se lee como satélite, no como rival. */
.player{ width:72px; height:72px; border:1px solid var(--gold); background:rgba(224,196,138,.12); }
.player svg{ width:28px; height:28px; }
.crisis__player-row{ gap:14px; }
.player:hover{ background:rgba(224,196,138,.2); }
.crisis__player-title{ margin-bottom:0; }
.crisis__bottom{ gap:10px; }
@media (max-height:700px){
  .sq-breath-wrap, .sq-breath-wrap svg{ width:148px; height:148px; }
  .player{ width:60px; height:60px; }
  .player svg{ width:24px; height:24px; }
  .crisis__center{ gap:10px; }
  /* El tope tiene que BAJAR: con 300px el boton crecia en las tres
     pantallas cortas (390x667 de 296 a 300, 375 de 285 a 300, 360 de
     274 a 300), justo al reves del proposito. */
  .crisis-btn{ width:min(58vh, 260px); height:min(58vh, 260px); }
}

/* La flecha de atrás y la salida caían sobre el rótulo del protocolo.
   Se les da su propia franja. */
.back-arrow, .exit-x{ width:44px; height:44px; border-radius:0; }
.crisis__top{ padding-top:6px; }
.crisis__protocol{ margin-top:0; margin-bottom:10px; }

/* ── 8 · Bloques contenidos ───────────────────────────────────── */
.home__muro-teaser{ background:#f4f5f7; }
.home__muro-title{ color:var(--ink); }
.home__muro-sub{ color:var(--ink-soft); }
.lavoz-panel{ background:var(--navy); }
.lavoz-card{ background:rgba(255,255,255,.05); border:1px solid var(--navy-line); }
.lavoz-title{ color:var(--gold); }
.lavoz-firma{ color:var(--gold); font-weight:500; }
.lavoz-body{ color:rgba(255,255,255,.8); }
.libertos-nudge{ background:#f4f5f7; border:1px solid var(--line); }
.ln-k{ color:var(--blue); }
.razones__input{ border:1px solid var(--navy-line); border-radius:6px; font-size:17px; }
.razones__input:focus{ border-color:var(--gold); }
.razones__item.is-user{ color:var(--gold); }
.razones__item.is-user::before{ color:var(--gold); font-weight:500; }
.date-picker-wrap input[type="date"]{
  border:1px solid var(--line); border-radius:6px; font-size:17px;
}
.crisis-sheet{ border-top:1px solid var(--navy-line); }

/* ── 9 · Historial y racha ────────────────────────────────────── */
.streak-unit{ color:var(--ink-soft); }
.streak-num{ font-size:30px; }
.hist__badge{ border:1px solid var(--gold); background:rgba(224,196,138,.14); color:var(--blue); border-radius:0; }
.hist__dur{ color:var(--blue); font-weight:500; }
.kicker.gold, .kicker.blue{ color:var(--ink-soft); }
.cierre__kicker{ color:var(--gold); }
.cierre__quote-author{ color:var(--gold); }
.cierre__atomos-num{ color:var(--gold); font-style:normal; font-size:60px; }
.cierre__atomos-label{ color:var(--on-navy-soft); }
.cierre__stats{ color:rgba(255,255,255,.7); }
.cierre__stats .big{ color:#ffffff; font-style:normal; }
.home__bottom-link{ color:var(--ink-soft); }
.home__bottom-link:hover{ color:var(--ink); }
.dots span.on{ background:var(--gold); border-radius:0; }
.dots span{ background:var(--ink-faint); border-radius:0; width:7px; }
.dots span.on{ width:22px; }

/* ── 10 · Movimiento: solo lo que el sistema permite ──────────── */
.waveform span{ background:var(--gold); }
@keyframes crisisPulse{ 0%,100%{ transform:none; box-shadow:none; } }
@keyframes holdPulse{ 0%,100%{ transform:none; } }
@keyframes cierreGlow{ 0%,100%{ opacity:0; } }

/* ── 13 · Cierre: los dos botones del final ────────────────────
   Estaban de familias distintas (uno fantasma con radio 12, el otro
   solido con radio 0) y sin aire entre ellos: el nudge de Libertos
   terminaba justo donde empezaba "Volver al inicio", pegados.
   Misma caja los dos, y jerarquia explicita: marcar el dia es la
   accion, volver es la salida. */
.cierre__cta-libre,
.cierre .btn--blue{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
  padding:16px 24px;
  border-radius:0;
  font-family:var(--sans);
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
  text-decoration:none;
  text-transform:none;   /* uno venia en mayusculas y el otro no */
}
.cierre__cta-libre{
  margin-top:26px;
  background:var(--gold);
  color:var(--ink);
  border:1px solid var(--gold);
}
.cierre__cta-libre:hover{ background:var(--oro-h); color:var(--ink); }
.cierre .btn--blue{
  margin-top:16px;
  background:transparent;
  color:#ffffff;
  border:1px solid rgba(255,255,255,.28);
}
.cierre .btn--blue:hover{ background:rgba(255,255,255,.08); border-color:var(--gold); color:var(--gold); }
.libertos-nudge{ margin-bottom:4px; }

/* La flecha de atras del cierre estaba descentrada y ademas sobra:
   de esta pantalla se sale por "Volver al inicio". */
.cierre .back-arrow{ display:none; }

/* La barra de descarga arranca en cero. El 62% de la pagina era
   decorativo; ahora el numero lo escribe el service worker. */
.dl__fill{ width:0; background:var(--gold); }
.dl__meta .pct{ color:var(--ink-soft); }
