/* ============================================================
   InteliBPO Visitantes — Kiosco (index.html)
   Diseño de dos zonas: panel de marca a la izquierda, tarea a la derecha.
   Se carga después de styles.css y redesign.css. Solo aplica con body.kiosk-body.
   Nota: app.js alterna `display` en línea en las pantallas; por eso el
   `display:grid` se declara con :not([style*="display: none"]):not([style*="display:none"]).
   ============================================================ */
.kiosk-body {
  /* Colores fijos de respaldo; se reemplazan por los de "Diseño y Kiosco" cuando existen */
  --k-ink: #0f2742;
  --k-ink-2: #33475f;
  --k-muted: #586b82;
  --k-line: #dfe5ec;
  --k-field: #c8d1dc;
  --k-ground: #f4f6f9;
  --k-blue: #2d5d9f;
  --k-blue-d: #24508a;
  --k-teal: #00767c;
  --k-aqua: #7fd1d5;
  --k-rail: 380px;

  background: var(--k-ground);
  background-image: none;
  color: var(--k-ink);
}

/* Marca configurable: app.js define --brand-blue-100 (primario), --brand-teal-100 (secundario) y --bg-depth-0 (fondo) */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .kiosk-body {
    --k-blue: var(--brand-blue-100, #2d5d9f);
    --k-blue-d: color-mix(in srgb, var(--k-blue) 84%, #000);
    --k-ink: color-mix(in srgb, var(--k-blue) 28%, #0a1626);
    --k-teal: color-mix(in srgb, var(--brand-teal-100, #009ba2) 78%, #000);
    --k-aqua: color-mix(in srgb, var(--brand-teal-100, #009ba2) 52%, #fff);
    --k-ground: var(--bg-depth-0, #f4f6f9);
  }
}

.kiosk-body header.main-header { display: none; }
.kiosk-body #app-container { max-width: none; margin: 0; min-height: 100vh; min-height: 100dvh; }
.kiosk-body #kiosk-view.view-panel { padding: 0; animation: none; }
.kiosk-body #kiosk-view.view-panel.active { display: flex; }
.kiosk-body #kiosk-view > section { width: 100%; max-width: none !important; margin: 0 !important; }

/* ——— Tarjeta base (formulario) sin adornos ——— */
.kiosk-body .glass-card::before { display: none; }
.kiosk-body .glass-card { box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; }

/* ============================================================
   1 · BIENVENIDA
   ============================================================ */
.kiosk-body #kiosk-welcome-screen:not([style*="display: none"]):not([style*="display:none"]) {
  display: grid !important;
  grid-template-columns: 460px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto auto;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
  text-align: left;
  align-items: stretch;
  justify-content: stretch;
  background: var(--k-ground);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.kiosk-body #kiosk-welcome-screen::before {   /* fondo del panel de marca */
  content: '';
  position: static;
  grid-column: 1;
  grid-row: 1 / -1;
  height: auto;
  background: var(--k-ink);
  z-index: 0;
}
.kiosk-body #kiosk-welcome-screen > div { position: relative; z-index: 1; opacity: 1; transform: none; animation: none; }

.kiosk-body #kiosk-block-logo { grid-column: 1; grid-row: 1; padding: 56px 52px 0; }
.kiosk-body #kiosk-welcome-logo {
  height: 56px !important; margin: 0 !important;
  filter: brightness(0) invert(1);
}
.kiosk-body #kiosk-block-title { grid-column: 1; grid-row: 2; align-self: end; padding: 0 52px; }
.kiosk-body #kiosk-block-subtitle { grid-column: 1; grid-row: 3; padding: 0 52px; }
.kiosk-body #kiosk-block-clock { grid-column: 1; grid-row: 4; padding: 40px 52px 56px; }

.kiosk-body .kiosk-welcome h2 {
  font-size: clamp(2.6rem, 4.6vw, 3.75rem);
  line-height: 1.05; font-weight: 800; letter-spacing: -0.04em;
  color: #ffffff; background: none; -webkit-text-fill-color: #ffffff;
  margin: 0;
}
.kiosk-body .kiosk-welcome p#kiosk-welcome-msg {
  color: #c3d0e0; font-size: 1.15rem; line-height: 1.55; font-weight: 400;
  max-width: 340px; margin: 20px 0 0;
}
.kiosk-body .kiosk-clock {
  display: inline-block; background: none; border: 0; box-shadow: none; padding: 0; margin: 0; border-radius: 0;
  font-size: 1.05rem; font-weight: 500; color: #9fb2c8; line-height: 1.5;
}

/* Acciones */
.kiosk-body #kiosk-block-actions { grid-column: 2; grid-row: 1 / 4; align-self: center; padding: 56px 64px 0; }
.kiosk-body .kiosk-actions { flex-direction: column; gap: 20px; max-width: 640px; width: 100%; }
.kiosk-body #kiosk-checkin-start-btn,
.kiosk-body #kiosk-checkout-start-btn {
  flex: none !important; width: 100%; min-height: 140px; padding: 28px 32px !important;
  justify-content: flex-start; gap: 24px; text-align: left; border-radius: 24px;
  font-size: 1rem !important; animation: none;
}
.kiosk-body #kiosk-checkin-start-btn { background: var(--k-blue); color: #fff; border: 0; box-shadow: 0 12px 28px -10px rgba(45, 93, 159, 0.55); }
.kiosk-body #kiosk-checkout-start-btn { background: #fff; color: var(--k-ink); border: 0; box-shadow: 0 0 0 1px var(--k-line); }
.kiosk-body #kiosk-checkin-start-btn > svg:first-child,
.kiosk-body #kiosk-checkout-start-btn > svg:first-child {
  box-sizing: content-box; width: 36px; height: 36px; padding: 18px; border-radius: 20px; flex: none;
}
.kiosk-body #kiosk-checkin-start-btn > svg:first-child { background: rgba(255, 255, 255, 0.16); }
.kiosk-body #kiosk-checkout-start-btn > svg:first-child { background: #e6f4f5; color: var(--k-teal); }
.kiosk-body .cta-text { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.kiosk-body .cta-title { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.kiosk-body .cta-sub { font-size: 1rem; font-weight: 500; opacity: 0.8; }
.kiosk-body .cta-arrow { flex: none; opacity: 0.7; }

@media (hover: hover) and (pointer: fine) {
  .kiosk-body #kiosk-checkin-start-btn:hover { background: var(--k-blue-d); }
  .kiosk-body #kiosk-checkout-start-btn:hover { background: #f7f9fb; box-shadow: 0 0 0 1px #c8d1dc; }
}

.kiosk-body #kiosk-block-privacy {
  grid-column: 2; grid-row: 4; align-self: end;
  margin: 0 !important; padding: 0 64px 56px !important; max-width: 760px !important;
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  font-size: 0.8rem !important; text-align: left !important; color: var(--k-muted) !important;
}
.kiosk-body #kiosk-habeas-title { display: inline !important; text-align: left !important; color: var(--k-ink) !important; margin: 0 !important; }
.kiosk-body #kiosk-habeas-title::after { content: ' '; }

/* ============================================================
   2 · FORMULARIO POR PASOS
   ============================================================ */
.kiosk-body #kiosk-form-screen:not([style*="display: none"]):not([style*="display:none"]) {
  display: grid !important;
  grid-template-columns: var(--k-rail) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  animation: none;
}

/* Panel lateral con los pasos */
.kiosk-body .step-indicator {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  max-width: none; margin: 0; padding: 48px 44px;
  background: var(--k-ink); position: relative;
}
.kiosk-body .step-indicator::before { display: none; }
.kiosk-body .step-indicator-bar { display: none; }
.kiosk-body .rail-brand { position: absolute; top: 48px; left: 44px; }
.kiosk-body .rail-brand img { height: 34px; filter: brightness(0) invert(1); display: block; }
.kiosk-body .rail-help { position: absolute; bottom: 48px; left: 44px; right: 44px; font-size: 0.8rem; line-height: 1.5; color: #7e93ab; }

.kiosk-body .step-dot {
  position: relative; flex: none;
  width: 40px; height: 40px; margin-bottom: 44px;
  background: transparent; border: 2px solid #2f4a68; color: #7e93ab;
  font-size: 1rem; font-weight: 700;
}
.kiosk-body .step-dot:last-of-type { margin-bottom: 0; }
.kiosk-body .step-dot::before {            /* conector con el siguiente paso */
  content: ''; position: absolute; left: 17px; top: 42px; width: 2px; height: 44px; background: #2f4a68;
  transition: background-color 240ms ease;
}
.kiosk-body .step-dot:last-of-type::before { display: none; }
.kiosk-body .step-dot::after {              /* etiqueta */
  content: attr(data-label); position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: 1.1rem; font-weight: 600; color: #9fb2c8;
  font-family: var(--font-display);
}
.kiosk-body .step-dot.active { background: #fff; border-color: #fff; color: var(--k-ink); box-shadow: none; transform: none; }
.kiosk-body .step-dot.active::after { color: #fff; font-weight: 700; }
.kiosk-body .step-dot.completed {
  background: var(--k-aqua) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2742' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 20px no-repeat;
  border-color: var(--k-aqua); font-size: 0; color: transparent;
}
.kiosk-body .step-dot.completed::before { background: var(--k-aqua); }
.kiosk-body .step-dot.completed::after { color: #c3d0e0; font-weight: 600; }

/* Zona de formulario */
.kiosk-body #registration-form {
  grid-column: 2; grid-row: 1;
  display: flex; flex-direction: column; padding: 56px 72px; min-width: 0;
}
.kiosk-body .form-step.active { display: flex; flex-direction: column; flex: 1; animation: stepIn 240ms var(--ease-out) both; }
.kiosk-body .form-step h3 {
  font-size: 2.1rem !important; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
  color: var(--k-ink); margin-bottom: 2rem !important;
}
.kiosk-body .form-grid { gap: 24px 20px; }

.kiosk-body label {
  font-size: 0.9rem; font-weight: 600; color: var(--k-ink-2); text-transform: none; letter-spacing: 0;
}
.kiosk-body input:not([type="radio"]):not([type="checkbox"]),
.kiosk-body .ui-select-trigger {
  min-height: 60px; font-size: 1.125rem; border-radius: 14px; padding-inline: 18px; border-color: var(--k-field);
}
.kiosk-body input:focus, .kiosk-body .ui-select-trigger:focus-visible, .kiosk-body .ui-select-trigger[aria-expanded="true"] {
  border-color: var(--k-blue); box-shadow: 0 0 0 4px rgba(45, 93, 159, 0.14);
}
.kiosk-body .ui-select-trigger { padding-right: 14px; }

/* Equipo tecnológico: radios grandes y con color de marca */
.kiosk-body input[type="radio"] { width: 24px !important; height: 24px; accent-color: var(--k-blue); }
.kiosk-body #fg-std_equip label[style*="cursor:pointer"] { font-size: 1.1rem !important; font-weight: 500 !important; min-height: 44px; }
.kiosk-body #fg-std_equip label:first-child { font-size: 1rem; }
.kiosk-body #equipment-details-container { border-left-color: var(--k-blue) !important; }

/* Botones */
.kiosk-body .btn { min-height: 60px; padding: 0 2rem; font-size: 1.1rem; border-radius: 16px; box-shadow: none; }
.kiosk-body .btn-primary { background: var(--k-blue); box-shadow: 0 8px 20px -8px rgba(45, 93, 159, 0.6); }
.kiosk-body .btn-success { background: var(--k-teal); box-shadow: 0 8px 20px -8px rgba(0, 118, 124, 0.6); }
.kiosk-body .btn-secondary { background: #fff; color: var(--k-ink-2); box-shadow: 0 0 0 1px var(--k-line); border: 0; }
@media (hover: hover) and (pointer: fine) {
  .kiosk-body .btn-primary:hover { background: var(--k-blue-d); }
  .kiosk-body .btn-success:hover { background: #00676c; }
  .kiosk-body .btn-secondary:hover { background: #f7f9fb; box-shadow: 0 0 0 1px #c8d1dc; }
}
.kiosk-body .form-nav-buttons { margin-top: auto; padding-top: 2rem; }

/* Foto y firma */
.kiosk-body .media-setup-row { gap: 24px; }
.kiosk-body .media-box { background: transparent; box-shadow: none; padding: 0; align-items: stretch; gap: 12px; border-radius: 0; }
.kiosk-body .media-box > label { text-align: left !important; margin: 0 !important; }
.kiosk-body .camera-preview-container,
.kiosk-body .signature-canvas-container { height: 260px; border-radius: 20px; }
.kiosk-body .signature-canvas-container { box-shadow: 0 0 0 1px var(--k-field); border: 0; }
.kiosk-body .media-actions { display: flex; gap: 12px; }
.kiosk-body .media-actions .btn { flex: 1; padding: 0 1rem; }
.kiosk-body #form-step-3 > div[style*="Habeas"],
.kiosk-body #form-step-3 > div:not(.media-setup-row):not(.form-nav-buttons) {
  background: none !important; border: 0 !important; padding: 0 !important; font-size: 0.8rem !important; color: var(--k-muted) !important;
}
.kiosk-body #form-step-3 > div:not(.media-setup-row):not(.form-nav-buttons) strong { color: var(--k-ink) !important; }

/* ============================================================
   3 · ÉXITO Y CARNET
   ============================================================ */
.kiosk-body #kiosk-success-screen:not([style*="display: none"]):not([style*="display:none"]) {
  display: grid !important;
  grid-template-columns: 520px minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: 0;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: left !important;
  animation: none;
  background: var(--k-ground);
}
.kiosk-body #kiosk-success-screen::before {
  content: ''; grid-column: 1; grid-row: 1 / -1; background: var(--k-ink);
}
.kiosk-body #kiosk-success-screen > * { position: relative; z-index: 1; }
.kiosk-body #kiosk-success-screen > div:first-child {   /* icono de check */
  grid-column: 1; grid-row: 2; margin: 0 0 28px 56px !important;
  width: 72px !important; height: 72px !important;
  background: var(--k-aqua) !important; border: 0 !important; color: var(--k-ink) !important;
}
.kiosk-body #kiosk-success-screen > h2 {
  grid-column: 1; grid-row: 3; margin: 0 56px 0 56px !important;
  font-size: 3rem !important; line-height: 1.08; font-weight: 800; letter-spacing: -0.04em; color: #fff;
}
.kiosk-body #kiosk-success-screen > p {
  grid-column: 1; grid-row: 4; margin: 18px 56px 0 !important;
  font-size: 1.15rem !important; line-height: 1.55; color: #c3d0e0 !important;
}
.kiosk-body #kiosk-badge-holder { grid-column: 2; grid-row: 2 / 4; align-self: end; justify-self: center; margin: 0 !important; padding: 0 32px; width: 100%; }
.kiosk-body #kiosk-success-screen > div:last-child {
  grid-column: 2; grid-row: 4; align-self: start; justify-self: center;
  width: 100%; max-width: 440px !important; margin: 32px 0 0 !important;
}
.kiosk-body #kiosk-success-screen .btn { min-height: 60px; }
.kiosk-body #btn-finish-kiosk { flex: 1; }

/* ============================================================
   RESPONSIVE: tablet vertical y móvil
   ============================================================ */
@media (max-width: 900px) {
  .kiosk-body #kiosk-welcome-screen:not([style*="display: none"]):not([style*="display:none"]) {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto;
  }
  .kiosk-body #kiosk-welcome-screen::before { display: none; }
  .kiosk-body #kiosk-block-logo, .kiosk-body #kiosk-block-title,
  .kiosk-body #kiosk-block-subtitle, .kiosk-body #kiosk-block-clock { background: var(--k-ink); }
  .kiosk-body #kiosk-welcome-screen > div,
  .kiosk-body #kiosk-block-actions, .kiosk-body #kiosk-block-privacy { grid-column: 1 !important; grid-row: auto !important; }
  .kiosk-body #kiosk-block-logo { padding: 32px 24px 0; }
  .kiosk-body #kiosk-block-title { padding: 40px 24px 0; }
  .kiosk-body #kiosk-block-subtitle { padding: 0 24px; }
  .kiosk-body #kiosk-block-clock { padding: 24px 24px 40px; }
  /* El fondo oscuro solo cubre las 4 primeras filas; acciones y aviso quedan sobre fondo claro */
  .kiosk-body #kiosk-block-actions { padding: 32px 24px 0; align-self: auto; }
  .kiosk-body #kiosk-block-privacy { padding: 24px 24px 32px !important; }
  .kiosk-body #kiosk-checkin-start-btn, .kiosk-body #kiosk-checkout-start-btn { min-height: 112px; padding: 20px !important; gap: 16px; }
  .kiosk-body .cta-title { font-size: 1.5rem; }

  .kiosk-body #kiosk-form-screen:not([style*="display: none"]):not([style*="display:none"]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .kiosk-body .step-indicator { grid-column: 1; flex-direction: row; justify-content: center; gap: 12px; padding: 20px 16px; align-items: center; }
  .kiosk-body .rail-brand, .kiosk-body .rail-help, .kiosk-body .step-dot::before, .kiosk-body .step-dot::after { display: none; }
  .kiosk-body .step-dot { margin: 0; }
  .kiosk-body #registration-form { grid-column: 1; grid-row: 2; padding: 28px 20px 24px; }
  .kiosk-body .form-step h3 { font-size: 1.6rem !important; }
  .kiosk-body .form-group { grid-column: span 12; }
  .kiosk-body .media-setup-row { flex-direction: column; }

  .kiosk-body #kiosk-success-screen:not([style*="display: none"]):not([style*="display:none"]) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-bottom: 32px; }
  .kiosk-body #kiosk-success-screen::before { display: none; }
  .kiosk-body #kiosk-success-screen > h2 { color: var(--k-ink); }
  .kiosk-body #kiosk-success-screen > p { color: var(--k-muted) !important; }
  .kiosk-body #kiosk-success-screen .btn { padding: 0 1rem; white-space: nowrap; }
  .kiosk-body #kiosk-success-screen > * { grid-column: 1 !important; grid-row: auto !important; }
  .kiosk-body #kiosk-success-screen > div:first-child { margin: 40px 0 20px 24px !important; }
  .kiosk-body #kiosk-success-screen > h2 { margin: 0 24px !important; font-size: 2.2rem !important; }
  .kiosk-body #kiosk-success-screen > p { margin: 14px 24px 36px !important; }
  .kiosk-body #kiosk-badge-holder { padding: 0 16px; margin-top: 24px !important; }
  .kiosk-body #kiosk-success-screen > div:last-child { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .kiosk-body .form-step.active { animation-name: fadeIn; }
}


