/* =====================================================================
   SkyPulse -- estilos de auth
   ===================================================================== */

/* =====================================================================
   SkyPulse — Hoja de estilos general
   =====================================================================
   Índice:
     1.  Reset y base
     2.  Formularios (login / registro)
     3.  Dashboard / navbar
     4.  Secciones de página (scroll suave)
     5.  Hero (dashboard)
     6.  Search card
     7.  Ofertas y descuentos
     8.  Encabezados de sección compartidos
     9.  Destinos populares
     10. La experiencia SkyPulse
     11. Mi cuenta
     12. Fondo naturaleza (login / registro)
     13. Tarjeta de vuelo base (resultados)
     14. Panel de administrador
     15. Footer
     16. Resultados de búsqueda
     20. Completa tu viaje (inicio)
     21. Página de Hoteles
     22. Botón "fancy" (Volver al inicio, hoteles)
   ===================================================================== */

/* ===== 1. Reset y base ===== */

:root {
  /* Colores de marca */
  --color-primary: #2E6DA4;
  --color-accent-blue: #2563EB;
  --color-sky: #C9DFF2;
  --color-light-blue: #6FA8DC;
  --color-muted-blue: #9FB4CC;

  /* Texto */
  --color-text: #222;
  --color-text-dark: #22303D;
  --color-text-muted: #5B6B78;

  /* Neutros */
  --color-white: #fff;
  --color-black: #000;
  --color-border: #E2E5E9;

  /* Estado */
  --color-success: #1D8A6C;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 76px;
}

body {
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #F7EBCB 0%, var(--color-sky) 100%);
  color: var(--color-text);
  min-height: 100vh;
  position: relative;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

header .logo {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-accent-blue);
  color: var(--color-white);
}
.btn-primary:hover {
  background: #1D4ED8;
}

/* ===== 2. Formularios (login / registro) ===== */
.form-wrap {
  max-width: 380px;
  margin: 60px auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 32px;
  position: relative;
  z-index: 1;
}

.form-wrap h1 {
  font-size: 22px;
  margin-bottom: 6px;
}

.form-wrap p.sub {
  color: #666;
  font-size: 13px;
  margin-bottom: 20px;
}

.field {
  margin-bottom: 16px;
}

.field-input-wrap {
  position: relative;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1;
}

.field input,
.field select {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D4B58' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

.field select:required:invalid {
  color: var(--color-text-muted);
}

/* Efecto de partículas para inputs "normales" (número de documento,
   dirección, teléfono): mismo efecto que los campos de nombre/correo,
   reutilizando la animación email-particle-float. No se usa en los
   campos de contraseña. */
.field-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  top: 22px;
  left: 16px;
  filter: blur(0.6px);
  z-index: 0;
}

.field-input-wrap input:focus ~ .field-particle,
.phone-number-input:focus ~ .field-particle {
  animation: email-particle-float 1.4s ease-out;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

/* Etiqueta del campo de correo (fila junto a "País"): mismo estilo
   que un label normal de .field, para que ambos queden alineados
   y siempre visibles, escriba o no el usuario. */
.field-label-spacer {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
  line-height: 1;
}

/* ----- Campo de correo con etiqueta flotante (login / registro) ----- */
/* Adaptado de un componente de Uiverse.io por risabbir, con los colores
   de marca de SkyPulse en vez de la paleta morada original y sin la
   parte de newsletter/suscripción (botón, mensaje de éxito, etc). */

.email-field {
  position: relative;
  margin-bottom: 16px;
}

.email-input {
  width: 100%;
  height: 48px;
  padding: 0 12px 0 40px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease-out;
}

.email-label {
  position: absolute;
  left: 40px;
  top: 13px;
  font-size: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: all 0.3s ease-out;
}

.email-input:focus,
.email-input:not(:placeholder-shown) {
  border-color: var(--color-accent-blue);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.email-input:focus ~ .email-label,
.email-input:not(:placeholder-shown) ~ .email-label {
  top: 4px;
  font-size: 11px;
  color: var(--color-primary);
}

.email-icon {
  position: absolute;
  top: 15px;
  left: 12px;
  width: 18px;
  height: 18px;
  fill: var(--color-text-muted);
  pointer-events: none;
  transition: fill 0.3s ease-out;
}

.email-input:focus ~ .email-icon,
.email-input:not(:placeholder-shown) ~ .email-icon {
  fill: var(--color-accent-blue);
}

.email-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  top: 22px;
  left: 16px;
  filter: blur(0.6px);
  z-index: 0;
}

.email-input:focus ~ .email-particle {
  animation: email-particle-float 1.4s ease-out;
}

@keyframes email-particle-float {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
    background: var(--color-accent-blue);
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translate(120px, -18px) scale(1.1);
    opacity: 0;
    background: var(--color-light-blue);
  }
}

