/* ══════════════════════════════════════════════════════════════════════════
   CAPACITACIÓN — página pública del chofer
   ══════════════════════════════════════════════════════════════════════════
   Hoja aparte de styles.css a propósito. Esta página no tiene login y la usa
   gente de afuera desde su celular; no debe arrastrar el layout de la app
   (sidebar, login-wall, pantallas) ni depender de sus cambios.

   Los tokens sí son los mismos de DocuTrans: la familia visual tiene que
   leerse igual aunque el código esté separado.

   Mobile-first sin excusas: el 100% de los choferes entra desde el teléfono,
   parado al lado del camión y muchas veces con sol de frente. De ahí los
   targets grandes, el contraste alto y una sola columna siempre.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --b900:#0a1733; --b800:#0d2348; --b700:#0f3460; --b600:#1a4d9c;
  --b500:#2563eb; --b400:#4a90e2; --b300:#93b8e6; --b200:#c9def0;
  --b100:#e3eef9; --b50:#f1f6fc;

  --text:#0f172a; --text2:#475569; --text3:#94a3b8;
  --border:#e2e8f0; --brd2:#cbd5e1;

  --ok:#047857;   --ok-l:#d1fae5;
  --warn:#b45309; --warn-l:#fef3c7;
  --bad:#b91c1c;  --bad-l:#fee2e2;
  --info:#1d4ed8; --info-l:#dbeafe;

  --bg:#f1f5f9; --surf:#ffffff; --s2:#f8fafc; --s3:#eef2f7;

  --radius:10px; --radius-sm:6px; --radius-lg:14px;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:0 4px 12px rgba(15,23,42,.08), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:0 12px 32px rgba(15,52,96,.12);

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

body {
  background:var(--bg); color:var(--text); font-family:var(--font); font-size:15px;
  line-height:1.5; min-height:100dvh;
}

/* El ancho lo topea cada pantalla, no el contenedor: así la portada puede
   ocupar el ancho completo del monitor mientras el resto sigue en una columna
   legible. Antes el tope estaba acá y la portada quedaba encerrada en una caja
   angosta con el monitor vacío alrededor. */
.wrap { padding:0 0 96px; }

/* ══ ENCABEZADO ══ */
.top-fijo { position:sticky; top:0; z-index:50; }
.top {
  background:var(--b900); color:#fff; padding:14px 16px;
  display:flex; align-items:center; gap:12px;
}
.top-back {
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.3);
  border-radius:var(--radius-sm); width:34px; height:34px; flex-shrink:0;
  color:#fff; font-size:17px; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.top-back.vis { display:flex; }
.top-ttl { font-size:14px; font-weight:700; letter-spacing:.2px; flex:1; min-width:0; }
.top-sub { font-size:11px; color:rgba(255,255,255,.55); margin-top:1px; }
/* En la portada la barra queda solo con el selector de idioma: el nombre lo
   pone el logo, y así el navy de arriba y el de la portada se leen como uno. */
.top.sin-ttl { padding-bottom:8px; }
.top.sin-ttl .top-ttl, .top.sin-ttl .top-sub { display:none; }

