/* Sin scroll horizontal en ninguna pantalla (kiosco): lo que sobre se recorta, no se arrastra. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ==========================================================================
   BUG CRAFT · PANTALLAS 01, 02 y 03
   Composición de las pantallas de entrada sobre los componentes de componentes.css.
   ========================================================================== */

/* --- Base de las tres pantallas --- */
.pantalla-entrada {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: var(--e3);
  padding: calc(var(--e4) + env(safe-area-inset-top)) var(--e3) calc(var(--e3) + env(safe-area-inset-bottom));
}

/* ==========================================================================
   01 · INICIO
   ========================================================================== */
.inicio__marca { display: grid; justify-items: center; gap: var(--e1); text-align: center; }
.logotipo--dos { display: grid; line-height: .86; text-align: center; }
.logotipo--dos span { display: block; }

.chip--marca {
  background: var(--magenta); color: var(--blanco);
  font-family: var(--fuente-titulo); font-size: var(--t2); letter-spacing: .12em;
  text-shadow: 1px 1px 0 var(--ciruela); padding: 8px 18px;
}

.inicio__heroe { position: relative; display: grid; place-items: center; width: 100%; }
.inicio__halo { position: absolute; z-index: 0; width: min(88vw, 380px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 238, 160, .9) 0%, rgba(255, 238, 160, .35) 45%, rgba(255, 238, 160, 0) 70%); }
.inicio__heroe img { position: relative; z-index: 2; width: min(72vw, 300px); height: auto; margin-bottom: -18px; filter: drop-shadow(0 10px 14px rgba(30, 16, 51, .18)); }
.inicio__base { position: relative; z-index: 1; width: min(62vw, 250px); padding: 14px var(--e2) 16px; }
.inicio__base .placa__estuds { top: -18px; left: var(--e3); gap: var(--e3); }
.inicio__base .placa__estuds i { width: 34px; height: 34px; }
.inicio__escala { position: absolute; right: 2px; bottom: 104px; z-index: 3; font-size: var(--t1); padding: 4px 10px; }

/* cubos decorativos que flotan (interfaz, no ciencia) */
.cubo { position: absolute; width: 34px; height: 34px; opacity: .95; animation: cubo-flota 5.5s var(--curva-suave) infinite; }
.cubo--a { left: 6%; top: 22%; animation-delay: .4s; }
.cubo--b { right: 7%; top: 40%; width: 26px; height: 26px; animation-delay: 1.6s; }
@keyframes cubo-flota { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-12px) rotate(4deg); } }

/* ==========================================================================
   Cabecera con botón de volver (02 y 03)
   ========================================================================== */
.cabecera { display: flex; align-items: center; gap: var(--e2); width: 100%; }
.volver {
  display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto;
  background: var(--blanco); border: var(--borde); border-radius: var(--r2);
  box-shadow: var(--sombra-corta); cursor: pointer; padding: 0;
}
.volver:active { transform: translateY(4px); box-shadow: var(--sombra-pulsado); }
.volver:focus-visible { outline: 4px solid var(--turquesa); outline-offset: 3px; }
.cabecera__texto { display: grid; gap: 2px; min-width: 0; }
.cabecera__rotulo { font-size: var(--t1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-tenue); }
.cabecera__titulo { font-family: var(--fuente-titulo); font-size: var(--t5); line-height: 1.1; }

/* ==========================================================================
   02 · ACCESO
   ========================================================================== */
.acceso { align-content: start; }
.acceso .logotipo--dos { font-size: clamp(26px, 7vw, 34px); }
.icono-caja {
  display: grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto;
  border: var(--borde); border-radius: var(--r2); box-shadow: 0 3px 0 var(--ciruela);
}
.icono-caja--verde { background: var(--pasto); }
.icono-caja--magenta { background: var(--rosa); }
.tarjeta__cabecera { display: flex; align-items: center; gap: var(--e2); }
.tarjeta__texto--fuerte { color: var(--ciruela); }
.pie-legal { font-size: var(--t1); line-height: 18px; color: var(--tinta-suave); text-align: center; }
.pie-legal strong { color: var(--ciruela); }

/* ==========================================================================
   03 · CONFIRMAR CUENTA
   ========================================================================== */
.confirmar { align-content: start; }
.emblema { position: relative; display: grid; place-items: center; width: 108px; height: 108px; margin: var(--e1) auto 0; }
.emblema__aro {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--blanco); border: 8px solid var(--aro, #E3DEEB);
  box-shadow: 0 6px 0 rgba(30, 16, 51, .25), inset 0 0 0 3px var(--ciruela);
}

.emblema .icono { position: relative; width: 50px; height: 50px; }
.confirmar__datos { display: grid; justify-items: center; gap: var(--e1); }
.confirmar__usuario { font-family: var(--fuente-titulo); font-size: var(--t5); }
.formulario { display: grid; gap: var(--e3); width: 100%; }
.confirmar .formulario { gap: 12px; }   /* para que 03 entre en 812 px */
.confirmar { padding-top: calc(var(--e2) + env(safe-area-inset-top)); }
.confirmar .emblema { width: 96px; height: 96px; }
.confirmar .emblema .icono { width: 44px; height: 44px; }
.confirmar__datos { gap: 4px; }
.confirmar .campo input { height: 46px; }
.confirmar .placa { padding: 6px 6px 4px !important; }

/* ==========================================================================
   Avisos y estado
   ========================================================================== */
