/* VGI Health . LA PAGINA DE RESULTADOS: el diseno B («institucional premium», escogido por el CEO el 2026-10-25), con sus ajustes.
   El panel azul es VGI Health (para todas las instituciones); el lado derecho, la institucion. Contraste WCAG 2.1 AA medido. */
:root {
  --marca-950: #071f42; --marca-900: #0b2f5e; --marca-700: #0d47a1; --marca-600: #1565c0; --marca-500: #1e88e5; --marca-100: #e3effd; --marca-50: #f3f8fe;
  --tinta: #0f172a; --tinta-2: #334155; --suave: #475569; --linea: #e2e8f0; --borde-campo: #8592a3;
  --ok: #157f3b; --ok-bg: #e9f8ef; --espera: #a35200; --espera-bg: #fff4e5; --lab: #475569; --lab-bg: #f1f5f9;
  --error: #b42318; --error-bg: #fef3f2; --foco: #0d47a1;
  --azul-profundo: linear-gradient(150deg, var(--marca-950) 0%, var(--marca-900) 45%, var(--marca-700) 100%);
  --letra: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --letra-titulo: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-bottom: 96px; }
html, body { margin: 0; padding: 0; }
body { font-family: var(--letra); font-size: 16px; line-height: 1.5; color: var(--tinta); background: #f6f8fb; -webkit-font-smoothing: antialiased; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sin-partir { white-space: nowrap; }
body:not(.con-orden) .solo-orden, body.con-orden .solo-entrar { display: none !important; }
.titulo-tarjeta { margin: 0; font-family: var(--letra-titulo); font-size: 20px; font-weight: 800; color: var(--marca-900); }
.pista-tarjeta { margin: 6px 0 0; color: var(--suave); font-size: 15px; }
.pista-campo { margin: 8px 0 0; color: var(--suave); font-size: 13px; }
/* La autorizacion de datos (0223, 1375): el aviso se lee entero, con su politica enlazada. */
#textoAutorizar p { margin: 8px 0 0; }
.razones { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--tinta); }
.razones a { color: var(--marca-700); font-weight: 600; }
#autorizar .boton { margin-top: 14px; }