.lang { display:flex; gap:4px; flex-shrink:0; }
.lang button {
  background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.7); border-radius:var(--radius-sm);
  padding:6px 10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
}
.lang button.on { background:var(--b500); border-color:var(--b400); color:#fff; }

/* ══ BARRA DE PROGRESO ══ */
/* Un chofer que no sabe cuánto falta abandona. */
.prog { height:3px; background:var(--b800); }
.prog i { display:block; height:100%; background:var(--b400); width:0; transition:width .3s ease; }

/* ══ PANTALLAS ══ */
.step { display:none; max-width:520px; margin:0 auto; padding:16px; }
.step.on { display:block; animation:fade .22s ease; }
@keyframes fade { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

/* ══ TARJETAS ══ */
.card { background:var(--surf); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:14px; }
.card-hdr {
  padding:11px 14px; display:flex; align-items:center; gap:9px;
  background:var(--b900); color:#fff; font-size:12px; font-weight:700;
  letter-spacing:.7px; text-transform:uppercase;
}
.card-hdr.rd { background:var(--bad); }
.card-hdr.gn { background:var(--ok); }
.card-body { padding:14px; }

/* ══ PORTADA ══ */
/* Es la única pantalla pensada primero para el monitor: mitad de los choferes
   la ven en el TV de la sala o en la compu de la oficina, y ahí una columna de
   520 px flotando en el medio se veía perdida. Acá el navy toma todo el ancho
   de la pantalla y las dos opciones se ponen lado a lado; en el teléfono el
   mismo bloque se comprime y las opciones vuelven a apilarse. */
#s-inicio { max-width:none; padding:0; }
/* Con `.on`, y no a secas: un `display` colgado del id le gana al display:none
   de `.step` y la portada se quedaba pegada encima del resto de las pantallas. */
#s-inicio.on { display:flex; flex-direction:column; min-height:calc(100dvh - 55px); }
.portada {
  color:#fff; text-align:center; padding:34px 22px 38px;
  background: radial-gradient(ellipse 90% 70% at 78% 0%, rgba(74,144,226,.22), transparent),
              linear-gradient(180deg, #103c70 0%, var(--b800) 100%);
}
.portada h1 { font-size:23px; font-weight:800; line-height:1.22; letter-spacing:-.3px; margin-top:22px; }
.portada-sub { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--b300); margin-top:7px; }
.portada p { font-size:14.5px; color:rgba(255,255,255,.72); margin-top:16px; line-height:1.5; }

/* Las opciones ocupan lo que sobra: sin esto quedaba media pantalla de gris
   vacío abajo, que era lo que hacía ver la portada desbalanceada. En el
   teléfono van pegadas al navy (el pulgar y la vista bajan derecho del título
   a la opción); en el monitor se centran en el aire que sobra. */
.portada-picks {
  flex:1; display:grid; gap:13px; align-content:start;
  width:100%; max-width:520px; margin:0 auto; padding:22px 16px 30px;
}

.logo-wrap { display:inline-flex; flex-direction:column; align-items:center; gap:8px; }
.logo-wrap img { max-width:200px; width:100%; height:auto; display:block; animation:logoFade .8s ease forwards; }
@keyframes logoFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.logo-bar {
  position:relative; align-self:stretch; height:2.5px; width:0; border-radius:3px;
  background:var(--b400); animation:logoBar .7s cubic-bezier(.3,.7,.2,1) .55s forwards;
}
@keyframes logoBar { to { width:100%; } }
.logo-bar::after {
  content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--b400);
  opacity:0; animation:logoDot .3s ease 1.25s forwards;
}
@keyframes logoDot { to { opacity:1; } }
/* Quien pidió menos movimiento ve el logo y la línea ya dibujados. */
@media (prefers-reduced-motion: reduce) {
  .logo-wrap img { animation:none; opacity:1; }
  .logo-bar { animation:none; width:100%; }
  .logo-bar::after { animation:none; opacity:1; }
}

/* ══ ELEGIR CAPACITACIÓN (inicio) ══ */
.hero { text-align:center; padding:26px 8px 20px; }
.hero h1 { font-size:21px; font-weight:800; line-height:1.28; letter-spacing:-.2px; }
.hero p { color:var(--text2); font-size:14px; margin-top:8px; }

.pick {
  width:100%; text-align:left; background:var(--surf); border:1px solid var(--border);
  border-left:4px solid var(--b600); border-radius:var(--radius); padding:16px;
  cursor:pointer; font-family:inherit; box-shadow:var(--shadow-sm);
  display:flex; align-items:center; gap:14px;
}
.pick:active { transform:scale(.99); }
.pick-ico { font-size:26px; flex-shrink:0; }
/* min-width:0 — sin esto el texto largo no puede encogerse, empuja el ancho
   del botón y termina desbordando la página entera a lo ancho. */
.pick-txt { flex:1; min-width:0; }
.pick-ttl { display:block; font-size:16px; font-weight:700; color:var(--text); }
.pick-desc { display:block; font-size:13px; color:var(--text2); margin-top:3px; }

/* ══ FORMULARIO ══ */
.frow { margin-bottom:13px; }
.frow.two { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.flbl { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text2); margin-bottom:5px; }
.flbl .opt { text-transform:none; letter-spacing:0; font-weight:600; color:var(--text3); }
/* 16px o más: abajo de eso iOS hace zoom al enfocar y descoloca la pantalla. */
.finp {
  width:100%; padding:12px 13px; border:1px solid var(--brd2); border-radius:var(--radius-sm);
  font-size:16px; font-family:inherit; color:var(--text); background:var(--surf); min-height:46px;
}
.finp:focus { outline:none; border-color:var(--b500); box-shadow:0 0 0 3px rgba(37,99,235,.13); }
.finp::placeholder { color:var(--text3); }

/* ══ BOTONES ══ */
.btn {
  width:100%; padding:15px; border:none; border-radius:var(--radius);
  font-size:15px; font-weight:700; font-family:inherit; cursor:pointer;
  min-height:52px; display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-pri { background:var(--b600); color:#fff; }
.btn-pri:active { background:var(--b700); }
.btn-ok  { background:var(--ok); color:#fff; }
.btn-gh  { background:var(--surf); color:var(--text2); border:1px solid var(--brd2); }
.btn:disabled, .btn.off { background:var(--s3); color:var(--text3); cursor:not-allowed; }

/* ══ DECLARACIÓN JURADA ══ */
.dj-item { display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--s3); }
.dj-item:last-child { border-bottom:none; }
.dj-bul {
  width:20px; height:20px; border-radius:50%; background:var(--bad); color:#fff;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:1px;
}
.dj-txt { font-size:13.5px; line-height:1.5; color:var(--text2); }
.dj-pen {
  background:var(--b900); color:#fff; text-align:center; padding:11px;
  font-size:12.5px; font-weight:800; margin-top:12px; border-radius:var(--radius-sm);
  letter-spacing:.3px; line-height:1.4;
}

/* ══ CUESTIONARIO ══ */
/* La estructura es la de la app anterior, que en el playón funcionaba mejor:
   el enunciado arriba con el 🔊 pegado al costado, y V/F como dos mitades
   grandes al pie de la tarjeta — verde y roja, no dos botones azules iguales.
   Un chofer con guantes y sol de frente no tiene que leer para saber cuál es
   cuál: las ubica por color y por tamaño. */
.quiz-intro {
  font-size:13px; font-weight:600; color:var(--text2); line-height:1.5;
  background:var(--b50); border-left:3px solid var(--b500);
  border-radius:var(--radius-sm); padding:11px 12px; margin-bottom:14px;
}
.quiz-intro b { color:var(--b700); }

.q { border:1.5px solid var(--border); border-radius:var(--radius); margin-bottom:11px; background:var(--surf); overflow:hidden; }
.q.done { border-color:var(--brd2); }
.q-top { display:flex; align-items:stretch; }
.q-cuerpo { flex:1; min-width:0; padding:13px 14px 11px; }
.q-num { display:block; font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--text3); margin-bottom:4px; }
.q-txt { font-size:14px; line-height:1.5; color:var(--text); font-weight:500; }
.q-audio {
  flex-shrink:0; width:46px; border:none; border-left:1px solid var(--border);
  background:var(--s2); font-size:18px; cursor:pointer; color:var(--text3); font-family:inherit;
}
.q-audio.playing { background:var(--b100); color:var(--b700); animation:pulso 1s infinite; }
@keyframes pulso { 0%,100%{opacity:1} 50%{opacity:.5} }

.q-opts { display:flex; border-top:1px solid var(--border); }
.q-opt {
  flex:1; min-height:54px; border:none; border-right:1px solid var(--border);
  background:var(--s2); font-size:24px; font-weight:800; font-family:inherit;
  cursor:pointer; color:var(--text3); letter-spacing:.5px;
}
.q-opt:last-child { border-right:none; }
.q-opt.v.on { background:var(--ok-l);  color:var(--ok);  box-shadow:inset 0 -3px 0 var(--ok); }
.q-opt.f.on { background:var(--bad-l); color:var(--bad); box-shadow:inset 0 -3px 0 var(--bad); }

/* ══ FIRMA ══ */
/* touch-action:none — sin esto el navegador scrollea la página en vez de
   dejar dibujar, y la firma sale cortada. */
#firma {
  width:100%; height:170px; background:#fff; border:2px dashed var(--brd2);
  border-radius:var(--radius-sm); display:block; touch-action:none; cursor:crosshair;
}
.firma-hint { font-size:12.5px; color:var(--text2); margin-bottom:9px; }

/* ══ FOTO ══ */
.foto-box {
  width:100%; aspect-ratio:3/4; max-height:320px; background:var(--s2);
  border:2px dashed var(--brd2); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--text3); overflow:hidden; margin-bottom:11px;
}
.foto-box img { width:100%; height:100%; object-fit:cover; }

