/* =============================================================================
   «Antes de que sea tarde» — estilos.

   Un curso de salud tiene una exigencia que los otros no: hay cosas que la
   persona TIENE que ver aunque esté leyendo en diagonal. Por eso el rojo está
   reservado a una sola cosa —las señales que obligan a buscar atención médica—
   y no se usa para nada más. Si el rojo aparece, es porque hay que moverse.

   Lo demás es verde azulado de clínica limpia, tipografía grande y mucho aire:
   el público va de los 15 a los 70 y buena parte llega desde el teléfono.
   ========================================================================== */

.curso-libre{
  --sa-agua:#0E7C86;   --sa-agua-osc:#0A5A62;  --sa-agua-cla:#3AA8B2;
  --sa-nube:#E4F4F5;   --sa-nube-2:#CDE9EB;
  --sa-tinta:#132322;  --sa-gris:#4F6664;      --sa-gris-2:#7E9593;
  --sa-borde:#D7E5E4;  --sa-fondo:#F5FAFA;     --sa-papel:#fff;

  /* Rojo = hay que actuar. No se usa para otra cosa en todo el curso. */
  --sa-alarma:#C62828; --sa-alarma-nube:#FDECEC; --sa-alarma-osc:#8E1A1A;
  --sa-ambar:#B45309;  --sa-ambar-nube:#FEF5E7;
  --sa-verde:#15803D;  --sa-verde-nube:#E9F6EC;
  --sa-uva:#6D28D9;    --sa-uva-nube:#F1EBFD;
  --sa-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  font-size:17.5px; line-height:1.72;
}
.curso-libre p{ max-width:56ch; }
.curso-libre code{ font-family:var(--sa-mono); font-size:.9em; background:var(--sa-nube);
  color:var(--sa-agua-osc); border-radius:4px; padding:1px 6px;
  font-variant-ligatures:none; }

.entradilla{ font-size:1.16rem; color:var(--sa-gris); border-left:5px solid var(--sa-agua);
  padding-left:18px; margin:0 0 30px; line-height:1.68; max-width:58ch; }

/* ================================================================  cajas === */

.sa-caja{ border:1px solid var(--sa-borde); border-radius:18px; padding:20px 22px;
  margin:26px 0; background:var(--sa-papel); }
.sa-caja > :first-child{ margin-top:0; }
.sa-caja > :last-child{ margin-bottom:0; }
.sa-caja h4{ font-size:1.08rem; margin:0 0 10px; display:flex; align-items:center; gap:10px; }
.sa-caja h4 .emo{ font-size:1.5rem; line-height:1; }

