/* El portal se lee en un telefono, de pie, con prisa. Todo grande, todo a una
   columna, sin nada que distraiga. La portada toma prestado de la pantalla de
   los funcionarios el velo oscuro sobre la fotografia; el resto es blanco,
   tarjetas y un azul clinico, como los portales de las clinicas grandes. */
:root{color-scheme:light;--tinta:#152233;--suave:#5b6b7c;--linea:#d9e1ea;--fondo:#f3f6f9;--tarjeta:#fff;
  --azul:#0b4f9c;--azul-oscuro:#083b74;--verde:#177245;--ambar:#9a6700;--rojo:#b42318;--teal:#1c5e53}
*{box-sizing:border-box}
/* La regla button{display:inline-block} de mas abajo le gana al [hidden] del
   navegador, y el boton Salir aparecia en la portada. Se fija aqui, por
   encima de todo lo demas. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--fondo);color:var(--tinta);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.cabecera{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border-bottom:1px solid var(--linea)}
.marca{font-weight:700;letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.punto{width:10px;height:10px;border-radius:50%;background:var(--azul);display:inline-block}

/* ---------------------------------------------------------------- portada */
.portada{position:relative;background:#06141a;color:#fff;overflow:hidden}
.portada-foto{position:absolute;inset:0;
  background:
    linear-gradient(120deg,rgba(1,12,14,.88),rgba(2,24,22,.62) 52%,rgba(8,59,116,.66)),
    url("/img/portada.jpg") center 35%/cover no-repeat}
.portada-contenido{position:relative;max-width:1080px;margin:0 auto;padding:36px 16px 24px;display:grid;gap:22px}
.antetitulo{margin:0 0 6px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#bfe3da}
.portada h1{font-size:1.9rem;line-height:1.15;margin:0 0 10px;text-shadow:0 2px 12px #0008}
.bajada{font-size:1.02rem;color:#e6eef2;max-width:34rem;margin:0 0 16px;text-shadow:0 1px 8px #0008}
.confianza{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9rem;color:#dfe9ee}
.confianza li{padding-left:22px;position:relative}
.confianza li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:#50d19e;box-shadow:0 0 0 3px #50d19e33}

/* ----------------------------------------------------------------- tarjeta */
.tarjeta{background:var(--tarjeta);border:1px solid var(--linea);border-radius:14px;padding:22px 20px;box-shadow:0 2px 10px #0000000d;color:var(--tinta)}
.tarjeta.ingreso{box-shadow:0 24px 60px #00000055}
h1{font-size:1.35rem;margin:0 0 6px}
h2{font-size:1.25rem;margin:0 0 6px}
.ayuda{color:var(--suave);margin:0 0 14px}
label{display:block;font-size:.85rem;font-weight:600;margin:14px 0 6px;color:var(--suave)}
input{width:100%;font:inherit;font-size:1.1rem;padding:12px 14px;border:1px solid var(--linea);border-radius:10px;background:#fff;color:var(--tinta)}
input:focus{outline:3px solid #0b4f9c33;border-color:var(--azul)}
#codigo{font-family:ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
button,.boton{font:inherit;cursor:pointer;border-radius:10px;text-decoration:none;display:inline-block;text-align:center}
.principal,.boton{width:100%;padding:14px;border:0;background:var(--azul);color:#fff;font-weight:700;font-size:1.05rem;margin-top:10px}
.principal:hover,.boton:hover{background:var(--azul-oscuro)}
.principal:disabled{opacity:.6;cursor:wait}
.boton.secundario{background:#fff;color:var(--azul);border:2px solid var(--azul)}
.boton.secundario:hover{background:#eef4fb}
.enlace{background:none;border:0;color:var(--azul);font-weight:600;padding:6px 4px}
.cabecera .enlace{color:var(--azul)}
.error{margin-top:14px;padding:12px 14px;border-radius:10px;background:#fdecec;color:var(--rojo);font-weight:600}
.nota{font-size:.82rem;color:var(--suave);margin:16px 0 0}

/* ------------------------------------------------------------------- pasos */
.pasos{max-width:1080px;margin:0 auto;padding:22px 16px 6px;display:grid;gap:12px}
.paso{background:#fff;border:1px solid var(--linea);border-radius:14px;padding:18px 18px 16px;position:relative}
.paso .num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e6f0fb;color:var(--azul);font-weight:800;margin-bottom:8px}
.paso h3{margin:0 0 4px;font-size:1rem}
.paso p{margin:0;color:var(--suave);font-size:.9rem}

/* --------------------------------------------------------------- contenido */
.contenido{max-width:720px;margin:0 auto;padding:20px 14px 40px}
.contenido:empty{padding:0}
.datos{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:14px 0}
.datos dt{color:var(--suave);font-size:.85rem}
.datos dd{margin:0;font-weight:600}
.datos.compacta{font-size:.92rem}
.estado{padding:14px;border-radius:10px;font-weight:600;margin:12px 0}
.estado.disponible{background:#e7f6ec;color:var(--verde)}
.estado.espera{background:#fff6e0;color:var(--ambar)}
.estado.sin{background:#eef2f6;color:var(--suave)}
.acciones{display:flex;flex-direction:column;gap:4px}
.informe{padding:26px 22px}
.barra-informe{display:flex;justify-content:space-between;margin:-8px 0 10px}
.membrete{color:var(--azul-oscuro);font-weight:700;line-height:1.3}
.titulo-informe{margin:14px 0 4px;font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase}
.texto{border-top:1px solid var(--linea);padding-top:14px;margin-top:8px;font-size:1rem;line-height:1.6}
.texto p{margin:0 0 .8em}
.adenda{margin-top:16px;border-left:4px solid var(--azul-oscuro);background:#f7fafd;padding:10px 12px;border-radius:0 8px 8px 0}
.adenda .cab{font-size:.8rem;font-weight:700;color:var(--azul-oscuro)}
.adenda .motivo{font-size:.8rem;color:var(--suave)}
.firma{margin-top:26px;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.firma img{max-height:70px;max-width:220px}
.firma div{font-weight:600}
.pie{margin-top:22px;font-size:.78rem;color:var(--suave);border-top:1px solid var(--linea);padding-top:10px}
.verificacion{margin-top:10px;font-size:.78rem;color:var(--suave)}
.verificacion a{color:var(--azul)}
.pie-pagina{max-width:1080px;margin:0 auto;padding:10px 16px 30px;display:flex;flex-direction:column;gap:4px;font-size:.75rem;color:var(--suave)}
.credito{opacity:.7}

/* En pantallas anchas la portada se parte en dos: texto a la izquierda, la
   tarjeta de ingreso a la derecha, encima de la foto. */
@media(min-width:860px){
  .portada-contenido{grid-template-columns:1.15fr .85fr;align-items:center;padding:56px 24px 48px;gap:40px}
  .portada h1{font-size:2.5rem}
  .pasos{grid-template-columns:repeat(3,1fr);padding:26px 24px 10px}
}
@media print{
  body{background:#fff}
  .cabecera,.pie-pagina,.barra-informe,.portada,.pasos{display:none}
  .tarjeta{border:0;box-shadow:none;padding:0}
  .contenido{max-width:none;padding:0}
}