/* ══ VIDEO / PROCEDIMIENTO ══ */
.video-box { position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radius-sm); overflow:hidden; }
.video-box iframe { width:100%; height:100%; border:0; }
.video-status { font-size:12.5px; color:var(--text2); text-align:center; margin:9px 0 11px; min-height:19px; }

/* El reproductor va sin la barra de YouTube, así que esta es la única señal de
   avance que ve el chofer. Sube sola con lo REALMENTE visto (capacitacion.js);
   no es una barra que se pueda tocar. */
.vid-bar { height:5px; background:var(--s3); border-radius:999px; overflow:hidden; margin-top:11px; }
.vid-bar i { display:block; height:100%; width:0; background:var(--b500); transition:width .3s linear; }

/* ── Controles propios ──────────────────────────────────────────────────────
   El reproductor va sin los de YouTube, así que play/pausa y pantalla completa
   los pone la app. */
.vid-ctrls { display:flex; gap:8px; margin-bottom:10px; }
.vid-play { flex:1; margin-bottom:0; }
.vid-fs { flex:none; width:52px; padding-left:0; padding-right:0; font-size:18px; }

/* ── Lo que lleva a YouTube, fuera de alcance ────────────────────────────────
   El botón "Ver en YouTube" vive adentro del iframe y no se puede sacar desde
   afuera: se puede dejar sin efecto, que es esto. Importa porque el chofer que
   se va a YouTube deja este reproductor pausado — el contador de lo visto se
   queda quieto y vuelve sin nada acreditado.
   El centro queda libre a propósito: tocar el video para reproducir es lo que
   funciona en todos los celulares. */