/* ============================================================
   PANTALLAS GRANDES (PC, TV): el panel escala y el contenido se centra
   ============================================================ */
.kiosk-body { --k-rail: clamp(380px, 23vw, 460px); --k-hero: clamp(460px, 27vw, 600px); }

.kiosk-body #kiosk-welcome-screen:not([style*="display: none"]):not([style*="display:none"]) { grid-template-columns: var(--k-hero) minmax(0, 1fr); }
.kiosk-body .kiosk-welcome h2 { font-size: clamp(2.6rem, 3.4vw, 4.4rem); }
.kiosk-body .kiosk-welcome p#kiosk-welcome-msg { font-size: clamp(1.15rem, 1.1vw, 1.35rem); max-width: 380px; }

/* Brillos suaves de marca en los paneles oscuros (no son degradados de fondo completos) */
.kiosk-body #kiosk-welcome-screen::before,
.kiosk-body .step-indicator,
.kiosk-body #kiosk-success-screen::before {
  background:
    radial-gradient(120% 60% at 100% 100%, rgba(127, 209, 213, 0.13) 0%, transparent 60%),
    radial-gradient(90% 50% at 0% 0%, rgba(45, 93, 159, 0.30) 0%, transparent 60%),
    var(--k-ink);
}

/* Acciones centradas con ancho máximo */
.kiosk-body #kiosk-block-actions { justify-self: center; width: 100%; max-width: 860px; padding: 56px clamp(32px, 4vw, 72px) 0; box-sizing: border-box; }
.kiosk-body .kiosk-actions { max-width: none; }
.kiosk-body #kiosk-checkin-start-btn,
.kiosk-body #kiosk-checkout-start-btn { min-height: clamp(140px, 17vh, 180px); }
.kiosk-body .cta-title { font-size: clamp(1.9rem, 2vw, 2.3rem); }
.kiosk-body .cta-sub { font-size: clamp(1rem, 0.95vw, 1.15rem); }