.sa-ojo{   background:var(--sa-nube);        border-color:var(--sa-nube-2); }
.sa-dato{  background:var(--sa-verde-nube);  border-color:#CDE8D5; }
.sa-aviso{ background:var(--sa-ambar-nube);  border-color:#F0DFBE; }
.sa-uva-c{ background:var(--sa-uva-nube);    border-color:#DFD2FA; }
.sa-ojo h4{ color:var(--sa-agua-osc); }
.sa-dato h4{ color:var(--sa-verde); }
.sa-aviso h4{ color:var(--sa-ambar); }
.sa-uva-c h4{ color:var(--sa-uva); }

/* LA caja roja. Borde grueso y fondo propio: se ve aunque se lea en diagonal. */
.sa-alarma-caja{
  border:3px solid var(--sa-alarma); border-radius:18px; padding:20px 22px; margin:28px 0;
  background:var(--sa-alarma-nube);
}
.sa-alarma-caja h4{ color:var(--sa-alarma-osc); font-size:1.2rem; margin:0 0 12px;
  display:flex; align-items:center; gap:11px; }
.sa-alarma-caja h4 .emo{ font-size:1.7rem; line-height:1; }
.sa-alarma-caja ul{ margin:0; padding-left:22px; }
.sa-alarma-caja li{ margin-bottom:8px; line-height:1.6; }
.sa-alarma-caja p{ max-width:none; }
.sa-alarma-caja .911{
  display:inline-flex; align-items:center; gap:10px; margin-top:14px;
  background:var(--sa-alarma); color:#fff; font-weight:800; font-size:1.15rem;
  padding:13px 22px; border-radius:14px; text-decoration:none;
}
.sa-alarma-caja .911:hover{ background:var(--sa-alarma-osc); color:#fff; }

.sa-grande{ font-size:1.42rem; line-height:1.45; font-weight:600; color:var(--sa-agua-osc);
  border-left:6px solid var(--sa-agua-cla); padding:6px 0 6px 20px; margin:30px 0; max-width:26ch; }
.sa-voz{ border-left:4px solid var(--sa-agua-cla); padding:4px 0 4px 18px; margin:26px 0;
  font-style:italic; color:var(--sa-gris); max-width:54ch; }
.sa-voz cite{ display:block; font-style:normal; font-size:.88rem; color:var(--sa-gris-2);
  margin-top:8px; }

.sa-dos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:16px;
  margin:26px 0; }
.sa-dos > *{ min-width:0; margin:0; }

.sa-foto{ margin:26px 0; }
.sa-foto img{ width:100%; display:block; border-radius:16px; background:var(--sa-nube); }
.sa-foto.recorte img{ aspect-ratio:16/9; object-fit:cover; }
.sa-foto figcaption{ margin-top:10px; font-size:.92rem; color:var(--sa-gris-2); line-height:1.6;
  max-width:60ch; }
.sa-foto figcaption b{ color:var(--sa-gris); }

.sa-dibujo{ margin:26px 0; padding:22px; background:var(--sa-papel);
  border:1px solid var(--sa-borde); border-radius:18px; }
.sa-dibujo svg{ width:100%; height:auto; display:block; }
.sa-dibujo figcaption{ margin-top:14px; font-size:.95rem; color:var(--sa-gris);
  text-align:center; line-height:1.6; }

.sa-pasos{ list-style:none; counter-reset:c 0; margin:26px 0; padding:0; display:grid; gap:15px; }
.sa-pasos li{ counter-increment:c; position:relative; padding-left:52px; line-height:1.7; }
.sa-pasos li::before{ content:counter(c); position:absolute; left:0; top:-1px; display:flex;
  align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%;
  background:var(--sa-agua); color:#fff; font-weight:700; font-size:16px; }

.sa-tabla-env{ overflow-x:auto; margin:26px 0; }
.sa-tabla{ width:100%; border-collapse:collapse; font-size:1rem; min-width:520px; }
.sa-tabla th,.sa-tabla td{ border:1px solid var(--sa-borde); padding:13px 15px; text-align:left;
  vertical-align:top; line-height:1.6; }
.sa-tabla th{ background:var(--sa-nube); color:var(--sa-agua-osc); font-weight:700; }
.sa-tabla tr:nth-child(even) td{ background:var(--sa-fondo); }
.sa-tabla .n{ font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }

/* =========================================================  el tablero === */

.sa-marcador{ font-size:1.05rem; color:var(--sa-gris); margin:0 0 16px; }
.sa-marcador b{ color:var(--sa-agua-osc); font-size:1.2rem; }
.sa-rejilla{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.sa-carta{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:14px; align-items:center;
  padding:16px 18px; border:2px solid var(--sa-borde); border-radius:18px;
  background:var(--sa-papel); text-decoration:none; color:var(--sa-tinta); min-height:88px;
}
.sa-carta:hover{ border-color:var(--tono); background:var(--sa-fondo); }
.sa-carta.ganada{ border-color:var(--tono); background:linear-gradient(#fff,var(--sa-fondo)); }
.sa-emo{ font-size:2.1rem; line-height:1; text-align:center; }
.sa-txt{ min-width:0; }
.sa-txt b{ display:block; font-size:1.06rem; line-height:1.3; }
.sa-txt small{ display:block; color:var(--sa-gris-2); font-size:.88rem; line-height:1.4;
  margin-top:3px; }
.sa-estado{ text-align:right; }
.sa-medalla{ display:inline-block; background:var(--tono); color:#fff; font-weight:700;
  font-size:.82rem; padding:6px 12px; border-radius:999px; white-space:nowrap; }
.sa-avance{ font-size:.86rem; color:var(--sa-gris-2); white-space:nowrap; }

/* ===========================================================  la vitrina === */

.sa-vitrina{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:26px 0; }
.sa-insignia{ text-align:center; padding:18px 12px; border:2px solid var(--sa-borde);
  border-radius:18px; background:var(--sa-fondo); }
.sa-insignia.ganada{ border-color:var(--tono); background:var(--sa-papel); }
.sa-disco{ display:flex; align-items:center; justify-content:center; width:66px; height:66px;
  margin:0 auto 10px; border-radius:50%; font-size:2rem; background:var(--sa-nube-2);
  filter:grayscale(1); opacity:.45; }
.sa-insignia.ganada .sa-disco{ background:var(--tono); filter:none; opacity:1; }
.sa-insignia b{ display:block; font-size:.98rem; line-height:1.3; }
.sa-insignia small{ display:block; color:var(--sa-gris-2); font-size:.82rem; margin-top:4px; }
.sa-resumen{ font-size:1.05rem; color:var(--sa-gris); max-width:56ch; }

/* El aviso de insignia ganada. */
.sa-premio{
  position:fixed; right:18px; bottom:96px; z-index:130;
  display:flex; align-items:center; gap:14px; max-width:320px;
  padding:15px 19px; border-radius:18px; background:var(--sa-agua-osc); color:#fff;
  box-shadow:0 10px 30px rgba(10,60,64,.32);
  transition:opacity .45s ease, transform .45s ease;
}
.sa-premio.fuera{ opacity:0; transform:translateY(14px); }
.sa-premio-emo{ font-size:2.1rem; line-height:1; }
.sa-premio b{ font-size:1.02rem; }
@media (max-width:560px){ .sa-premio{ left:14px; right:14px; max-width:none; bottom:88px; } }
@media (prefers-reduced-motion:reduce){ .sa-premio{ transition:none; } }

/* ===========================================================  el medidor === */

.sa-medidor{ border:2px solid var(--sa-agua); border-radius:20px; overflow:hidden;
  background:var(--sa-papel); margin:28px 0; }
.sa-medidor-cab{ padding:14px 18px; background:var(--sa-agua); color:#fff; font-weight:700; }
.sa-medidor-cuerpo{ padding:20px; display:grid; gap:20px; }
@media (max-width:620px){ .sa-medidor-cuerpo{ padding:15px; } }
.sa-grafica svg{ width:100%; height:auto; display:block; }

.sa-marcas{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.sa-marca{ border:2px solid var(--sa-borde); border-radius:15px; padding:13px 15px;
  background:var(--sa-fondo); }
.sa-marca.bien{ border-color:var(--sa-verde); background:var(--sa-verde-nube); }
.sa-marca.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); }
.sa-marca .et{ display:block; font-size:.86rem; color:var(--sa-gris); }
.sa-marca .n{ display:block; font-size:1.9rem; font-weight:800; line-height:1.15;
  font-variant-numeric:tabular-nums; }
.sa-marca .n small{ font-size:.9rem; font-weight:600; }
.sa-marca .ref{ display:block; font-size:.82rem; color:var(--sa-gris-2); }

.sa-puestos h5,.sa-despensa h5{ margin:0 0 10px; font-size:.84rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--sa-gris-2); }
.sa-puestos ol{ margin:0; padding:0; list-style:none; counter-reset:p 0; display:grid; gap:7px; }
.sa-puestos li{ counter-increment:p; display:grid; grid-template-columns:30px minmax(0,1fr) auto;
  gap:11px; align-items:center; padding:10px 13px; border:1px solid var(--sa-borde);
  border-radius:12px; background:var(--sa-fondo); }
.sa-puestos li::before{ content:counter(p); display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px; background:var(--sa-nube-2);
  color:var(--sa-agua-osc); font-weight:700; font-size:13px; }
.sa-quitar{ background:none; border:none; cursor:pointer; color:var(--sa-gris-2); font-size:22px;
  line-height:1; padding:4px 8px; border-radius:8px; }
.sa-quitar:hover{ background:var(--sa-alarma-nube); color:var(--sa-alarma); }

.sa-comidas{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.sa-comida{ display:grid; gap:3px; text-align:center; font:inherit; padding:13px 10px;
  border:2px solid var(--sa-borde); border-radius:15px; background:var(--sa-fondo);
  color:var(--sa-tinta); cursor:pointer; min-height:96px; }
.sa-comida:hover{ border-color:var(--sa-agua); background:var(--sa-nube); }
.sa-comida .emo{ font-size:1.9rem; line-height:1.1; }
.sa-comida .nom{ font-size:.95rem; font-weight:600; line-height:1.25; }
.sa-comida .dato{ font-size:.8rem; color:var(--sa-gris-2); font-variant-numeric:tabular-nums; }

.sa-veredicto{ border-radius:15px; padding:16px 18px; line-height:1.65; border-left:5px solid;
  font-size:1.02rem; }
.sa-veredicto b{ display:block; font-size:1.12rem; margin-bottom:5px; }
.sa-veredicto.bien{ border-color:var(--sa-verde); background:var(--sa-verde-nube); color:#14532D; }
.sa-veredicto.medio{ border-color:var(--sa-ambar); background:var(--sa-ambar-nube); color:#7C3E06; }
.sa-veredicto.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); color:#7F1D1D; }

/* ===============================================  botones y juego (base) === */

.sa-pie{ display:flex; gap:11px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.sa-bt{ font:inherit; font-size:1.04rem; font-weight:700; padding:15px 24px; border-radius:14px;
  border:2px solid transparent; cursor:pointer; background:var(--sa-agua); color:#fff;
  min-height:56px; display:inline-flex; align-items:center; gap:9px; }
.sa-bt:hover{ background:var(--sa-agua-osc); }
.sa-bt:disabled{ opacity:.45; cursor:default; }
.sa-bt-suave{ background:var(--sa-papel); color:var(--sa-gris); border-color:var(--sa-borde);
  font-weight:600; }
.sa-bt-suave:hover{ background:var(--sa-nube); color:var(--sa-agua-osc);
  border-color:var(--sa-agua-cla); }
.sa-bt-oro{ background:var(--sa-ambar); color:#fff; }
.sa-bt-oro:hover{ background:#8C3F07; }
@media (max-width:560px){ .sa-bt{ width:100%; justify-content:center; } }

/* Motor de juegos: mismas siete rondas que el curso de cooperativismo, con
   la paleta de este. El rojo sigue significando lo mismo en todo el curso.
   ------------------------------------------------------------------ */
/* ==============================================================  el juego de rondas === */

.sa-juego{ border:2px solid var(--sa-agua); border-radius:20px; overflow:hidden;
  background:var(--sa-papel); margin:28px 0; }
.sa-juego-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--sa-agua); color:#fff; }
.sa-juego-tit{ font-weight:700; font-size:1.02rem; }
.sa-juego-marca{ margin-left:auto; display:flex; gap:5px; }
.sa-juego-marca i{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.3); }
.sa-juego-marca i.ok{ background:var(--sa-ambar); }
.sa-juego-marca i.no{ background:#F08A8A; }
.sa-juego-marca i.hoy{ box-shadow:0 0 0 3px rgba(255,255,255,.35); }
.sa-juego-cuerpo{ padding:22px; }
@media (max-width:620px){ .sa-juego-cuerpo{ padding:17px 15px; } }

.sa-tipo{ font-size:.78rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--sa-ambar); margin:0 0 8px; }
.sa-pregunta{ font-size:1.22rem; line-height:1.45; font-weight:600; color:var(--sa-tinta);
  margin:0 0 18px; max-width:44ch; }
.sa-pregunta code{ font-size:.86em; }

/* botones de respuesta: grandes, del tamaño del dedo */
.sa-ops{ display:grid; gap:11px; }
.sa-op{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:13px; align-items:center;
  text-align:left; font:inherit; font-size:1.04rem; line-height:1.5; padding:15px 17px;
  border:2px solid var(--sa-borde); border-radius:14px; background:var(--sa-fondo);
  color:var(--sa-tinta); cursor:pointer; min-height:56px; }
.sa-op:hover{ border-color:var(--sa-agua-cla); background:var(--sa-nube); }
.sa-op .let{ display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border-radius:10px; background:var(--sa-papel); border:2px solid var(--sa-borde);
  font-weight:700; font-size:15px; color:var(--sa-gris); }
.sa-op:hover .let{ border-color:var(--sa-agua-cla); color:var(--sa-agua); }
.sa-op[disabled]{ cursor:default; }
.sa-op.bien{ border-color:var(--sa-agua); background:var(--sa-nube); }
.sa-op.bien .let{ background:var(--sa-agua); border-color:var(--sa-agua); color:#fff; }
.sa-op.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); }
.sa-op.mal .let{ background:var(--sa-alarma); border-color:var(--sa-alarma); color:#fff; }
.sa-op.apagada{ opacity:.45; }

/* verdadero / falso */
.sa-vf{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.sa-vf button{ font:inherit; font-size:1.1rem; font-weight:700; padding:17px;
  border-radius:14px; border:2px solid var(--sa-borde); background:var(--sa-fondo);
  color:var(--sa-tinta); cursor:pointer; min-height:62px; }
.sa-vf button:hover{ border-color:var(--sa-agua-cla); background:var(--sa-nube); }
.sa-vf button .emo{ display:block; font-size:1.6rem; line-height:1.2; }
.sa-vf button.bien{ border-color:var(--sa-agua); background:var(--sa-nube); color:var(--sa-agua-osc); }
.sa-vf button.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); color:var(--sa-alarma); }

/* clasificar y emparejar: tocar, no arrastrar */
.sa-fichas{ display:flex; flex-wrap:wrap; gap:9px; margin:0 0 18px; }
.sa-ficha{ font:inherit; font-size:1rem; padding:12px 16px; border-radius:12px; cursor:pointer;
  border:2px solid var(--sa-borde); background:var(--sa-fondo); color:var(--sa-tinta);
  min-height:50px; }
.sa-ficha:hover{ border-color:var(--sa-agua-cla); background:var(--sa-nube); }
.sa-ficha.elegida{ border-color:var(--sa-ambar); background:var(--sa-ambar-nube);
  box-shadow:0 0 0 3px rgba(242,183,5,.25); }
.sa-ficha.colocada{ display:none; }
.sa-ficha.bien{ border-color:var(--sa-agua); background:var(--sa-nube); }
.sa-ficha.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); }

.sa-cubos{ display:grid; gap:13px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
.sa-cubo{ border:2px dashed var(--sa-borde); border-radius:16px; padding:14px;
  background:var(--sa-fondo); min-height:120px; cursor:pointer; }
.sa-cubo:hover{ border-color:var(--sa-agua-cla); background:var(--sa-nube); }
.sa-cubo h5{ margin:0 0 10px; font-size:1rem; color:var(--sa-agua-osc); text-align:center; }
.sa-cubo .dentro{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.sa-cubo .dentro .sa-ficha{ font-size:.94rem; padding:9px 12px; min-height:0; }

/* ordenar */
.sa-orden{ display:grid; gap:9px; counter-reset:o 0; }
.sa-fila{ display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:13px 15px; border:2px solid var(--sa-borde);
  border-radius:14px; background:var(--sa-fondo); font-size:1rem; }
.sa-fila .num{ counter-increment:o; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:11px; background:var(--sa-ambar-nube);
  color:var(--sa-ambar); font-weight:700; }
.sa-fila .num::before{ content:counter(o); }
.sa-fila .mover{ display:flex; gap:6px; }
.sa-fila .mover button{ width:44px; height:44px; border-radius:11px; font-size:19px;
  border:2px solid var(--sa-borde); background:var(--sa-papel); color:var(--sa-gris);
  cursor:pointer; line-height:1; }
.sa-fila .mover button:hover:not([disabled]){ border-color:var(--sa-agua-cla);
  color:var(--sa-agua); background:var(--sa-nube); }
.sa-fila .mover button[disabled]{ opacity:.3; cursor:default; }
.sa-fila.bien{ border-color:var(--sa-agua); background:var(--sa-nube); }
.sa-fila.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); }

/* emparejar */
.sa-pares{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
@media (max-width:560px){ .sa-pares{ grid-template-columns:1fr; } }
.sa-pares .col{ display:grid; gap:9px; align-content:start; }
.sa-par{ font:inherit; font-size:.99rem; line-height:1.45; text-align:left; padding:13px 15px;
  border:2px solid var(--sa-borde); border-radius:13px; background:var(--sa-fondo);
  color:var(--sa-tinta); cursor:pointer; min-height:54px; }
.sa-par:hover{ border-color:var(--sa-agua-cla); background:var(--sa-nube); }
.sa-par.elegida{ border-color:var(--sa-ambar); background:var(--sa-ambar-nube); }
.sa-par.unida{ border-style:solid; }
.sa-par .marca{ display:inline-flex; align-items:center; justify-content:center;
  width:23px; height:23px; border-radius:7px; font-size:12px; font-weight:700;
  margin-right:9px; color:#fff; }
.sa-par.bien{ border-color:var(--sa-agua); background:var(--sa-nube); }
.sa-par.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); }

/* calcular */
.sa-calc{ display:flex; gap:11px; align-items:center; flex-wrap:wrap; }
.sa-calc .moneda{ font-size:1.3rem; font-weight:700; color:var(--sa-gris); }
.sa-calc input{ font:inherit; font-size:1.3rem; font-weight:700; width:min(240px,100%);
  padding:14px 16px; border:2px solid var(--sa-borde); border-radius:13px;
  background:var(--sa-fondo); color:var(--sa-tinta); min-height:58px;
  font-variant-numeric:tabular-nums; }
.sa-calc input:focus{ outline:none; border-color:var(--sa-agua);
  box-shadow:0 0 0 4px rgba(27,110,60,.14); background:#fff; }

/* zonas sensibles sobre un dibujo */
.sa-zonas{ position:relative; }
.sa-zonas svg{ width:100%; height:auto; display:block; }
.sa-zona{ cursor:pointer; fill:transparent; stroke:transparent; stroke-width:2; }
.sa-zona:hover{ fill:rgba(242,183,5,.22); stroke:var(--sa-ambar); }
/* El acierto se marca en oro, no en verde: la caja correcta del diagrama suele
   ser ya verde y un realce verde sobre verde no se ve. */
.sa-zona.bien{ fill:rgba(242,183,5,.26); stroke:var(--sa-ambar); stroke-width:4; }
.sa-zona.mal{ fill:rgba(198,40,40,.18); stroke:var(--sa-alarma); stroke-width:4; }

/* respuesta y botones */
.sa-dictamen{ margin-top:18px; border-radius:15px; padding:16px 18px; line-height:1.65;
  font-size:1.02rem; border-left:5px solid var(--sa-agua); background:var(--sa-nube);
  color:var(--sa-agua-osc); }
.sa-dictamen.no{ border-left-color:var(--sa-alarma); background:var(--sa-alarma-nube); color:#7F1D1D; }
.sa-dictamen > b:first-child{ display:block; font-size:1.1rem; margin-bottom:5px; }

.sa-pie{ display:flex; gap:11px; flex-wrap:wrap; align-items:center; margin-top:18px; }
.sa-bt{ font:inherit; font-size:1.04rem; font-weight:700; padding:15px 24px; border-radius:14px;
  border:2px solid transparent; cursor:pointer; background:var(--sa-agua); color:#fff;
  min-height:56px; display:inline-flex; align-items:center; gap:9px; }
.sa-bt:hover{ background:var(--sa-agua-osc); }
.sa-bt:disabled{ opacity:.45; cursor:default; }
.sa-bt-suave{ background:var(--sa-papel); color:var(--sa-gris); border-color:var(--sa-borde);
  font-weight:600; }
.sa-bt-suave:hover{ background:var(--sa-nube); color:var(--sa-agua-osc);
  border-color:var(--sa-agua-cla); }
.sa-bt-oro{ background:var(--sa-ambar); color:#3A2B00; }
.sa-bt-oro:hover{ background:var(--sa-ambar); color:#fff; }
@media (max-width:560px){ .sa-bt{ width:100%; justify-content:center; } }

/* marcador final */
.sa-final{ text-align:center; padding:12px 0 6px; }
.sa-final .cifra{ font-size:3.4rem; font-weight:800; line-height:1; color:var(--sa-agua);
  font-variant-numeric:tabular-nums; }
.sa-final .de{ font-size:1.05rem; color:var(--sa-gris-2); margin-top:6px; }
.sa-final .frase{ font-size:1.14rem; color:var(--sa-tinta); margin:16px auto 0; max-width:38ch; }


/* ==========================================================  contrarreloj === */

.sa-reloj-caja{ border:2px solid var(--sa-alarma); border-radius:20px; overflow:hidden;
  background:var(--sa-papel); margin:28px 0; }
.sa-reloj-cab{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:14px 18px; background:var(--sa-alarma); color:#fff; }
.sa-reloj-tit{ font-weight:700; }
.sa-reloj{ margin-left:auto; font-family:var(--sa-mono); font-size:1.25rem; font-weight:600;
  font-variant-numeric:tabular-nums; }
@media (max-width:560px){ .sa-reloj{ margin-left:0; } }
.sa-reloj-cuerpo{ padding:20px; }
@media (max-width:620px){ .sa-reloj-cuerpo{ padding:15px; } }
.sa-escena{ font-size:1.06rem; line-height:1.7; }
.sa-escena p{ margin:0 0 13px; max-width:58ch; }
.sa-escena p:last-child{ margin-bottom:0; }
.sa-pasa{ margin-top:18px; border-radius:15px; padding:17px 19px; line-height:1.68;
  border-left:5px solid; }
.sa-pasa h5{ margin:0 0 7px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sa-gris-2); }
.sa-pasa p{ margin:0 0 11px; max-width:58ch; }
.sa-pasa p:last-child{ margin-bottom:0; }
.sa-pasa.bien{ border-color:var(--sa-verde); background:var(--sa-verde-nube); }
.sa-pasa.mal{ border-color:var(--sa-alarma); background:var(--sa-alarma-nube); }
.sa-costo{ margin:14px 0 0; padding:13px 16px; border-radius:13px; background:var(--sa-fondo);
  border:1px dashed var(--sa-borde); font-size:.98rem; color:var(--sa-gris); max-width:none; }