/* =============================================================
   TeleMed · pantallas del paciente: cabina (kiosco vertical
   1080 x 1920) y web/movil. Misma estructura; en la cabina todo
   escala con el ancho de la pantalla (html.cabina).
   ============================================================= */
html.cabina { font-size: clamp(16px, 2.35vw, 30px); }
html.web { font-size: 16px; }
html.cabina body { overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }

.app-pac { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
	background: var(--fondo) var(--fondo-img, none) center / cover no-repeat; }

/* ---------- cabecera ---------- */
.cab-pac { background: linear-gradient(120deg, var(--primario), var(--secundario)); color: #fff; padding: 1rem 1.25rem;
	display: flex; align-items: center; gap: 1rem; box-shadow: 0 6px 20px rgba(0,0,0,.12); position: relative; z-index: 2; }
.cab-pac .logo { height: 2.6rem; width: auto; border-radius: .5rem; background: #fff; padding: .2rem; }
.cab-pac .logo-svg { width: 2.6rem; height: 2.6rem; flex: none; }
.cab-pac .marca { display: grid; line-height: 1.15; }
.cab-pac .marca b { font-size: 1.35rem; letter-spacing: .3px; }
.cab-pac .marca span { font-size: .8rem; opacity: .9; font-style: italic; }
.cab-pac .der { margin-left: auto; display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.cab-pac .reloj { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1rem; }
.cab-pac .usuario-pac { display: flex; align-items: center; gap: .5rem; }

/* ---------- pasos (cabina) ---------- */
.pasos { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; padding: .9rem 1rem .4rem; list-style: none; margin: 0; }
.pasos li { display: grid; justify-items: center; gap: .25rem; font-size: .62rem; color: var(--texto-2); text-align: center; font-weight: 600; }
.pasos li i { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-style: normal;
	background: #fff; border: 2px solid var(--borde); color: var(--texto-2); font-size: .8rem; }
.pasos li.hecho i { background: var(--acento); border-color: var(--acento); color: #fff; }
.pasos li.actual i { background: var(--primario); border-color: var(--primario); color: #fff; box-shadow: 0 0 0 .3rem color-mix(in srgb, var(--primario) 20%, transparent); }
.pasos li.actual { color: var(--primario); }

/* ---------- area principal ---------- */
.pantalla { flex: 1; width: 100%; max-width: 46rem; margin: 0 auto; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
html.cabina .pantalla { max-width: none; padding: 1.25rem 2rem; justify-content: flex-start; }
.pantalla.centro { justify-content: center; }
.titulo-pantalla { font-size: 1.6rem; margin: .25rem 0 0; line-height: 1.2; text-align: center; }
.sub-pantalla { text-align: center; color: var(--texto-2); margin: 0; font-size: 1rem; }
.bloque { background: var(--superficie); border-radius: 1.25rem; box-shadow: var(--sombra); padding: 1.25rem; }
.acciones { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.acciones .btn { min-width: 9rem; }
html.cabina .btn { min-height: 3.2rem; font-size: 1rem; border-radius: 1rem; padding: .6em 1.4em; }
.btn-grande { font-size: 1.15rem; min-height: 3.6rem; padding: .7em 1.8em; border-radius: 1.1rem; }
html.cabina .btn-grande { font-size: 1.25rem; min-height: 4.2rem; }

/* ---------- pie ---------- */
.pie-pac { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem;
	background: rgba(255,255,255,.85); border-top: 1px solid var(--borde); font-size: .85rem; color: var(--texto-2); }
.pie-pac .btn { min-height: 2.6rem; }

/* ---------- bienvenida ---------- */
.bienvenida { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; text-align: center;
	padding: 2rem 1.5rem; cursor: pointer; }
.bienvenida .b-logo { max-height: 7rem; max-width: 70%; }
.bienvenida .b-titulo { font-size: 2.4rem; margin: 0; color: var(--primario); line-height: 1.1; }
.bienvenida .b-texto { font-size: 1.15rem; color: var(--texto-2); max-width: 30rem; margin: 0; }
.bienvenida .b-icono { width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-items: center; color: var(--peligro);
	background: radial-gradient(circle at 35% 30%, #fff, #e6eefb); box-shadow: inset 0 0 0 .4rem #fff, var(--sombra); animation: latido 1.6s ease-in-out infinite; }
.bienvenida .b-icono svg { width: 55%; height: 55%; }
.bienvenida .b-imagen { max-width: 90%; max-height: 22rem; border-radius: 1.25rem; box-shadow: var(--sombra); }
.bienvenida .b-boton { font-size: 1.35rem; padding: .9em 2.4em; border-radius: 999px; box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--primario) 35%, transparent);
	animation: pulso 2.2s ease-in-out infinite; }
.bienvenida .b-qr { background: #fff; }
@keyframes latido { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.06); } 30% { transform: scale(1); } }
@keyframes pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primario) 45%, transparent); } 50% { box-shadow: 0 0 0 1rem transparent; } }
.b-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; width: min(34rem, 100%); margin-top: .5rem; }
.b-pasos div { background: #fff; border-radius: 1rem; padding: .7rem .5rem; font-size: .78rem; color: var(--texto-2); box-shadow: var(--sombra); }
.b-pasos b { display: block; color: var(--primario); font-size: 1.1rem; }

/* ---------- documento y teclado ---------- */
.tipo-doc { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.tipo-doc button { padding: .8rem; border-radius: 1rem; border: 2px solid var(--borde); background: #fff; font-weight: 700; cursor: pointer; font-size: 1rem; }
.tipo-doc button[aria-pressed="true"] { border-color: var(--primario); background: color-mix(in srgb, var(--primario) 10%, #fff); color: var(--primario); }
.doc-visor { font-size: 2.4rem; text-align: center; letter-spacing: .35rem; font-weight: 700; padding: .6rem; border-radius: 1rem;
	background: #f4f7fb; border: 2px solid var(--borde); min-height: 4.2rem; font-variant-numeric: tabular-nums; width: 100%; }
.doc-visor:focus { border-color: var(--primario); outline: none; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.teclado button { font-size: 1.9rem; font-weight: 700; padding: .55rem 0; min-height: 4.4rem; border-radius: 1rem; border: 0; cursor: pointer;
	background: linear-gradient(180deg, #2f7be0, var(--primario)); color: #fff; box-shadow: 0 .3rem 0 color-mix(in srgb, var(--primario) 60%, #000); }
.teclado button:active { transform: translateY(.2rem); box-shadow: 0 .1rem 0 color-mix(in srgb, var(--primario) 60%, #000); }
.teclado .t-borrar { background: #eef2f8; color: var(--texto); box-shadow: 0 .3rem 0 #c9d3e2; font-size: 1.4rem; }
.teclado .t-aceptar { background: linear-gradient(180deg, #22b357, var(--acento)); box-shadow: 0 .3rem 0 #0f6b30; font-size: 1.2rem; }
.teclado-alfa { display: grid; grid-template-columns: repeat(10, 1fr); gap: .35rem; }
.teclado-alfa button { font-size: 1.05rem; font-weight: 700; min-height: 3rem; border-radius: .7rem; border: 0; background: #e3ebf6; cursor: pointer; }

/* ---------- confirmacion ---------- */
.confirmado { display: grid; justify-items: center; gap: 1rem; text-align: center; padding: 1.5rem 1rem; }
.circulo-ok { width: 8rem; height: 8rem; border-radius: 50%; background: var(--acento); color: #fff; display: grid; place-items: center;
	box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--acento) 18%, transparent); animation: aparecer .4s ease-out; }
.circulo-ok.azul { background: var(--primario); box-shadow: 0 0 0 .7rem color-mix(in srgb, var(--primario) 18%, transparent); }
.circulo-ok svg { width: 55%; height: 55%; }
.confirmado h2 { margin: 0; font-size: 1.8rem; }
@keyframes aparecer { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- opciones ---------- */
.opciones { display: grid; gap: 1rem; }
.opcion { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; border-radius: 1.25rem; border: 2px solid transparent; cursor: pointer;
	background: linear-gradient(135deg, color-mix(in srgb, var(--secundario) 18%, #fff), #fff); box-shadow: var(--sombra); text-align: left; width: 100%; }
.opcion:hover, .opcion:focus-visible { border-color: var(--secundario); }
.opcion .o-ico { width: 3.6rem; height: 3.6rem; border-radius: 1rem; display: grid; place-items: center; background: var(--primario); color: #fff; flex: none; }
.opcion .o-ico svg { width: 60%; height: 60%; }
.opcion b { display: block; font-size: 1.2rem; color: var(--primario); }
.opcion span { color: var(--texto-2); font-size: .92rem; }
.opcion.destacada { background: linear-gradient(135deg, var(--primario), var(--secundario)); }
.opcion.destacada b, .opcion.destacada span { color: #fff; }
.opcion.destacada .o-ico { background: #fff; color: var(--primario); }

/* ---------- especialidades y medicos ---------- */
.esp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .9rem; }
.esp { display: grid; justify-items: center; gap: .5rem; padding: 1.1rem .7rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--sombra);
	border: 2px solid transparent; cursor: pointer; text-align: center; font-weight: 700; }
.esp:hover, .esp:focus-visible { border-color: var(--esp, var(--primario)); }
.esp .e-ico { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--esp, var(--primario)); }
.esp .e-ico svg { width: 55%; height: 55%; }
.esp small { font-weight: 500; color: var(--texto-2); }
.medicos { display: grid; gap: .9rem; }
.medico-t { display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: center; padding: 1rem 1.1rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--sombra); }
.medico-t .avatar { width: 4.6rem; height: 4.6rem; font-size: 1.6rem; }
.medico-t h3 { margin: 0; font-size: 1.15rem; }
.medico-t p { margin: .15rem 0 0; color: var(--texto-2); font-size: .9rem; }
.medico-t .m-acc { grid-column: 1 / -1; display: flex; gap: .6rem; flex-wrap: wrap; }
.medico-t .m-acc .btn { flex: 1 1 12rem; }

/* ---------- turnos ---------- */
.dias { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.dias button { flex: none; padding: .55rem .9rem; border-radius: .9rem; border: 2px solid var(--borde); background: #fff; cursor: pointer; text-align: center; font-weight: 700; min-width: 5.2rem; }
.dias button small { display: block; font-weight: 500; color: var(--texto-2); font-size: .75rem; }
.dias button[aria-pressed="true"] { border-color: var(--primario); background: var(--primario); color: #fff; }
.dias button[aria-pressed="true"] small { color: #e6eefb; }
.dias button:disabled { opacity: .45; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .55rem; }
.horas button { padding: .7rem 0; border-radius: .9rem; border: 2px solid var(--borde); background: #fff; font-weight: 700; cursor: pointer; font-size: 1.05rem; }
.horas button:hover, .horas button[aria-pressed="true"] { border-color: var(--primario); background: color-mix(in srgb, var(--primario) 10%, #fff); color: var(--primario); }

/* ---------- citas ---------- */
.cita-t { display: grid; gap: .5rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: #fff; box-shadow: var(--sombra); border-left: .4rem solid var(--primario); }
.cita-t.hoy { border-left-color: var(--acento); }
.cita-t .c-cab { display: flex; justify-content: space-between; gap: .5rem; align-items: flex-start; flex-wrap: wrap; }
.cita-t h3 { margin: 0; font-size: 1.1rem; }
.cita-t .c-hora { font-size: 1.5rem; font-weight: 800; color: var(--primario); }
.cita-t .c-acc { display: flex; gap: .5rem; flex-wrap: wrap; }
.cita-t .c-acc .btn { flex: 1 1 9rem; }
.cita-qr { display: grid; justify-items: center; gap: .3rem; padding-top: .5rem; }
.cita-qr svg { width: 11rem; height: 11rem; background: #fff; padding: .4rem; border-radius: .6rem; border: 1px solid var(--borde); }

/* ---------- pago ---------- */
.pago { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.codigo-pago { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 2.2rem; font-weight: 800; letter-spacing: .15rem;
	padding: .5rem 1rem; border-radius: 1rem; background: #fff7e6; border: 2px dashed #f59e0b; color: #7c2d12; }
.pago .monto { font-size: 1.6rem; font-weight: 800; }
.pago .qr svg { width: 12rem; height: 12rem; background: #fff; padding: .5rem; border-radius: .8rem; }
.esperando { display: inline-flex; align-items: center; gap: .6rem; color: var(--texto-2); }
.esperando::before { content: ""; width: 1rem; height: 1rem; border-radius: 50%; border: .2rem solid var(--borde); border-top-color: var(--primario); animation: giro 1s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- prueba de equipo y sala ---------- */
.prueba video { width: 100%; max-height: 40vh; border-radius: 1.2rem; background: #0b1730; object-fit: cover; transform: scaleX(-1); }
.nivel { height: .7rem; border-radius: 1rem; background: #e3eaf4; overflow: hidden; }
.nivel i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acento), #84cc16); transition: width .08s; }
.sala-espera { display: grid; justify-items: center; gap: 1rem; text-align: center; }
.sala-espera .posicion { font-size: 3.4rem; font-weight: 800; color: var(--primario); line-height: 1; }
.sala-video { position: relative; flex: 1; min-height: 60vh; border-radius: 1.4rem; overflow: hidden; background: #0b1730; box-shadow: var(--sombra); }
html.cabina .sala-video { min-height: 62vh; }
.sala-video .video-remoto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b1730; }
.sala-video .video-local { position: absolute; right: 1rem; bottom: 6.5rem; width: 26%; max-width: 14rem; aspect-ratio: 3 / 4; object-fit: cover;
	border-radius: 1rem; border: .2rem solid #fff; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.4); transform: scaleX(-1); background: #1f2c45; z-index: 2; }
.sala-video iframe { position: absolute; inset: 0; }
.sala-estado { position: absolute; left: 1rem; top: 1rem; z-index: 3; background: rgba(0,0,0,.55); color: #fff; padding: .4rem .8rem; border-radius: 999px; font-size: .85rem; }
.sala-grab { position: absolute; right: 1rem; top: 1rem; z-index: 3; background: rgba(198,40,40,.9); color: #fff; padding: .35rem .75rem; border-radius: 999px; font-size: .8rem; font-weight: 700; }
.sala-grab::before { content: "● "; }
.controles { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; justify-content: center; gap: 1.2rem; z-index: 3; }
.controles button { width: 4.4rem; height: 4.4rem; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
	background: rgba(255,255,255,.95); color: var(--texto); box-shadow: 0 .4rem 1rem rgba(0,0,0,.3); }
.controles button svg { width: 45%; height: 45%; }
.controles button[aria-pressed="false"] { background: #475569; color: #fff; }
.controles .colgar { background: var(--peligro); color: #fff; }

/* ---------- encuesta ---------- */
.estrellas { display: flex; gap: .4rem; justify-content: center; }
.estrellas button { border: 0; background: none; cursor: pointer; color: #cbd5e1; padding: .2rem; }
.estrellas button svg { width: 3.2rem; height: 3.2rem; }
.estrellas button.on { color: #f59e0b; }
.estrellas button.on svg { fill: currentColor; }

/* ---------- lector QR ---------- */
.lector { position: relative; border-radius: 1.2rem; overflow: hidden; background: #000; aspect-ratio: 1; max-height: 50vh; margin: 0 auto; width: min(100%, 50vh); }
.lector video { width: 100%; height: 100%; object-fit: cover; }
.lector::after { content: ""; position: absolute; inset: 15%; border: .3rem solid rgba(255,255,255,.85); border-radius: 1rem; box-shadow: 0 0 0 100vmax rgba(0,0,0,.35); }

/* ---------- avisos en pantalla ---------- */
.nota { padding: .8rem 1rem; border-radius: 1rem; background: #eff6ff; color: #1e3a8a; font-size: .95rem; }
.nota.aviso { background: #fff7ed; color: #9a3412; }
.nota.error { background: #fef2f2; color: #991b1b; }
.nota.ok { background: #f0fdf4; color: #166534; }

/* ---------- web/movil ---------- */
html.web .pantalla { padding-top: 1.5rem; }
.login-web { display: grid; gap: 1rem; }
.separador { display: flex; align-items: center; gap: .8rem; color: var(--texto-2); font-size: .85rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.otp { font-size: 2rem; letter-spacing: .6rem; text-align: center; font-weight: 700; }
.pestanas { display: flex; gap: .4rem; background: #e3eaf4; border-radius: 1rem; padding: .3rem; }
.pestanas button { flex: 1; border: 0; background: transparent; padding: .6rem; border-radius: .8rem; font-weight: 700; cursor: pointer; color: var(--texto-2); }
.pestanas button[aria-selected="true"] { background: #fff; color: var(--primario); box-shadow: 0 2px 6px rgba(0,0,0,.08); }

@media (max-width: 560px) {
	.titulo-pantalla { font-size: 1.35rem; }
	.cab-pac .marca span { display: none; }
	.codigo-pago { font-size: 1.5rem; }
	.controles button { width: 3.6rem; height: 3.6rem; }
}