/* Indicaciones previas */
.kiosk-body .kiosk-hints {
  list-style: none; margin: 36px 0 0; padding: 28px 0 0; border-top: 1px solid var(--k-line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.kiosk-body .kiosk-hints li { display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; line-height: 1.45; font-weight: 500; color: var(--k-ink-2); }
.kiosk-body .kiosk-hints svg { color: var(--k-blue); flex: none; }

.kiosk-body #kiosk-block-privacy { justify-self: center; width: 100%; max-width: 860px !important; box-sizing: border-box; padding: 0 clamp(32px, 4vw, 72px) 48px !important; }

/* Formulario: columna centrada de ancho cómodo */
.kiosk-body #registration-form { align-items: center; justify-content: center; padding: 48px clamp(32px, 5vw, 96px); }
.kiosk-body .form-step.active { flex: none; width: 100%; max-width: 800px; }
.kiosk-body .form-nav-buttons { margin-top: 0; padding-top: 2.5rem; }
.kiosk-body .form-step h3 { font-size: clamp(1.9rem, 2.1vw, 2.4rem) !important; }
.kiosk-body .step-dot::after { font-size: clamp(1.1rem, 1vw, 1.25rem); }

@media (max-width: 900px) {
  .kiosk-body #kiosk-welcome-screen:not([style*="display: none"]):not([style*="display:none"]) { grid-template-columns: minmax(0, 1fr); }
  .kiosk-body #kiosk-block-actions { padding: 32px 24px 0; }
  .kiosk-body #kiosk-block-privacy { padding: 28px 24px 32px !important; }
  .kiosk-body .kiosk-hints { grid-template-columns: 1fr; gap: 14px; margin-top: 24px; padding-top: 20px; }
  .kiosk-body .kiosk-hints li { flex-direction: row; align-items: center; }
  .kiosk-body #kiosk-block-actions, .kiosk-body #kiosk-block-privacy { max-width: none; }
  .kiosk-body #registration-form { align-items: stretch; justify-content: flex-start; padding: 28px 20px 24px; }
  .kiosk-body .form-step.active { max-width: none; }
}


/* ============================================================
   MÓVIL: menos texto en la bienvenida
   ============================================================ */
.kiosk-body .privacy-details summary { list-style: none; cursor: default; display: inline; }
.kiosk-body .privacy-details summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .kiosk-body .kiosk-hints { display: none; }

  /* Encabezado compacto: una frase corta y la fecha en una línea */
  .kiosk-body #kiosk-block-logo { padding: 24px 24px 0; }
  .kiosk-body #kiosk-welcome-logo { height: 44px !important; }
  .kiosk-body #kiosk-block-title { padding: 28px 24px 0; }
  .kiosk-body .kiosk-welcome h2 { font-size: 2.4rem; }
  .kiosk-body .kiosk-welcome p#kiosk-welcome-msg {
    font-size: 1rem; line-height: 1.45; margin-top: 10px; max-width: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .kiosk-body #kiosk-block-clock { padding: 14px 24px 28px; }
  .kiosk-body .kiosk-clock { font-size: 0.85rem; }

  /* Tarjetas más compactas: solo el título; la descripción se oculta */
  .kiosk-body #kiosk-block-actions { padding: 24px 20px 0; }
  .kiosk-body .kiosk-actions { gap: 14px; }
  .kiosk-body #kiosk-checkin-start-btn, .kiosk-body #kiosk-checkout-start-btn { min-height: 92px; padding: 16px 20px !important; gap: 16px; }
  .kiosk-body #kiosk-checkin-start-btn > svg:first-child, .kiosk-body #kiosk-checkout-start-btn > svg:first-child { width: 28px; height: 28px; padding: 14px; border-radius: 16px; }
  .kiosk-body .cta-title { font-size: 1.35rem; }
  .kiosk-body .cta-sub { display: none; }

  /* Aviso de privacidad plegado: una línea que se abre al tocar */
  .kiosk-body #kiosk-block-privacy { padding: 20px 20px 28px !important; font-size: 0.78rem !important; }
  .kiosk-body .privacy-details summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; }
  .kiosk-body .privacy-details summary::after { content: ''; width: 18px; height: 18px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23586b82' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transition: transform 180ms var(--ease-out); }
  .kiosk-body .privacy-details[open] summary::after { transform: rotate(180deg); }
  .kiosk-body .privacy-details #kiosk-habeas-body { display: block; padding-bottom: 8px; line-height: 1.5; }
}

@media (max-width: 900px) {
  /* Filas explícitas: el encabezado azul queda continuo y el aviso se asienta abajo */
  .kiosk-body #kiosk-welcome-screen:not([style*="display: none"]):not([style*="display:none"]) {
    grid-template-rows: auto auto auto auto auto 1fr; align-content: start;
  }
  .kiosk-body #kiosk-block-logo { grid-row: 1 !important; }
  .kiosk-body #kiosk-block-title { grid-row: 2 !important; align-self: auto; }
  .kiosk-body #kiosk-block-subtitle { grid-row: 3 !important; }
  .kiosk-body #kiosk-block-clock { grid-row: 4 !important; }
  .kiosk-body #kiosk-block-actions { grid-row: 5 !important; align-self: start; }
  .kiosk-body #kiosk-block-privacy { grid-row: 6 !important; align-self: end; }
}