.vid-tapa { position:absolute; left:0; right:0; height:22%; min-height:48px; z-index:3; cursor:pointer; }
.vid-tapa-arr { top:0; }
.vid-tapa-ab  { bottom:0; }

/* ── Pantalla completa ──────────────────────────────────────────────────────
   Se agranda el CONTENEDOR, no se abre nada: el reproductor sigue siendo el
   mismo, así que el contador no se corta y YouTube no vuelve a dibujar sus
   controles (que es lo que pasaba con la pantalla completa nativa del player,
   y por eso va con fs:0).
   El segundo camino es para iOS, que no deja pedírsela a un div. */
.video-box.fs-css { position:fixed; top:0; left:0; right:0; bottom:0; width:100vw; height:100vh; aspect-ratio:auto; border-radius:0; z-index:9999; }
.video-box:fullscreen { aspect-ratio:auto; width:100%; height:100%; border-radius:0; }
.video-box:-webkit-full-screen { aspect-ratio:auto; width:100%; height:100%; border-radius:0; }
body.vid-fs { overflow:hidden; }

/* Único control visible ahí adentro. */
.vid-fs-salir {
  display:none; position:absolute; top:10px; right:10px; z-index:5;
  width:42px; height:42px; border-radius:50%; border:none;
  background:rgba(0,0,0,.6); color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.video-box.fs-css .vid-fs-salir,
.video-box:fullscreen .vid-fs-salir,
.video-box:-webkit-full-screen .vid-fs-salir { display:block; }

/* ══ SALTO DE VIDEO POR TV ══ */
.tv-alt { margin-top:14px; padding-top:13px; border-top:1px solid var(--border); }
.tv-link {
  width:100%; background:none; border:none; font-family:inherit; cursor:pointer;
  font-size:13px; font-weight:600; color:var(--b600); text-decoration:underline;
  padding:8px; min-height:40px;
}
.tv-inp { text-transform:uppercase; letter-spacing:3px; font-weight:800; text-align:center; margin-bottom:10px; }

/* ══ PROCEDIMIENTO DE ENLONADO ══ */
/* Vuelve la señalética de la app anterior, que se leía como un cartel de obra
   y no como un instructivo: número del paso en una columna navy, y los riesgos
   en tabla Tarea / Riesgo / Método de control con el peligro en rojo y el
   control en verde. El chofer barre la columna roja y ya sabe qué lo puede
   lastimar. Los colores son los de DocuTrans, la estructura es la vieja. */
.proc { max-height:58dvh; overflow-y:auto; padding:14px; background:var(--s3); -webkit-overflow-scrolling:touch; }
.proc-intro { display:flex; gap:11px; align-items:flex-start; background:var(--b900); color:#fff; border-radius:var(--radius-sm); padding:14px; margin-bottom:16px; }
.proc-intro b { display:block; font-size:15px; margin-bottom:4px; }
.proc-intro span { font-size:13px; color:rgba(255,255,255,.7); line-height:1.55; }
.sec-lbl { font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--text3); margin:18px 0 9px 2px; }

.paso {
  display:flex; background:var(--surf); border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-sm);
}
.paso-n {
  flex-shrink:0; width:46px; background:var(--b900); color:#fff;
  display:flex; flex-direction:column; align-items:center; padding:13px 0 10px; gap:3px;
}
.paso-n b { font-size:22px; font-weight:800; color:var(--b300); line-height:1; }
.paso-n span { font-size:8px; font-weight:700; letter-spacing:.8px; color:rgba(255,255,255,.4); }
.paso-cuerpo { flex:1; min-width:0; padding:12px 13px; border-left:3px solid var(--b400); }
.paso.key  .paso-cuerpo { border-left-color:var(--b600); }
.paso.warn .paso-cuerpo { border-left-color:var(--bad); background:var(--bad-l); }
.paso.safe .paso-cuerpo { border-left-color:var(--ok); }
.paso-txt { font-size:13.5px; line-height:1.55; color:var(--text); }
.paso.warn .paso-txt strong { color:var(--bad); }