.aviso {
  display: none; align-items: center; gap: var(--e1);
  padding: 12px var(--e2); border: var(--borde); border-radius: var(--r2);
  background: var(--rosa); font-size: var(--t2); font-weight: 700;
}
.aviso[data-visible="si"] { display: flex; }
.aviso--error { background: var(--rosa); }
.cargando { opacity: .6; pointer-events: none; }

/* ==========================================================================
   Puente (el mapa llega en el siguiente paso)
   ========================================================================== */
.puente { display: grid; gap: var(--e3); width: 100%; }
.puente__dato { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e2); padding: var(--e1) 0; border-bottom: 2px dashed rgba(30, 16, 51, .15); }
.puente__dato:last-of-type { border-bottom: 0; }
.puente__clave { font-size: var(--t2); color: var(--tinta-suave); }
.puente__valor { font-family: var(--fuente-titulo); font-size: var(--t4); }

/* ==========================================================================
   Horizontal (812 × 375): las tres pantallas siguen siendo usables
   ========================================================================== */
@media (orientation: landscape) and (max-height: 480px) {
  .pantalla-entrada { grid-template-rows: auto 1fr; gap: var(--e2); padding-top: calc(var(--e2) + env(safe-area-inset-top)); }
  .inicio__heroe img { width: min(34vw, 180px); }
  .inicio__base { width: min(30vw, 150px); }
  .inicio .logotipo { font-size: clamp(24px, 6vh, 32px); }
  .acceso, .confirmar { align-content: start; }
  .acceso .logotipo--dos { font-size: 24px; }
  .emblema { width: 96px; height: 96px; }
  .emblema .icono { width: 46px; height: 46px; }
}

/* --- Ajustes finos para que 02 y 03 entren en 812 px de alto --- */
.logotipo--una { display: block; font-size: clamp(26px, 7vw, 32px); }
.acceso, .confirmar { gap: var(--e2); padding-top: calc(var(--e3) + env(safe-area-inset-top)); padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom)); }
.acceso .tarjeta, .confirmar .tarjeta { padding: var(--e2); }
.acceso .logotipo--una { margin-bottom: -4px; }

/* --- Horizontal 812 × 375: dos columnas para no cortar nada --- */
@media (orientation: landscape) and (max-height: 480px) {
  .pantalla-entrada { padding-top: calc(var(--e2) + env(safe-area-inset-top)); padding-bottom: calc(var(--e2) + env(safe-area-inset-bottom)); gap: var(--e2); }
  .cabecera { gap: var(--e2); }
  .volver { width: 48px; height: 48px; }

  .acceso .pila { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); align-items: start; width: 100%; }
  .acceso .pie-legal { grid-column: 1 / -1; font-size: 11px; line-height: 15px; }
  .acceso .tarjeta { padding: var(--e2); }
  .acceso .tarjeta__texto { font-size: var(--t1); line-height: 18px; }
  .acceso .icono-caja { width: 44px; height: 44px; }
  .acceso .campo input { height: 44px; }
  .acceso .logotipo--una { font-size: 22px; }
  .acceso { gap: var(--e1); }

  .confirmar .pila { display: grid; grid-template-columns: 0.68fr 1.32fr; gap: var(--e2); align-items: start; width: 100%; }
  .confirmar .pie-legal { grid-column: 1 / -1; font-size: 11px; }
  .confirmar .formulario { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); align-items: start; }
  .confirmar .formulario .aviso,
  .confirmar .formulario .boton { grid-column: 1 / -1; }
.confirmar .formulario .placa { grid-column: 1 / -1; }
  .confirmar .formulario .casilla { grid-column: auto; }
  .confirmar .formulario { gap: 12px var(--e2); }
  .confirmar .pie-legal { display: none; }
  .confirmar .pila { gap: var(--e2); }
  .confirmar .emblema { width: 76px; height: 76px; }
  .confirmar .emblema .icono { width: 36px; height: 36px; }
  .confirmar .campo input { height: 44px; }
  .confirmar__datos { justify-items: start; gap: 4px; }
  .confirmar__usuario { font-size: var(--t4); }
  .confirmar .cabecera__titulo { font-size: var(--t4); }
  .confirmar .emblema { width: 84px; height: 84px; }
  .confirmar .emblema .icono { width: 40px; height: 40px; }
}
/* --- 01 en horizontal: marca a la izquierda, héroe al centro, botón a la derecha --- */
@media (orientation: landscape) and (max-height: 480px) {
  .inicio { grid-template-columns: 0.95fr 1.15fr 0.9fr; grid-template-rows: 1fr; align-items: center; justify-items: center; gap: var(--e2); }
  .inicio__marca { justify-items: start; text-align: left; gap: 4px; }
  .inicio .logotipo { font-size: clamp(22px, 5.6vh, 30px); }
  .inicio__marca .chip--marca { font-size: 10px; padding: 5px 10px; letter-spacing: .08em; }
  .inicio__heroe img { width: min(26vw, 200px); margin-bottom: -10px; }
  .inicio__base { width: min(22vw, 170px); }
  .inicio__escala { bottom: 26px; font-size: 10px; padding: 3px 8px; }
  .inicio > .placa { width: 100%; max-width: 260px; }
  .inicio > .placa .boton { font-size: var(--t4); min-height: 56px; }
  .cubo--a { left: 2%; top: 8%; width: 22px; height: 22px; }
  .cubo--b { right: 36%; top: 10%; width: 18px; height: 18px; }
}/* En horizontal el campo de usuario comparte columna: no debe empujar el botón fuera. */
@media (orientation: landscape) and (max-height: 480px) and (max-width: 700px) {
  .acceso .pila { grid-template-columns: 1fr; }
}