/* ——— Volver al inicio desde el formulario ——— */
.kiosk-body .rail-home {
  position: absolute; left: 44px; bottom: 96px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 18px 0 12px; border: 0; border-radius: 99px;
  background: rgba(255, 255, 255, 0.10); color: #ffffff; cursor: pointer;
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 600;
  transition: background-color 160ms ease, transform 140ms var(--ease-out);
  touch-action: manipulation;
}
.kiosk-body .rail-home:active { transform: scale(0.97); }
.kiosk-body .rail-home:focus-visible { outline: 2px solid var(--k-aqua); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .kiosk-body .rail-home:hover { background: rgba(255, 255, 255, 0.18); } }

@media (max-width: 900px) {
  .kiosk-body .step-indicator { position: relative; padding: 14px 16px; min-height: 76px; }
  .kiosk-body .rail-home { display: inline-flex; left: 12px; bottom: auto; top: 50%; transform: translateY(-50%); padding: 0; width: 44px; justify-content: center; }
  .kiosk-body .rail-home:active { transform: translateY(-50%) scale(0.95); }
  .kiosk-body .rail-home span { display: none; }
}

@media (max-width: 900px) {
  .kiosk-body .form-nav-buttons { gap: 12px; }
  .kiosk-body .form-nav-buttons .btn { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; }
}