.riesgo { background:var(--surf); border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden; margin-bottom:10px; box-shadow:var(--shadow-sm); }
.riesgo-hdr {
  background:linear-gradient(135deg,#7c1d1d,var(--bad)); padding:10px 12px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; font-weight:800; color:#fff;
}
.riesgo-fila { display:flex; border-bottom:1px solid var(--s3); }
.riesgo-fila:last-child { border-bottom:none; }
.rc { padding:9px 10px; font-size:11.5px; line-height:1.45; color:var(--text2); }
.rc.tarea   { flex:0 0 27%; border-right:1px solid var(--border); font-weight:600; }
.rc.peligro { flex:0 0 31%; border-right:1px solid var(--border); color:var(--bad); font-weight:600; }
.rc.control { flex:1; color:var(--ok); }
.riesgo-cab .rc { font-size:8.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; padding:7px 10px; border-bottom:1px solid var(--border); }
.riesgo-cab .rc.tarea   { background:var(--s2);  color:var(--text3); }
.riesgo-cab .rc.peligro { background:var(--bad-l); color:var(--bad); }
.riesgo-cab .rc.control { background:var(--ok-l);  color:var(--ok); }

.epp {
  display:flex; gap:11px; align-items:flex-start; border-radius:var(--radius-sm);
  padding:14px; margin-top:14px; color:#fff;
  background:linear-gradient(135deg,#f97316,#c2410c);
}
.epp-txt { font-size:12.5px; font-weight:700; line-height:1.55; }

.audio-btn {
  background:var(--s3); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:6px 10px; font-size:12px; cursor:pointer; font-family:inherit;
  color:var(--text2); margin-top:8px; display:inline-block;
}
.audio-btn.playing { background:var(--b100); border-color:var(--b400); color:var(--b700); }
/* El del encabezado rojo del riesgo: mismo botón, sobre fondo oscuro. */
.audio-btn.sobre-rojo {
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35);
  color:#fff; margin:0 0 0 auto; padding:4px 9px;
}
.audio-btn.sobre-rojo.playing { background:#fff; border-color:#fff; color:var(--bad); }

/* ══ AVISOS ══ */
.aviso { border-radius:var(--radius); padding:14px; margin-bottom:14px; font-size:13.5px; line-height:1.55; }
.aviso.ok  { background:var(--ok-l);   color:var(--ok);   border:1px solid rgba(4,120,87,.25); }
.aviso.bad { background:var(--bad-l);  color:var(--bad);  border:1px solid rgba(185,28,28,.25); }
.aviso.inf { background:var(--info-l); color:var(--info); border:1px solid rgba(29,78,216,.25); }
.aviso b { display:block; margin-bottom:3px; font-size:14.5px; }

/* ══ PASE FINAL ══ */
.pase { background:var(--b900); border-radius:var(--radius-lg); padding:24px 20px; text-align:center; color:#fff; box-shadow:var(--shadow-lg); }
.pase h2 { font-size:19px; font-weight:800; margin-bottom:5px; }
.pase-sub { font-size:13px; color:rgba(255,255,255,.6); margin-bottom:18px; line-height:1.5; }
.pase-qr { background:#fff; border-radius:var(--radius); padding:14px; display:inline-block; margin-bottom:16px; }
.pase-qr canvas { display:block; width:196px; height:196px; }
.pase-vence { font-size:12.5px; color:#fbbf24; font-weight:700; }
.pase-nota { font-size:12px; color:rgba(255,255,255,.5); margin-top:14px; line-height:1.5; }
/* Cerrar la sesión. Discreto a propósito: lo importante de esta pantalla es el
   QR, y este botón se toca una sola vez al final. Pero grande, porque en un
   dispositivo compartido es el que evita que el pase quede colgado. */
.btn-lim {
  margin-top:20px; background:transparent; color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.3);
}
.btn-lim:active { background:rgba(255,255,255,.12); }

/* ══════════════════════════════════════════════════════════════════════════
   PANTALLA GRANDE
   ══════════════════════════════════════════════════════════════════════════
   La página se sigue diseñando para el teléfono, pero ya no vive solo ahí: el
   chofer que mira el video en el TV de SGL rinde el cuestionario en una
   pantalla ancha, y con la columna de 520 px el reproductor quedaba del tamaño
   de una estampilla en el medio de la nada.

   No se cambia la estructura ni el orden: solo se le da aire a la columna, se
   agranda el video y se muestran más pasos del procedimiento sin scrollear.
   Una sola columna sigue siendo lo correcto — el recorrido es un paso a la vez
   y partirlo en dos haría que el chofer tenga que buscar dónde seguir. */
@media (min-width: 860px) {
  .step, .foot-in { max-width: 720px; }
  .step { padding: 24px 16px; }

  /* ── PORTADA EN PANTALLA GRANDE ── */
  .portada { padding: 66px 24px 74px; }
  .logo-wrap img { max-width: 290px; }
  .logo-wrap { gap: 12px; }
  .portada h1 { font-size: 40px; margin-top: 30px; }
  .portada-sub { font-size: 14px; letter-spacing: 2.4px; margin-top: 10px; }
  .portada p { font-size: 17.5px; margin-top: 22px; }

  /* Dos tarjetas grandes lado a lado, con el ícono arriba: en el monitor se
     eligen de un vistazo en vez de leerse como dos renglones de una lista. */
  .portada-picks { grid-template-columns: 1fr 1fr; gap: 22px; max-width: 880px; padding: 40px 24px 48px; align-content: center; }
  .portada-picks .pick {
    flex-direction: column; text-align: center; justify-content: center;
    gap: 14px; padding: 34px 26px; border-left: 1px solid var(--border);
    border-top: 4px solid var(--b600); border-radius: var(--radius-lg);
    box-shadow: var(--shadow); transition: transform .15s ease, box-shadow .15s ease;
  }
  .portada-picks .pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .portada-picks .pick-ico { font-size: 46px; }
  .portada-picks .pick-ttl { font-size: 21px; }
  .portada-picks .pick-desc { font-size: 14px; margin-top: 6px; }

  /* El video es el contenido, no un adorno: se lleva todo el ancho útil. */
  #bloque-video .card-body { padding: 18px; }
  .video-box { border-radius: var(--radius); }
  .video-status { font-size: 14px; }
  .vid-ctrls, #btn-video { max-width: 420px; margin-left: auto; margin-right: auto; }

  /* Con más alto de pantalla entran más pasos antes de tener que bajar. */
  .proc { max-height: 66dvh; padding: 18px; }
  .rc { font-size: 13px; padding: 11px 12px; }
  .riesgo-cab .rc { font-size: 9.5px; }
  .paso-txt { font-size: 14.5px; }

  .hero { padding: 40px 8px 26px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 15.5px; }
  .q-txt { font-size: 15px; }
  .foto-box { max-height: 380px; width: 290px; margin-inline: auto; }
  #firma { height: 210px; }
}

/* ══ TOAST ══ */
#toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(90px);
  background:var(--b900); color:#fff; padding:13px 20px; border-radius:var(--radius);
  font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); z-index:300;
  max-width:90vw; text-align:center; transition:transform .25s ease; pointer-events:none;
}
#toast.on { transform:translateX(-50%) translateY(0); }

/* ══ PIE FIJO ══ */
/* safe-area-inset — en iPhone la barra de gestos se come el botón. */
.foot {
  position:fixed; left:0; right:0; bottom:0; background:var(--surf);
  border-top:1px solid var(--border); padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  z-index:60; display:none;
}
.foot.vis { display:block; }
.foot-in { max-width:520px; margin:0 auto; }