/* ----- Campo de nombre con etiqueta flotante (registro) ----- */
/* Mismo efecto que el campo de correo, con el ícono de usuario en vez
   del de sobre (ícono adaptado de un componente de Uiverse.io por
   RashadGhzi, con los colores de marca de SkyPulse). */

.name-field {
  position: relative;
  margin-bottom: 16px;
}

.name-input {
  width: 100%;
  min-height: 48px;
  padding: 18px 12px 8px 40px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  box-sizing: border-box;
  transition: all 0.3s ease-out;
}

.name-label {
  position: absolute;
  left: 40px;
  top: 13px;
  font-size: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: all 0.3s ease-out;
}

.name-input:focus,
.name-input:not(:placeholder-shown) {
  border-color: var(--color-accent-blue);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

.name-input:focus ~ .name-label,
.name-input:not(:placeholder-shown) ~ .name-label {
  top: 4px;
  font-size: 11px;
  color: var(--color-primary);
}

.name-icon {
  position: absolute;
  top: 13px;
  left: 12px;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
  transition: color 0.3s ease-out;
}

.name-input:focus ~ .name-icon,
.name-input:not(:placeholder-shown) ~ .name-icon {
  color: var(--color-accent-blue);
}

.name-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  top: 22px;
  left: 16px;
  filter: blur(0.6px);
  z-index: 0;
}

.name-input:focus ~ .name-particle {
  animation: name-particle-float 1.4s ease-out;
}

@keyframes name-particle-float {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
    background: var(--color-accent-blue);
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translate(120px, -18px) scale(1.1);
    opacity: 0;
    background: var(--color-light-blue);
  }
}

/* ----- Campo de teléfono con selector de código de país ----- */
/* Adaptado de un componente de Uiverse.io por Cksunandh, con los colores
   de marca de SkyPulse (fondo claro) en vez de la paleta gris oscura
   original, y Colombia (+57) como país predeterminado. */

.phone-field {
  margin-bottom: 16px;
}

.phone-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--color-text);
}

.phone-field-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.phone-code-wrap {
  position: relative;
  flex: 0 0 auto;
  width: 110px;
}

.phone-code-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  background: #F3F6F9;
  font-size: 14px;
  font-family: inherit;
  letter-spacing: 0.02em;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-code-toggle:hover {
  background: #EAF0F5;
}

.phone-code-wrap.open .phone-code-toggle,
.phone-code-toggle:focus-visible {
  border-color: var(--color-accent-blue);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
  outline: none;
}

.phone-code-arrow {
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.phone-code-wrap.open .phone-code-arrow {
  transform: rotate(180deg);
}

.phone-code-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 140px;
  max-height: 168px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 16px 32px -8px rgba(31, 41, 55, 0.25);
  scrollbar-width: thin;
  scrollbar-color: #C7D2E0 transparent;
}

.phone-code-list::-webkit-scrollbar {
  width: 6px;
}

.phone-code-list::-webkit-scrollbar-thumb {
  background: #C7D2E0;
  border-radius: 999px;
}

.phone-code-list[hidden] {
  display: none;
}

.phone-code-list li {
  padding: 8px 10px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--color-text);
  border-radius: 6px;
  cursor: pointer;
}

.phone-code-list li:hover {
  background: #EAF3FC;
}

.phone-code-list li.selected {
  background: #EAF3FC;
  color: var(--color-primary);
  font-weight: 600;
}