/* ——— Diálogo de confirmación ——— */
.kiosk-body .confirm-dialog { max-width: 440px; border-radius: 24px; }
.kiosk-body .confirm-dialog::before { display: none; }
.kiosk-body .confirm-body { padding: 32px 28px 28px !important; text-align: center; display: flex; flex-direction: column; align-items: center; }
.kiosk-body .confirm-icon {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #fdf1dc; color: #8a5a00; margin-bottom: 20px;
}
.kiosk-body .confirm-body h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--k-ink); margin: 0; }
.kiosk-body .confirm-body p { font-size: 1.02rem; line-height: 1.5; color: var(--k-muted); margin: 10px 0 26px; max-width: 320px; }
.kiosk-body .confirm-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kiosk-body .confirm-actions .btn { width: 100%; }
.kiosk-body .btn-danger { background: #c2362b; box-shadow: 0 8px 20px -8px rgba(194, 54, 43, 0.55); }
@media (hover: hover) and (pointer: fine) { .kiosk-body .btn-danger:hover { background: #a82d23; } }
@media (max-width: 640px) {
  .kiosk-body #cancel-modal { align-items: flex-end !important; padding: 0 !important; }
  .kiosk-body #cancel-modal .modal-container { margin: 0 !important; max-width: none !important; width: 100% !important; border-radius: 24px 24px 0 0; }
}

/* ——— Logos: más grandes y legibles sobre el panel oscuro ——— */
.kiosk-body #kiosk-welcome-logo { height: clamp(76px, 7.5vh, 96px) !important; }
.kiosk-body .rail-brand img { height: 42px; }
@media (max-width: 900px) {
  .kiosk-body #kiosk-welcome-logo { height: 60px !important; }
  .kiosk-body #kiosk-block-logo { padding: 20px 24px 0; }
}

/* ——— Logo del panel de inicio: horizontal (nombre legible) ——— */
.kiosk-body #kiosk-welcome-logo { display: none; }
.kiosk-body .hero-logo {
  display: block; height: clamp(52px, 5.5vh, 72px); width: auto; max-width: 100%;
  object-fit: contain; filter: brightness(0) invert(1); margin: 0;
}
@media (max-width: 900px) { .kiosk-body .hero-logo { height: 44px; } }

.kiosk-body .hero-logo { height: clamp(56px, 6.2vh, 80px); }
@media (max-width: 900px) {
  .kiosk-body .hero-logo { height: 46px; }
  .kiosk-body #kiosk-block-title { padding-top: 40px; }
}