/* plan.sendahealth.com — cara de paciente. Misma línea visual que conecta: azul y arena
 * cálida, tipografía grande, aire, cero densidad. Quien lee está en tratamiento médico,
 * desde el móvil; esto es su plan, no una app de fitness. */
:root{
  --azul:#3D7FBF; --azul-hondo:#2A5F94; --azul-claro:#EAF3FB;
  --arena:#E8C79C; --arena-suave:#FBF5EC;
  --tinta:#1F2937; --tinta-suave:#5B6672; --linea:#E5E9F0; --papel:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--papel); color:var(--tinta);
  font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}

.dentro{max-width:540px; margin:0 auto; padding:18px 20px 28px; display:flex; flex-direction:column; min-height:100vh}
.dentro .cuerpo{flex:1}
.cabecera{display:flex; align-items:center; justify-content:space-between; padding:4px 0 16px}
.marca{display:flex; align-items:center; gap:9px; color:var(--azul); font-weight:650; font-size:17px}

h1{font-size:29px; line-height:1.2; margin:0 0 14px; letter-spacing:-.01em}
h2{font-size:16px; margin:28px 0 10px}
.entrada{font-size:18px; color:var(--tinta-suave); margin:0 0 24px}

.tarjeta{border:1px solid var(--linea); border-radius:16px; padding:18px 20px; margin:0 0 14px; background:var(--papel)}
.tarjeta h3{margin:0 0 2px; font-size:18px}
.tarjeta .cuando{color:var(--tinta-suave); font-size:14.5px; margin:0 0 12px}
.tarjeta .meta{display:flex; gap:14px; color:var(--tinta-suave); font-size:14.5px; margin:0 0 12px}

.ejercicios{list-style:none; padding:0; margin:0}
.ejercicios li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--linea); font-size:16px}
.ejercicios li:last-child{border-bottom:0}
.ejercicios .dosis{color:var(--azul-hondo); font-weight:600; white-space:nowrap}

.etiqueta{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650;
  border-radius:999px; padding:4px 12px; margin:0 0 10px; background:var(--azul-claro); color:var(--azul-hondo)}

.banda{background:var(--azul-claro); border-radius:12px; padding:14px 18px; margin:18px 0 0; font-size:16px}
.banda.avisa{background:var(--arena-suave)}
.aviso{background:var(--arena-suave); border:1px solid #F0E2CC; border-radius:14px; padding:18px 20px; margin:0 0 6px}
.aviso p{margin:0}
.aviso p+p{margin-top:7px; color:var(--tinta-suave); font-size:16px}
.aviso a{color:var(--azul-hondo)}

.ayuda{margin:22px 0 0; font-size:15.5px; color:var(--tinta-suave)}
.ayuda a{color:var(--azul-hondo)}
.pie{max-width:540px; margin:34px auto 0; padding-top:18px; border-top:1px solid var(--linea); color:var(--tinta-suave); font-size:13.5px; width:100%}
a:focus-visible,button:focus-visible{outline:3px solid var(--azul); outline-offset:2px; border-radius:4px}