.phone-number-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.phone-number-input {
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.phone-number-input:focus {
  border-color: var(--color-accent-blue);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}



/* ----- Campo de contraseña con borde animado + botón mostrar/ocultar ----- */
/* Adaptado de un componente de Uiverse.io por Pankaj-Meharchandani, con los
   colores de marca de SkyPulse en vez de la paleta café/coral original.
   Se quitó el ícono de lupa (era una barra de búsqueda) y el botón de la
   derecha ahora es funcional: muestra/oculta la contraseña. */

#poda,
.pw-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pw-white,
.pw-border,
.pw-darkBorderBg,
.pw-glow {
  max-height: 70px;
  max-width: 100%;
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: hidden;
  z-index: 0;
  border-radius: 10px;
  filter: blur(3px);
}

#main,
.pw-main {
  position: relative;
  width: 100%;
}

.pw-input {
  background-color: var(--color-white);
  color: var(--color-text);
  border: none;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  padding: 0 46px 0 14px;
  font-size: 14px;
  font-family: inherit;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.pw-input::placeholder {
  color: var(--color-text-muted);
}

.pw-input:focus {
  outline: none;
}

.pw-white {
  max-height: 63px;
  border-radius: 9px;
  filter: blur(2px);
}

.pw-white::before {
  content: "";
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(83deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.3);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0) 0%,
    var(--color-light-blue),
    rgba(0, 0, 0, 0) 8%,
    rgba(0, 0, 0, 0) 50%,
    var(--color-accent-blue),
    rgba(0, 0, 0, 0) 58%
  );
  transition: all 2s;
}

.pw-border {
  max-height: 59px;
  border-radius: 10px;
  filter: blur(0.5px);
}

.pw-border::before {
  content: "";
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(70deg);
  position: absolute;
  width: 600px;
  height: 600px;
  filter: brightness(1.2);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    var(--color-text-dark),
    var(--color-primary) 5%,
    var(--color-text-dark) 14%,
    var(--color-text-dark) 50%,
    var(--color-accent-blue) 60%,
    var(--color-text-dark) 64%
  );
  transition: all 2s;
}

.pw-darkBorderBg::before {
  content: "";
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(82deg);
  position: absolute;
  width: 600px;
  height: 600px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    var(--color-text-dark),
    rgba(0, 0, 0, 0) 10%,
    rgba(0, 0, 0, 0) 50%,
    var(--color-accent-blue),
    rgba(0, 0, 0, 0) 60%
  );
  transition: all 2s;
}

#poda:hover > .pw-darkBorderBg::before,
.pw-wrap:hover > .pw-darkBorderBg::before,
#poda:focus-within > .pw-darkBorderBg::before,
.pw-wrap:focus-within > .pw-darkBorderBg::before {
  transform: translate(-50%, -50%) rotate(262deg);
  transition: all 4s;
}

#poda:hover > .pw-glow::before,
.pw-wrap:hover > .pw-glow::before,
#poda:focus-within > .pw-glow::before,
.pw-wrap:focus-within > .pw-glow::before {
  transform: translate(-50%, -50%) rotate(240deg);
  transition: all 4s;
}

#poda:hover > .pw-white::before,
.pw-wrap:hover > .pw-white::before,
#poda:focus-within > .pw-white::before,
.pw-wrap:focus-within > .pw-white::before {
  transform: translate(-50%, -50%) rotate(263deg);
  transition: all 4s;
}

#poda:hover > .pw-border::before,
.pw-wrap:hover > .pw-border::before,
#poda:focus-within > .pw-border::before,
.pw-wrap:focus-within > .pw-border::before {
  transform: translate(-50%, -50%) rotate(250deg);
  transition: all 4s;
}

.pw-glow {
  overflow: hidden;
  filter: blur(26px);
  opacity: 0.35;
  max-height: 90px;
}

.pw-glow::before {
  content: "";
  z-index: -2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  position: absolute;
  width: 999px;
  height: 999px;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: conic-gradient(
    var(--color-text-dark),
    var(--color-primary) 5%,
    var(--color-text-dark) 38%,
    var(--color-text-dark) 50%,
    var(--color-accent-blue) 60%,
    var(--color-text-dark) 87%
  );
  transition: all 2s;
}

.pw-filterBorder {
  height: 38px;
  width: 38px;
  position: absolute;
  overflow: hidden;
  top: 5px;
  right: 5px;
  border-radius: 9px;
  z-index: 1;
}

.pw-filterBorder::before {
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  position: absolute;
  width: 400px;
  height: 400px;
  background-repeat: no-repeat;
  background-position: 0 0;
  filter: brightness(1.3);
  background-image: conic-gradient(
    rgba(0, 0, 0, 0),
    var(--color-accent-blue),
    rgba(0, 0, 0, 0) 50%,
    rgba(0, 0, 0, 0) 50%,
    var(--color-accent-blue),
    rgba(0, 0, 0, 0) 100%
  );
  animation: pw-rotate 4s linear infinite;
}

@keyframes pw-rotate {
  100% {
    transform: translate(-50%, -50%) rotate(450deg);
  }
}

.pw-toggle-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  height: 36px;
  width: 36px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--color-accent-blue), var(--color-primary));
  border: none;
  cursor: pointer;
  padding: 0;
}

.pw-toggle-btn .eye-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-white);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pw-toggle-btn .eye-open {
  display: none;
}

.pw-toggle-btn.is-visible .eye-closed {
  display: none;
}

.pw-toggle-btn.is-visible .eye-open {
  display: block;
}

.field-hint {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  color: var(--color-text-muted);
}
.field-hint.is-error {
  color: #B91C1C;
}
.field-hint.is-ok {
  color: var(--color-success);
}

#password-strength-hint {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
#password-strength-hint.is-ok {
  color: #0f5132;
  background: rgba(255, 255, 255, 0.85);
}
#password-strength-hint.is-error {
  color: #7a1212;
  background: rgba(255, 255, 255, 0.85);
}

.checkbox-field {
  margin-bottom: 14px;
}

.checkbox-field:last-of-type {
  margin-bottom: 20px;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  line-height: 1.5;
}

.checkbox-label span {
  padding-top: 1px;
}

.checkbox-label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--color-accent-blue);
  cursor: pointer;
}

.checkbox-label a {
  color: var(--color-accent-blue);
  text-decoration: none;
  font-weight: 600;
}

.checkbox-label a:hover {
  text-decoration: underline;
}

.checkbox-field.is-error .checkbox-label {
  color: #B91C1C;
}

.form-wrap .btn {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
}

.switch-link {
  text-align: center;
  margin-top: 16px;
  font-size: 13px;
  color: #666;
}
.switch-link a {
  color: var(--color-accent-blue);
  text-decoration: none;
}
.switch-link a:hover {
  text-decoration: underline;
}

/* ----- Registro en 2 columnas (más ancho y compacto, no tan alto) ----- */
.form-wrap-register {
  max-width: 640px;
}

.form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.form-row > * {
  flex: 1 1 0;
  min-width: 0;
}

.form-row.checkbox-row {
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.form-row.checkbox-row .checkbox-field {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .form-wrap-register {
    max-width: 380px;
  }
  .form-row {
    flex-direction: column;
    gap: 0;
  }
}

.msg {
  display: none;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
.msg.error {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
}
.msg.success {
  background: #F0FDF4;
  color: #15803D;
  border: 1px solid #86EFAC;
}

/* ===== 5. Hero (dashboard) ===== */

main {
  position: relative;
  z-index: 1;
}

.search-grid .field {
  margin-bottom: 0;
  flex: 1 1 95px;
  min-width: 85px;
}

.search-grid .field:has(#origen),
.search-grid .field:has(#destino) {
  flex: 1 1 140px;
  min-width: 135px;
}

.search-grid .field:has(#fecha-ida),
.search-grid .field:has(#fecha-vuelta) {
  flex: 1 1 115px;
  min-width: 110px;
}

.search-grid .field label {
  font-size: 10px;
  margin-bottom: 3px;
  white-space: nowrap;
}

.search-grid .field input,
.search-grid .field select {
  padding: 7px 9px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--color-text-dark);
}

.search-grid .field input:focus,
.search-grid .field select:focus {
  background: rgba(255, 255, 255, 0.75);
}

@media (max-width: 560px) {
  .search-card {
    width: calc(100% - 24px);
    padding: 10px 16px;
    gap: 12px;
  }
  .search-grid {
    gap: 10px;
  }
  .search-grid .field {
    min-width: 140px;
    flex: 1 1 140px;
  }
  .stats-row {
    gap: 32px;
  }
}

.account-header .sub {
  margin-bottom: 0;
}

.flights-empty .btn {
  display: inline-block;
}

/* ===== 12. Fondo naturaleza (login / registro) ===== */

.auth-page {
  --color-text-muted: #3D4B58;
}

.auth-page {
  background:
    linear-gradient(160deg, rgba(6,26,20,.72) 0%, rgba(6,26,20,.45) 45%, rgba(6,26,20,.72) 100%),
    url('../imagenes/auth/auth-bg.jpg') center center / cover no-repeat fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

.auth-page header {
  background: rgba(11, 59, 46, 0.35);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.auth-page header .logo {
  color: var(--color-white);
}

.auth-page .form-wrap {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 22px;
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 1px rgba(255, 255, 255, 0.8);
  isolation: isolate;
}

.auth-page .form-wrap p.sub {
  color: var(--color-text-dark);
}

.auth-page .switch-link {
  color: var(--color-text-dark);
  font-weight: 500;
}

.auth-page .form-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.12) 100%);
}

/* Inputs/selects a juego con el vidrio del formulario (solo en login/registro) */
.auth-page .field input,
.auth-page .field select,
.auth-page .email-input,
.auth-page .name-input,
.auth-page .phone-code-toggle,
.auth-page .phone-number-input {
  background: rgba(255, 255, 255, 0.5);
  border-color: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  backdrop-filter: blur(8px) saturate(160%);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-page .field input::placeholder,
.auth-page .phone-number-input::placeholder {
  color: var(--color-text-muted);
}

.auth-page .field input:focus,
.auth-page .field select:focus,
.auth-page .email-input:focus,
.auth-page .name-input:focus,
.auth-page .phone-number-input:focus {
  background: rgba(255, 255, 255, 0.85);
}

.auth-page .phone-code-wrap.open .phone-code-toggle,
.auth-page .phone-code-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.85);
}

.flight-card.selected {
  border-color: var(--color-accent-blue);
  box-shadow: 0 14px 32px -10px rgba(37, 99, 235, 0.35);
  z-index: 1;
}

.t-stub .btn {
  width: 100%;
  font-size: 1.15em;
  padding: 0.75em 1.2em;
}
input[id$="-economy"]:checked + label {
  color: white;
}
input[id$="-premium"]:checked + label {
  color: white;
}
input[id$="-business"]:checked + label {
  color: white;
}

.hoteles-search-fields .field {
  flex: 1 1 160px;
  min-width: 140px;
  position: relative;
}

.hoteles-search-fields .field:first-child {
  flex: 1.4 1 220px;
}

.rh-card-actions .btn {
  padding: 8px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}
/* =============================================================================
   Responsive — refuerzo para todos los dispositivos
   (móviles muy pequeños, tablets, laptops, monitores grandes y TV)
   ============================================================================= */

/* --- Móviles muy pequeños (320px–374px) --- */
@media (max-width: 374px) {
  header {
    padding: 14px 18px;
  }

  .form-wrap {
    margin: 32px auto;
    padding: 22px 18px;
  }

  .form-wrap h1 {
    font-size: 19px;
  }

  .phone-code-wrap {
    width: 92px;
  }

  .phone-code-toggle {
    padding: 10px 6px 10px 10px;
    font-size: 12.5px;
  }

  .phone-code-list {
    width: 130px;
  }
}

/* --- Móviles/tablets en horizontal (poca altura): reduce el margen
   vertical del formulario para que no quede cortado --- */
@media (max-height: 560px) and (orientation: landscape) {
  .form-wrap {
    margin: 24px auto;
  }
}

/* --- Monitores grandes y televisores (1440px en adelante) --- */
@media (min-width: 1440px) {
  html {
    font-size: 17px;
  }

  header {
    padding: 22px 5%;
  }

  .form-wrap {
    max-width: 440px;
  }

  .form-wrap-register {
    max-width: 760px;
  }
}

/* --- Televisores 4K / pantallas ultra anchas (2200px en adelante) --- */
@media (min-width: 2200px) {
  html {
    font-size: 19px;
  }

  .form-wrap {
    max-width: 500px;
  }

  .form-wrap-register {
    max-width: 860px;
  }
}