.lienzo { min-height: 100vh; display: flex; flex-direction: column; }
/* El panel de VGI Health. En el celular: una franja azul AL FINAL, solo con su marca, quien opera la pagina y su contacto */
.panel { order: 2; color: #ffffff; background: var(--azul-profundo); padding: 22px 18px max(22px, env(safe-area-inset-bottom)); }
.fotos, .red, .panel-texto { display: none; }
.columna { flex: 1; display: flex; flex-direction: column; }
.panel-vgi { position: relative; display: grid; gap: 12px; max-width: 520px; margin: 0 auto; font-size: 14px; color: #dcecff; }
.vgi-firma { display: inline-flex; align-items: center; gap: 12px; color: #ffffff; text-decoration: none; }
.vgi-logo { height: 30px; width: auto; display: block; }
.vgi-lema { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .35); font-size: 14px; font-weight: 600; color: #ffffff; line-height: 1.25; }
.panel .quien summary { cursor: pointer; color: #a9d4ff; font-weight: 600; }
.panel .quien p { margin: 8px 0 0; color: #dcecff; line-height: 1.55; }
.vgi-contacto { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: #a9d4ff; }
.vgi-contacto a { color: #ffffff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.vgi-firma:focus-visible, .vgi-contacto a:focus-visible, .panel .quien summary:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; }

/* La franja: en el celular, azul; crece con lo que dice (el titulo, o el nombre del paciente) */
.banda { position: relative; overflow: hidden; color: #ffffff; background: linear-gradient(165deg, var(--marca-900) 0%, var(--marca-900) 25%, var(--marca-700) 100%); padding: 6px 0 64px; }
.red-chica { position: absolute; top: 0; right: 0; width: 70%; height: 100%; stroke: none; opacity: .5; }
.trazos { stroke: #9cd0ff; stroke-opacity: .45; stroke-width: 2; fill: none; }
.nodos { fill: #bfe3ff; fill-opacity: .55; stroke: none; }
/* El encabezado con el logo de la institucion: fijo arriba, siempre a la vista (el CEO, 2026-10-25) */
.cabeza { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 18px; background: var(--marca-900); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.marca-lab { background: #ffffff; border-radius: 14px; padding: 10px 16px; box-shadow: 0 6px 18px rgba(7, 31, 66, .25); display: inline-flex; align-items: center; }
/* El logo de la institucion, grande: su alto depende de su forma (la pone pagina.js al cargarlo), para que uno vertical o
   cuadrado no quede diminuto junto a uno horizontal (el CEO, 2026-10-25). */
.logo { height: 44px; width: auto; max-width: min(260px, 70vw); object-fit: contain; display: block; }
.logo.logo-medio { height: 54px; }
.logo.logo-alto { height: 70px; }
.logo-texto { font-family: var(--letra-titulo); font-weight: 800; font-size: 18px; color: var(--marca-900); }
/* Mientras la pagina pregunta si ya hay una sesion abierta no se pinta nada: asi, al actualizar, no aparece la entrada para
   quitarla enseguida (pagina.js, al final). Si el script no llegara, a los 4 segundos se ve igual. */
body.cargando .lienzo { visibility: hidden; animation: vgi-aparece 0s linear 4s forwards; }
@keyframes vgi-aparece { to { visibility: visible; } }
.titular, .orden-cabeza { position: relative; max-width: 480px; margin: 0 auto; padding: 4px 20px 0; }
h1 { font-family: var(--letra-titulo); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; margin: 0; }
.orden-cabeza { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.iniciales { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--letra-titulo); font-weight: 800; font-size: 19px; color: var(--marca-900); background: #ffffff; box-shadow: 0 6px 16px rgba(7, 31, 66, .3); }
.paciente { font-size: 21px; line-height: 1.2; }
.datos { margin: 4px 0 0; color: #cfe5ff; font-size: 14px; }
.boton-sec { font: inherit; font-size: 14px; font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px; min-height: 40px; padding: 0 14px; cursor: pointer; }

.contenido { flex: 1; padding: 0 16px 28px; margin-top: -44px; position: relative; }
.entrar, .orden { max-width: 480px; margin: 0 auto; }
.tarjeta { background: #ffffff; border-radius: 18px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 18px 40px rgba(7, 31, 66, .14); padding: 18px; }
.pestanas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea); margin: -4px -2px 4px; }
.pestana { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 15px; font-weight: 600; color: var(--suave); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 4px 12px; cursor: pointer; }
.pestana svg { width: 20px; height: 20px; flex: none; }
/* En el celular el texto largo se parte en dos renglones, junto a su icono (no debajo de el). */
.pestana > span { text-align: left; line-height: 1.25; }
.paciente:focus { outline: none; }
.pestana.activa { color: var(--marca-700); border-bottom-color: var(--marca-600); }
.formulario { display: grid; }
.fila { display: grid; grid-template-columns: 1fr; gap: 0; }
.campo { display: grid; gap: 6px; margin-top: 14px; }
.rotulo { font-size: 13px; font-weight: 600; color: var(--tinta-2); letter-spacing: .01em; }
select, input[type="email"], input[type="password"], input:not([type]) { width: 100%; font: inherit; font-size: 16px; color: var(--tinta); min-height: 50px; padding: 11px 13px; background: #ffffff; border: 1.5px solid var(--borde-campo); border-radius: 10px; transition: border-color .15s, box-shadow .15s; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--suave) 50%), linear-gradient(135deg, var(--suave) 50%, transparent 50%); background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; text-overflow: ellipsis; }
input::placeholder { color: #64748b; }
select:focus, input:focus { outline: none; border-color: var(--marca-600); box-shadow: 0 0 0 4px rgba(21, 101, 192, .18); }
.codigo { font-family: ui-monospace, 'SF Mono', Consolas, monospace; font-size: 20px; letter-spacing: .2em; text-transform: uppercase; }
.donde { margin-top: 12px; font-size: 14px; }
.donde summary { cursor: pointer; color: var(--marca-700); font-weight: 600; }
.donde-in { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; margin-top: 10px; padding: 12px; background: var(--marca-50); border: 1px solid var(--marca-100); border-radius: 12px; color: var(--tinta-2); }
.donde-in p { margin: 0; }
.recibo { width: 104px; stroke: none; }

.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; min-height: 52px; font: inherit; font-size: 16px; font-weight: 700; color: #ffffff; background: var(--marca-600); border: 0; border-radius: 12px; cursor: pointer; transition: background .15s, transform .08s; }
.boton:hover { background: var(--marca-700); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: .5; cursor: default; }
.boton:focus-visible, .boton-sec:focus-visible, .pestana:focus-visible, .enlace:focus-visible, .todos:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.boton svg { width: 20px; height: 20px; }
.boton .texto-ocupado { display: none; }
.boton.ocupado .texto-normal, .boton.ocupado svg { display: none; }
.boton.ocupado .texto-ocupado { display: inline; }
.boton.ocupado::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #ffffff; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.enlace { font: inherit; font-size: 14px; font-weight: 600; color: var(--marca-700); background: none; border: 0; margin-top: 12px; cursor: pointer; }

.aviso { margin: 12px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 15px; background: var(--error-bg); color: var(--error); border: 1px solid #fecdca; }
.orden > .aviso, .entrar > .aviso { margin: 0 0 14px; }
.aviso.ok { background: var(--ok-bg); color: var(--ok); border-color: #b7ebc8; }
.aviso.info { background: var(--marca-50); color: var(--marca-700); border-color: var(--marca-100); }
.seguro { color: var(--suave); font-size: 13px; margin: 16px 0 0; text-align: center; }
.seguro svg { width: 15px; height: 15px; color: var(--ok); vertical-align: -3px; margin-right: 6px; }

/* Sus resultados: agrupados (listos, en proceso, en la institucion), compactos, y lo listo con su casilla */
.lista { padding: 2px 0 6px; }
.lista-cabeza { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--tinta); border-bottom: 1px solid var(--linea); }
.lista-cabeza span:last-child { font-weight: 600; color: var(--suave); }
.grupo { padding: 6px 0 2px; }
.grupo + .grupo { border-top: 1px solid var(--linea); }
.grupo-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 4px; }
.grupo-titulo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.grupo-titulo svg { width: 17px; height: 17px; }
.grupo-titulo.listo { color: var(--ok); }
.grupo-titulo.proceso { color: var(--espera); }
.grupo-titulo.laboratorio { color: var(--lab); }
.todos { font: inherit; font-size: 13px; font-weight: 600; color: var(--marca-700); background: none; border: 0; cursor: pointer; padding: 4px 2px; }
.examenes { list-style: none; margin: 0; padding: 0; }
.examen { display: flex; align-items: center; gap: 12px; padding: 9px 16px; min-height: 44px; font-size: 15px; }
.examen .nombre { flex: 1; font-weight: 500; line-height: 1.3; }
.examen label { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; }
.examen input[type="checkbox"] { appearance: none; width: 22px; height: 22px; flex: none; margin: 0; border: 2px solid var(--borde-campo); border-radius: 6px; background: #ffffff; display: grid; place-items: center; cursor: pointer; }
.examen input[type="checkbox"]::after { content: ''; width: 6px; height: 11px; border: solid #ffffff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); opacity: 0; }
.examen input[type="checkbox"]:checked { background: var(--marca-600); border-color: var(--marca-600); }
.examen input[type="checkbox"]:checked::after { opacity: 1; }
.examen input[type="checkbox"]:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.examen .marca { width: 22px; height: 22px; flex: none; }
.examen.proceso .marca { color: var(--espera); }
.examen.laboratorio .marca { color: var(--lab); }
.examen.listo .marca { color: var(--ok); }
.descargar { position: sticky; bottom: 0; padding: 14px 0 max(14px, env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(246, 248, 251, 0), #f6f8fb 30%); }
.descargar .boton { margin-top: 0; box-shadow: 0 10px 24px rgba(21, 101, 192, .3); }
.pista { margin: 10px 0 0; color: var(--suave); font-size: 14px; text-align: center; }

/* El pie de la institucion (decisiones 1159 a 1163): el de la opcion B de la maqueta (oscuro, como el de una empresa, aprobado por el
   CEO): la marca con sus redes debajo, el contacto y las sedes; abajo lo legal y el sello. Lo que no tiene, no sale. */
.pie { padding: 26px 18px 0; color: #d6e6fb; background: var(--marca-950); font-size: 14px; line-height: 1.45; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie-arriba { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "marca" "contacto" "sede" "redes"; gap: 22px; max-width: 520px; margin: 0 auto; padding-bottom: 22px; }
.pie-marca { grid-area: marca; display: grid; gap: 6px; align-content: start; }
.pie-logo { height: 64px; width: auto; max-width: 100%; object-fit: contain; object-position: left; justify-self: start; padding: 8px 12px; background: #ffffff; border-radius: 12px; }
.pie-marca b { color: #ffffff; font-size: 14px; }
.pie-nit { color: #a9c2e3; font-size: 13px; }
#pieContactoCol { grid-area: contacto; } #pieSedesCol { grid-area: sede; } #pieRedesCol { grid-area: redes; }
.pie-col h3 { margin: 4px 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #ffffff; }
.pie-col ul { display: grid; gap: 10px; }
.pie-col li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.pie-col li > svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: #7cc0ff; }
.pie a { color: #9fd0ff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pie a:hover { text-decoration: underline; }
.pie a:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; border-radius: 4px; }
.pie-sedes .sede b { display: block; color: #ffffff; margin-bottom: 6px; }
.pie-sedes .sede ul { gap: 6px; }
.pie .horario span { white-space: pre-line; }
.pie .como-llegar { display: inline-flex; margin-top: 8px; font-size: 13px; }
.pie-redes li a { display: inline-flex; align-items: center; gap: 10px; }
.pie svg.marca-red { width: 22px; height: 22px; margin: 0; stroke: none; }
.pie-col li > svg.marca-red { width: 17px; height: 17px; }
.red-facebook { fill: #0866FF; } .red-instagram { fill: #E4405F; } .red-youtube { fill: #FF0000; } .red-linkedin { fill: #0A66C2; }
.red-tiktok, .red-x, .red-threads { fill: #ffffff; } .red-spotify { fill: #1DB954; } .red-whatsapp { fill: #25D366; }
.pie-abajo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; max-width: 520px; margin: 0 auto; padding: 14px 0 18px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; color: #a9c2e3; }
.pie-legal { margin: 0; }
/* «Vigilado Supersalud»: siempre, al pie y enlazado a la Superintendencia (Circular Externa 2024151000000013-5, num. 1.2.3.4); sobre
   blanco, sin modificarlo. */
.pie a.vigilado { display: block; padding: 4px 8px; background: #ffffff; border-radius: 8px; }
.pie a.vigilado img { height: 46px; width: auto; display: block; }
/* Adentro (paciente), del pie queda solo el sello, sobre el fondo de la pagina: lo demas es de la pantalla de entrar. */
body.adentro .pie-arriba, body.adentro .pie-legal { display: none !important; }
body.adentro .pie { padding-top: 0; background: none; }
body.adentro .pie-abajo { justify-content: center; border-top: 1px solid var(--linea); }

/* Tableta: el tipo y el numero, lado a lado */
@media (min-width: 520px) { .fila { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 10px; } }

/* En el computador: la pagina partida. El panel es VGI Health, con las fotos de salud que se turnan (si estan) */
@media (min-width: 960px) {
  body { background: #ffffff; }
  .lienzo { flex-direction: row; }
  .panel { order: 0; display: flex; flex-direction: column; justify-content: center; position: sticky; top: 0; height: 100vh; flex: 0 0 44%; overflow: hidden; padding: 64px 56px 28px; }
  .fotos, .red, .panel-texto { display: block; }
  .fotos { position: absolute; inset: 0; }
  .fotos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; }
  .fotos img.activa { opacity: 1; }
  .fotos.con-fotos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7, 31, 66, .9) 0%, rgba(11, 47, 94, .72) 45%, rgba(13, 71, 161, .55) 100%); }
  .fotos.con-fotos ~ .red { display: none; }
  .red { position: absolute; inset: 0; width: 100%; height: 100%; stroke: none; }
  .panel-texto { position: relative; max-width: 440px; margin: auto 0; }
  .antetitulo-claro { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #a9d4ff; }
  .frase { margin: 0; font-family: var(--letra-titulo); font-weight: 800; font-size: 40px; line-height: 1.12; letter-spacing: -.02em; }
  .beneficios { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 16px; }
  .beneficios li { display: flex; align-items: center; gap: 14px; color: #dcecff; font-size: 16px; }
  .beneficios svg { width: 22px; height: 22px; flex: none; padding: 9px; box-sizing: content-box; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #ffffff; }
  .panel-vgi { margin: 0; max-width: 440px; gap: 10px; }
  .vgi-logo { height: 32px; }
  .columna { min-height: 100vh; }
  .banda { color: var(--tinta); background: none; padding: 0 0 18px; overflow: visible; }
  .red-chica { display: none; }
  .cabeza { justify-content: flex-start; padding: 14px 40px; background: rgba(255, 255, 255, .94); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 1px 0 var(--linea); }
  .marca-lab { box-shadow: none; padding: 0; background: none; }
  .logo { height: 58px; max-width: 320px; }
  .logo.logo-medio { height: 70px; }
  .logo.logo-alto { height: 92px; }
  .titular, .orden-cabeza { max-width: 460px; padding: 32px 0 0; }
  h1 { font-size: 32px; color: var(--marca-900); }
  .datos { color: var(--suave); }
  .iniciales { background: var(--marca-600); color: #ffffff; box-shadow: none; }
  .paciente { color: var(--marca-900); }
  .boton-sec { color: var(--tinta-2); background: #ffffff; border-color: var(--linea); }
  .contenido { margin-top: 0; padding: 0 40px 24px; }
  .entrar, .orden { max-width: 460px; }
  .tarjeta { box-shadow: none; padding: 0; background: none; }
  .tarjeta.lista { background: #ffffff; border: 1px solid var(--linea); border-radius: 14px; }
  .descargar { position: static; background: none; }
  .pie { margin: auto 0 0; padding: 30px 40px 0; }
  .pie-arriba { max-width: none; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "marca contacto sede" "redes contacto sede"; gap: 10px 32px; padding-bottom: 26px; }
  #pieRedesCol h3 { margin-top: 14px; }
  .pie-abajo { max-width: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }