/* conecta.sendahealth.com — cara de paciente.
 *
 * Distinto de Kit y Lab a propósito: aquí no entra personal de Senda, entra una persona en
 * tratamiento, casi siempre desde el móvil. Tipografía más grande, más aire, menos densidad
 * y nada de jerga. La paleta es la de la ilustración: azul y arena cálida.
 */
: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;
}

/* Móvil primero: la ilustración arriba, el texto debajo. */
.pagina{display:flex; flex-direction:column; min-height:100vh}

.ilustracion{background:#9CC8EC; display:flex; justify-content:center; align-items:center}
.ilustracion img{width:100%; height:auto; display:block; max-height:38vh; object-fit:cover; object-position:center 30%}

.contenido{flex:1; display:flex; flex-direction:column; padding:28px 22px 20px}
.caja{width:100%; max-width:540px; margin:0 auto; flex:1}

.marca{display:flex; align-items:center; gap:9px; color:var(--azul); font-weight:650; font-size:17px; margin-bottom:26px}

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

.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)}

.lista{list-style:none; padding:0; margin:0}
.lista li{position:relative; padding:7px 0 7px 30px; font-size:16.5px}
.lista li::before{
  content:""; position:absolute; left:4px; top:15px; width:9px; height:9px;
  border-radius:50%; background:var(--azul);
}
/* Lo que NO leemos se marca distinto: es tan importante como lo que sí, y conviene que se
   note de un vistazo sin tener que leer el encabezado otra vez. */
.lista.no li::before{background:transparent; border:2px solid #C7CDD6; top:14px; width:11px; height:11px}
.lista.no li{color:var(--tinta-suave)}

.calma{margin:26px 0 0; padding:15px 18px; background:var(--azul-claro); border-radius:12px; font-size:16px}
.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}

a:focus-visible, button:focus-visible{outline:3px solid var(--azul); outline-offset:2px; border-radius:4px}

/* ── Pantallas interiores (panel, conectar, consentimiento) ──
 * Sin ilustración: quien está aquí ya entró. Una columna, tarjetas, botones de pulgar. */
.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}
.cabecera .volver{color:var(--azul-hondo); text-decoration:none; font-size:15.5px}

.tarjeta{border:1px solid var(--linea); border-radius:16px; padding:18px 20px; margin:0 0 14px; background:var(--papel)}
.tarjeta h3{margin:0 0 4px; font-size:18px}
.tarjeta .estado{color:var(--tinta-suave); font-size:15.5px; margin:0}
.tarjeta .estado b{color:var(--tinta)}
.tarjeta .tipos{color:var(--tinta-suave); font-size:14.5px; margin:10px 0 0}
.tarjeta .acciones{margin:14px 0 0}
.tarjeta.atencion{border-color:#F0E2CC; background:var(--arena-suave)}

.btn{
  display:block; width:100%; text-align:center; border:0; cursor:pointer;
  border-radius:14px; padding:15px 18px; font:inherit; font-size:17px; font-weight:600;
  background:var(--azul); color:#fff; text-decoration:none;
}
.btn.secundario{background:var(--azul-claro); color:var(--azul-hondo)}
.btn.suave{
  background:transparent; color:var(--tinta-suave); font-weight:500; font-size:15.5px;
  padding:10px; text-decoration:underline; text-underline-offset:3px;
}
form.entero{margin:0}

.opcion{display:block; text-decoration:none; color:inherit}
.opcion .tarjeta{margin:0 0 12px; transition:border-color .15s}
.opcion:active .tarjeta{border-color:var(--azul)}
.opcion .ir{color:var(--azul-hondo); font-weight:600; font-size:15.5px; margin:10px 0 0}

.consentimiento{list-style:none; padding:0; margin:0 0 6px}
.consentimiento li{padding:4px 0}
.consentimiento label{display:flex; gap:12px; align-items:flex-start; font-size:16.5px; padding:9px 0}
.consentimiento input{width:22px; height:22px; margin:1px 0 0; accent-color:var(--azul); flex:none}

.registro{list-style:none; padding:0; margin:0}
.registro li{padding:10px 0; border-bottom:1px solid var(--linea); font-size:15.5px}
.registro li:last-child{border-bottom:0}
.registro .cuando{color:var(--tinta-suave); font-size:13.5px; display:block}

.banda{background:var(--azul-claro); border-radius:12px; padding:14px 18px; margin:0 0 18px; font-size:16px}
.banda.avisa{background:var(--arena-suave)}
.vacio{color:var(--tinta-suave); text-align:center; padding:26px 10px; font-size:16px}

/* Escritorio: dos columnas, la ilustración a media pantalla. */
@media (min-width:900px){
  .pagina{flex-direction:row}
  .ilustracion{width:46%; min-height:100vh}
  .ilustracion img{max-height:none; height:100vh}
  .contenido{width:54%; justify-content:center; padding:56px 60px}
  .caja{flex:none}
  h1{font-size:34px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}