/* FuaFlow Vault: la marca es azul (#1059F6, el del logo y la app); el CRM
   es naranja y Love Log rojo. Se carga DESPUÉS de /css/site.css y solo en
   /vault/: cambia las variables del acento y rehace en azul los degradados
   que site.css trae con el naranja escrito a mano. El rojo (#FF3B30, kRed en
   la app) es solo para el SOS y lo de emergencia, como en la app. */
:root {
  --oro: #5b8cff;        /* el azul de la marca, aclarado para texto sobre oscuro */
  --oro-claro: #a8c3ff;
  --oro-hondo: #1059f6;  /* azul de la marca (kAccent) */
  --ambar: #2196f3;      /* el azul de la familia (kBlue) */
  --sos: #ff3b30;        /* kRed: solo SOS y emergencia */
}

body {
  background-image:
    radial-gradient(ellipse 130% 60% at 50% -18%, rgba(16, 89, 246, 0.24), transparent 62%),
    radial-gradient(ellipse 90% 50% at 85% 4%, rgba(33, 150, 243, 0.08), transparent 60%);
}

.lang-pill:hover {
  border-color: rgba(91, 140, 255, 0.45);
}

.documento .divisor {
  background: linear-gradient(90deg, transparent, rgba(91, 140, 255, 0.4), transparent);
}

.dock a.activo {
  background: linear-gradient(180deg, rgba(16, 89, 246, 0.26), rgba(16, 89, 246, 0.08));
}

/* El hero con el iPhone (como el de Love Log): el brillo detrás del
   teléfono y la pastilla «Próximamente», en azul. */
.telefono-zona::before {
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(16, 89, 246, 0.3), transparent 70%);
}

.pastilla {
  border-color: rgba(91, 140, 255, 0.38);
  background: linear-gradient(180deg, rgba(16, 89, 246, 0.2), rgba(16, 89, 246, 0.06));
}

/* El brillo del teléfono (::before con inset -14%) llega 24 px más allá del
   borde derecho de un teléfono de 390 px. El overflow-x: clip del body se
   pasa al viewport como hidden y no basta: el navegador del teléfono
   ensancha la página a 414 px y el dock queda 14 px fuera de la pantalla
   (pasa igual en /crm/ y /lovelog/). Recortarlo en el <main>, que mide lo
   que la pantalla, lo deja dentro; en escritorio no hace falta. */
@media (max-width: 880px) {
  main.contenedor { overflow-x: clip; }
}

/* El pie: a 375 px los cinco enlaces en español no caben en un renglón (se
   salía 1 px y la página se ensanchaba); que bajen al siguiente. */
footer nav {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* El acento de «Cuídate» (la Í) sube por encima de la línea del cartel
   (line-height 0.94) y background-clip: text no pinta fuera de la caja: se
   leía «CUIDATE». Aire arriba para el degradado, y el renglón baja apenas
   (0.06em) para que el acento no roce el de arriba. */
.poster .chrome {
  padding-top: 0.2em;
  margin-top: -0.14em;
}

/* La línea del día (.jornada), sus puntos y el riel de «Lo que trae»: el
   degradado y el brillo que site.css trae en naranja, en azul. */
.jornada::before {
  background: linear-gradient(180deg, rgba(91, 140, 255, 0.5), rgba(91, 140, 255, 0.08));
}

.momento .hora::after {
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.16);
}

.etapa::after {
  background: linear-gradient(90deg, rgba(91, 140, 255, 0.55), rgba(91, 140, 255, 0.12));
}

/* Las tarjetas de ejemplo del día se parten en renglones en vez de
   deslizarse (en un teléfono se cortaban, como en Love Log). */
.muestra {
  white-space: normal;
}

/* «Lo que trae» en un teléfono: dos columnas que se leen completas en vez
   del riel de 6 columnas (mínimo 780 px) que se desliza de lado. */
@media (max-width: 640px) {
  .riel-envoltura { overflow-x: visible; }
  .riel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    row-gap: 10px;
  }
  .etapa { padding-right: 14px; }
  .etapa:last-child::after { right: 0; }
}

/* ——— El SOS: el único rojo de la página ———
   El momento del check-in, la etapa «Círculo y SOS» y la banda del círculo
   llevan el rojo de emergencia de la app; todo lo demás es azul. */
.sos { color: var(--sos); }

.momento-sos .hora { color: var(--sos); }
.momento-sos .hora::after {
  background: var(--sos);
  box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.18);
}
.muestra .sos { color: var(--sos); }

.etapa-sos::before,
.etapa-sos h3 { color: var(--sos); }
.etapa-sos::after {
  background: linear-gradient(90deg, rgba(255, 59, 48, 0.55), rgba(255, 59, 48, 0.12));
}

.banda-sos {
  border-color: rgba(255, 59, 48, 0.28);
  background:
    radial-gradient(ellipse 70% 90% at 0% 0%, rgba(255, 59, 48, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(21, 27, 44, 0.9), rgba(11, 16, 32, 0.9));
}
.banda-sos .nota {
  color: var(--acero);
  font-size: 0.88rem;
  margin-top: 14px;
}

/* Que «AES-256-GCM» y «check-in» no se partan en el guion al final del renglón. */
.nw { white-space: nowrap; }