/* ====================================================
   RENTAL HOLIDAYS – CHECK-IN APP
   style.css
   ==================================================== */

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

:root {
  --brand: #E8001D;
  --brand-light: #ff2d3d;
  --brand-dark: #b8001a;
  --accent: #F5A623;
  --accent-dark: #d4891a;
  --danger: #ff4d6d;
  --text: #4E4E4E;
  --text-muted: rgba(78, 78, 78, 0.45);
  --surface: #F5F5F5;
  --border: #e2e8f0;
  --radius-lg: 16px;
  --radius-md: 16px;
  --card-max-width: 540px;
  --form-card-max-width: 620px;
  --card-fixed-height: 860px;
  --shadow: none;
  --transition: .3s cubic-bezier(.4, 0, .2, 1);
}

html,
body {
  min-height: 100%;
  min-height: 100dvh;
  width: 100%;
  background: #F5F5F5;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  /* Hide scrollbar visually while maintaining functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

@media (min-width: 1024px) {
  body {
    background: linear-gradient(135deg, #b8001a 0%, #E8001D 100%);
    background-attachment: fixed;
  }

  .checkin-card,
  .form-card,
  .confirm-card {
    height: 98vh;
    max-height: 1200px;
  }
}

/* Global Symmetric Spacing - Adjusted for responsiveness */
:root {
  --card-pad-top: 44px;
  --logo-margin-bottom: 44px;
  --header-block-margin-bottom: 40px;
}

.checkin-card,
.form-card,
.confirm-card {
  padding-top: var(--card-pad-top) !important;
}

.main-logo {
  margin-bottom: var(--logo-margin-bottom) !important;
}

.card-subtitle,
.panel-greeting {
  margin-bottom: var(--header-block-margin-bottom) !important;
}

@media (max-width: 600px) {

  .checkin-card,
  .form-card,
  .confirm-card {
    padding-top: var(--card-pad-top) !important;
  }

  .main-logo {
    margin-bottom: var(--logo-margin-bottom) !important;
  }

  .card-subtitle,
  .panel-greeting {
    margin-bottom: var(--header-block-margin-bottom) !important;
  }
  :root {
    --card-pad-top: 40px;
    --logo-margin-bottom: 40px;
    --header-block-margin-bottom: 24px;
  }
}

@media (max-width: 600px) {
  .checkin-container,
  .form-container,
  .confirm-container {
    padding-top: 0 !important;
    justify-content: flex-start !important;
  }
}

/* ---- Screens ---- */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Optimización para transiciones y animaciones staggered */
  will-change: transform, opacity;
  z-index: 10;
}

/* Pantalla entrante: sube suavemente desde abajo con zoom in */
.screen.active {
  opacity: 1;
  pointer-events: all;
  transform: scale(1);
  animation: screenEnter 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Pantalla saliente: desaparece rápido con zoom out hacia arriba */
.screen.active.screen-exit {
  animation: screenExit 350ms cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

@keyframes screenEnter {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes screenExit {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(1.03) translateY(-8px);
  }
}

/* ---- Staggered children: elementos internos de pantallas principales ---- */

@keyframes fadeSlideUpChild {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: var(--target-opacity, 1); transform: translateY(0); }
}

/* screen-identify: logo → título → subtítulo → campos (separados) → botón */
#screen-identify.active .bg-overlay {
  animation: fadeIn 900ms ease both;
}
#screen-identify.active .main-logo {
  animation: fadeSlideUpChild 900ms ease 150ms both;
}
#screen-identify.active .card-title {
  animation: fadeSlideUpChild 850ms ease 300ms both;
}
#screen-identify.active .card-subtitle {
  animation: fadeSlideUpChild 800ms ease 450ms both;
}
#screen-identify.active .id-fields .field-wrap:nth-child(1) {
  animation: fadeSlideUpChild 800ms ease 600ms both;
}
#screen-identify.active .id-fields .field-wrap:nth-child(2) {
  animation: fadeSlideUpChild 800ms ease 750ms both;
}
#screen-identify.active #btn-continuar {
  animation: fadeSlideUpChild 750ms ease 950ms both;
}

/* screen-panel: saludo → cada botón escalonado */
#screen-panel.active .panel-greeting {
  animation: fadeSlideUpChild 800ms ease 100ms both;
}
#screen-panel.active .panel-btn:nth-child(1) {
  animation: fadeSlideUpChild 700ms ease 220ms both;
}
#screen-panel.active .panel-btn:nth-child(2) {
  animation: fadeSlideUpChild 700ms ease 310ms both;
}
#screen-panel.active .panel-btn:nth-child(3) {
  animation: fadeSlideUpChild 700ms ease 400ms both;
}
#screen-panel.active .panel-btn:nth-child(4) {
  animation: fadeSlideUpChild 700ms ease 490ms both;
}
#screen-panel.active .panel-btn:nth-child(5) {
  animation: fadeSlideUpChild 700ms ease 580ms both;
}
#screen-panel.active .panel-btn:nth-child(6) {
  animation: fadeSlideUpChild 700ms ease 670ms both;
}
#screen-panel.active .panel-btn:nth-child(7) {
  animation: fadeSlideUpChild 700ms ease 760ms both;
}
#screen-panel.active .panel-footer {
  animation: fadeSlideUpChild 650ms ease 850ms both;
}

/* screen-ci-type: saludo → botones de tipo uno a uno → footer */
#screen-ci-type.active .panel-greeting {
  animation: fadeSlideUpChild 800ms ease 100ms both;
}
#screen-ci-type.active .panel-btn:nth-child(1) {
  animation: fadeSlideUpChild 700ms ease 220ms both;
}
#screen-ci-type.active .panel-btn:nth-child(2) {
  animation: fadeSlideUpChild 700ms ease 340ms both;
}
#screen-ci-type.active .panel-btn:nth-child(3) {
  animation: fadeSlideUpChild 700ms ease 460ms both;
}
#screen-ci-type.active .panel-footer {
  animation: fadeSlideUpChild 650ms ease 560ms both;
}

/* screen-ci-done y screen-confirm: icono → texto → resumen (si hay) → botón */
#screen-ci-done.active .success-animation-wrapper,
#screen-confirm.active .success-animation-wrapper {
  animation: fadeSlideUpChild 850ms ease 100ms both;
}
#screen-ci-done.active .confirm-text-group,
#screen-confirm.active .confirm-text-group {
  animation: fadeSlideUpChild 800ms ease 250ms both;
}
#screen-ci-done.active .confirm-summary-box {
  animation: fadeSlideUpChild 750ms ease 400ms both;
}
#screen-ci-done.active .btn-checkin,
#screen-confirm.active .btn-checkin {
  animation: fadeSlideUpChild 700ms ease 550ms both;
}

@media (prefers-reduced-motion: reduce) {
  #screen-identify.active .main-logo,
  #screen-identify.active .card-title,
  #screen-identify.active .card-subtitle,
  #screen-identify.active .id-fields .field-wrap,
  #screen-identify.active #btn-continuar,
  #screen-panel.active .panel-greeting,
  #screen-panel.active .panel-btn,
  #screen-panel.active .panel-footer,
  #screen-ci-type.active .panel-greeting,
  #screen-ci-type.active .panel-btn,
  #screen-ci-type.active .panel-footer,
  #screen-ci-done.active .success-animation-wrapper,
  #screen-ci-done.active .confirm-text-group,
  #screen-ci-done.active .confirm-summary-box,
  #screen-ci-done.active .btn-checkin,
  #screen-confirm.active .success-animation-wrapper,
  #screen-confirm.active .confirm-text-group,
  #screen-confirm.active .btn-checkin { animation: none; }
}

/* ---- Reduced motion para transición de screens ---- */
@media (prefers-reduced-motion: reduce) {
  .screen.active        { animation: screenEnterReduced 200ms ease both; }
  .screen.active.screen-exit { animation: screenExitReduced 150ms ease both; }

  @keyframes screenEnterReduced {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes screenExitReduced {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
}


/* ---- Navigation Tracker ---- */
.step-tracker {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem 2rem 0;
  max-width: 620px;
  width: 100%;
  margin: 0 auto;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  position: relative;
  cursor: pointer;
  transition: opacity var(--transition);
}

.step:not(.active):not(.completed) {
  opacity: 0.5;
  cursor: default;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .4);
  transition: all var(--transition);
}

.step.active .step-circle {
  border-color: #fff;
  color: transparent;
  position: relative;
}

.step.active .step-circle::after {
  content: '';
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.step.completed .step-circle {
  background: rgba(255, 255, 255, .9);
  border-color: rgba(255, 255, 255, .9);
  color: var(--brand-dark);
}

.step-label {
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.step.active .step-label {
  color: #fff;
}

.step.completed .step-label {
  color: rgba(255, 255, 255, .9);
}

.step-line {
  flex: 1;
  height: 2px;
  background: rgba(255, 255, 255, .25);
  margin-bottom: 22px;
  max-width: 80px;
}

.step-line.completed {
  background: rgba(255, 255, 255, .8);
}

/* ---- Background ---- */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: #F5F5F5;
}

@media (min-width: 1024px) {
  .bg-overlay {
    background: linear-gradient(135deg, #b8001a 0%, #E8001D 100%);
  }
}

.bg-overlay::after {
  display: none;
}

.form-overlay {
  background: #F5F5F5;
}

@media (min-width: 1024px) {
  .form-overlay {
    background: linear-gradient(135deg, #b8001a 0%, #E8001D 100%);
  }
}



/* ============================================================
   PANTALLA 1 – CHECK-IN
   ============================================================ */
.checkin-container,
.form-container,
.confirm-container {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* This forces vertical centering */
  flex: 1;
  padding: 1rem;
  /* Limit padding so it doesn't push the card off-center */
  height: 100vh;
  height: 100dvh;
}

.checkin-card,
.form-card,
.confirm-card {
  position: relative;
  background: #F5F5F5;
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 2.5rem 3rem 2rem;
  /* Increased padding for more space */
  width: 100%;
  max-width: var(--card-max-width);
  height: var(--card-fixed-height);
  margin: auto;
  /* Push it into the absolute center */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* slideUp eliminado: la animación screenEnter de .screen.active lo reemplaza */
}

@media (max-width: 1024px) {

  .checkin-card,
  .form-card,
  .confirm-card {
    height: 100%;
    min-height: 100%;
    border-radius: 0;
    padding: 2.5rem 1.5rem;
    margin: 0;
    /* No margin on mobile so it touches edges */
  }
}

/* Login (Pantalla 1) - evitar recorte en móviles bajos */
#screen-identify .checkin-container {
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Login: el bloque de logo y título ahora sigue las variables globales para simetría */
#screen-identify .main-logo {
  margin-bottom: var(--logo-margin-bottom) !important;
}

@media (max-width: 600px) {
  #screen-identify .main-logo {
    margin-bottom: var(--logo-margin-bottom) !important;
  }
}

@media (max-width: 1024px) {
  #screen-identify .checkin-card {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-logo {
  height: 140px;
  width: auto;
  max-width: 100%;
  margin: 0 auto 2.5rem;
  display: block;
  object-fit: contain;
}

@media (max-width: 600px) {
  .main-logo {
    height: 120px;
    margin-bottom: var(--logo-margin-bottom) !important;
  }
}

.card-title {
  font-size: 1.4rem;
  font-weight: 500;
  color: #DD3045;
  margin-bottom: .75rem;
  text-align: center;
}

.card-subtitle {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 0;
  /* Reset global margin-bottom for subtitle */
  text-align: center;
}

h3 {
  color: var(--text-muted);
  font-weight: 400;
}

/* Campos nombre/apellidos en check-in */
.id-fields {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}

.field-wrap {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.field-wrap label {
  font-size: .85rem;
  font-weight: 400;
  color: var(--text);
}

.field-wrap input {
  height: 56px;
  padding: 0 1rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: var(--text);
  background-color: #ffffff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.field-wrap input::placeholder {
  color: rgba(78, 78, 78, 0.34);
}

.field-wrap input:focus {
  border: 1.5px solid var(--brand);
  box-shadow: none;
  transition: border-color var(--transition);
}

/* Campo de teléfono con prefijo de país */
.phone-field:not(.hidden) {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  height: 56px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  background: #ffffff !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.phone-field:focus-within {
  border: 1.5px solid var(--brand) !important;
  box-shadow: none !important;
  transition: border-color var(--transition) !important;
}

.phone-field select {
  flex: 0 0 auto !important;
  /* No crecer, no encoger, ancho automático */
  width: auto !important;
  min-width: 90px !important;
  max-width: 140px !important;
  height: 56px !important;
  padding: 0 1.5rem 0 1.5rem !important;
  /* Alineado con el nuevo padding de campos */
  margin: 0 !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  /* Divisor color fondo */
  border-radius: 0 !important;
  background-color: transparent !important;
  font-family: inherit !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E4E4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .5rem center !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  /* Llenar contenedor flex */
}

.phone-field input {
  flex: 1 1 auto !important;
  /* Ocupar todo el espacio restante */
  width: 100% !important;
  min-width: 0 !important;
  /* Evitar desborde en flexbox */
  margin: 0 !important;
  padding: 0 1rem 0 1.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-family: 'Inter', sans-serif !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  outline: none !important;
  box-shadow: none !important;
  height: 56px !important;
  box-sizing: border-box !important;
}

.phone-field input::placeholder {
  color: rgba(78, 78, 78, 0.34) !important;
}

/* Evitar bordes interiores al hacer click */
.phone-field select:focus,
.phone-field input:focus,
.phone-field select:active,
.phone-field input:active {
  outline: none !important;
  box-shadow: none !important;
}

.phone-field select:focus {
  border-right: 1px solid var(--border) !important;
}

.ci-error {
  font-size: .85rem;
  color: var(--danger);
  margin-top: .25rem;
}

/* Hint text below fields */
.field-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  font-weight: 400;
}

.field-hint-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  /* Filtro para convertir a rojo la marca (#DD3045 aprox) */
  filter: invert(27%) sepia(91%) saturate(2350%) hue-rotate(338deg) brightness(91%) contrast(91%);
}

/* Status message */
.status-msg {
  padding: .85rem 1.2rem;
  border-radius: .75rem;
  font-size: .9rem;
  font-weight: 400;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.status-msg.loading {
  background: #ffffff;
  color: var(--brand);
  border: 1.5px solid var(--border);
}

.status-msg.error {
  background: rgba(232, 0, 29, 0.08); /* Theme --brand con 8% opacidad */
  color: var(--brand);
  border: none;
  font-size: 0.8rem;
  font-weight: 300;
}
.status-msg.error::before {
  content: "";
  display: inline-block;
  width: 1.25em; /* Ligeramente más grande que la letra para destacar */
  height: 1.25em;
  background-color: var(--brand);
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') no-repeat center / contain;
  flex-shrink: 0;
}

.status-msg.hidden {
  display: none;
}

.status-msg.warning {
  background: rgba(217, 119, 6, 0.08); /* Amber/Yellow tone 8% opacity */
  color: #d97706; /* Solid Amber */
  border: none;
  font-size: 0.8rem;
  font-weight: 300;
}
.status-msg.warning::before {
  content: "";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  background-color: #d97706;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>') no-repeat center / contain;
  flex-shrink: 0;
}

/* Check-in button */
.btn-checkin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: #DD3045;
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  height: 64px;
  padding: 0 2rem;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, opacity 0.2s ease;
  width: 100%;
}

.btn-registrar-llegada {
  height: 74px;
  border-radius: 28px;
  border: none;
}

.btn-checkin:hover {
  background: #c2293b;
  box-shadow: none;
  transform: scale(1.01);
}

.btn-checkin:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

.btn-checkin:disabled {
  --target-opacity: 0.5;
  opacity: .5;
  cursor: not-allowed;
  background: #e5e7eb;
  color: #9ca3af;
}

.btn-checkin:disabled:hover,
.btn-checkin:disabled:active {
  transform: none !important;
}

.btn-icon {
  display: flex;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.smooth-fade-in {
  animation: fadeIn 0.5s ease forwards;
}

.btn-icon svg {
  width: 16px;
  height: 16px;
}

.note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: 1.25rem;
  font-size: .8rem;
  color: var(--text-muted);
}

.note svg {
  flex-shrink: 0;
  color: var(--accent);
}

/* ============================================================
   PANTALLA 2 – FORMULARIO
   ============================================================ */
/* Inherits container layout from shared .form-container class above */

/* Base form card overrides - removed disparate max-width */
/* Inherits everything from unified card rule */

#screen-ci-type .checkin-card {
  padding: clamp(1.5rem, 5vh, 3rem) clamp(1.5rem, 5vw, 3.5rem) 1rem;
}

/* Removed redundant height overrides */

/* Selected state for Check-In buttons */
.panel-btn.ci-type-btn.selected {
  border-color: #DD3045;
  background: #fff;
}

.panel-btn.ci-type-btn.selected .panel-btn-label {
  color: #DD3045;
}

/* Check-in summary strip */
.checkin-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1px solid #a7f3d0;
  border-radius: .875rem;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

.summary-badge {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.summary-badge.success {
  background: #10b981;
}

.summary-badge svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

.summary-info {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.summary-label {
  font-weight: 400;
  font-size: .9rem;
  color: #065f46;
}

.summary-detail {
  font-size: .83rem;
  color: #047857;
}

.summary-detail.small {
  font-size: .78rem;
  color: #059669;
}

.form-title {
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: .35rem;
}

.form-subtitle {
  font-size: .9rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.form-section-divider {
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--brand);
  border-bottom: 2px solid #fee2e2;
  padding-bottom: .5rem;
  margin: 1.5rem 0 1.25rem;
  width: 100%;
}

/* Form elements */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.row-50-50 {
  grid-template-columns: 1fr 1fr;
}

.row-50-50-mobile {
  grid-template-columns: 1fr 1fr !important;
}

.row-30-70 {
  grid-template-columns: 3fr 7fr;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* Horizontal layout for Step 2 Llaves */
.date-time-horizontal-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-group-horizontal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group-horizontal label {
  font-size: .85rem;
  font-weight: 400;
  color: #4E4E4E;
}

.horizontal-inputs {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.horizontal-inputs>input[type="time"] {
  flex: 0 0 120px;
}

.date-dm-field {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  width: 100%;
}

.horizontal-inputs .date-dm-field {
  flex: 1;
  min-width: 0;
}

.date-dm-day {
  flex: 0 0 80px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: center;
}

.date-dm-mes {
  flex: 1;
  min-width: 0;
}

.row-50-50-horizontal:not(.hidden) {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1rem !important;
}

/* Centrar inputs horizontales */
.horizontal-inputs {
  justify-content: center;
}

/* Ocultar flechas de incremento/decremento en campos numéricos */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
  /* Firefox */
}

input[type="time"] {
  text-align: center;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Quitar el indicador (reloj) del selector de hora en WebKit (Chrome/Safari móvil) */
input[type="time"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
  opacity: 0;
}

input[type="time"]::-webkit-clear-button,
input[type="time"]::-webkit-inner-spin-button {
  display: none;
}

/* Field Validation Errors */
.field-error {
  border: 1.5px solid var(--brand) !important;
  background-color: rgba(232, 0, 29, 0.05) !important;
  animation: field-shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

/* ============================================================
   APARTAMENTOS – Dropdown personalizado (autocomplete)
   ============================================================ */
.apto-dropdown {
  position: fixed;
  z-index: 9999;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.apto-dropdown.hidden {
  display: none !important;
}

.apto-dropdown-header {
  padding: 0.65rem 0.9rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: #fafafa;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.apto-dropdown-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: #8E8E93;
  cursor: pointer;
  padding: 4px 8px;
  margin-right: -8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.apto-dropdown-close:hover {
  color: #1a1a1a;
}

.apto-dropdown-list {
  max-height: min(44vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.apto-dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  user-select: none;
  color: #1a1a1a;
  font-size: 0.95rem;
}

.apto-dropdown-item:hover,
.apto-dropdown-item.active {
  background: #f5f5f5;
}

.apto-dropdown-empty {
  padding: 0.9rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

@keyframes field-shake {

  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

@media (max-width: 480px) {
  .horizontal-inputs {
    flex-wrap: nowrap;
    gap: 0.4rem;
  }

  .horizontal-inputs>input[type="time"] {
    flex: 0 0 90px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .horizontal-inputs .date-dm-field {
    gap: 0.3rem;
  }

  .horizontal-inputs .date-dm-day {
    flex: 0 0 65px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  .horizontal-inputs select.date-dm-mes {
    padding-left: 0.5rem;
    padding-right: 1.5rem;
  }
}

label {
  font-size: .85rem;
  font-weight: 400;
  color: #4E4E4E;
}

input,
select {
  width: 100%;
  height: 56px;
  padding: 0 1rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: var(--text);
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
  box-sizing: border-box;
}

textarea {
  width: 100%;
  padding: 1rem 1rem 1rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 400;
  color: var(--text);
  background: #ffffff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  appearance: none;
}

input::placeholder,
textarea::placeholder {
  color: rgba(78, 78, 78, 0.34);
}

input:focus,
select:focus,
textarea:focus {
  border: 1.5px solid var(--brand);
  box-shadow: none;
  transition: border-color var(--transition);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Custom Checkboxes */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  margin: 0;
  padding: 0.5rem 0;
  transition: all var(--transition);
  width: 100%;
}

.checkbox-label input[type="checkbox"] {
  display: none;
}

.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid #525252; /* Gris oscuro suave para mejor estética */
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  background: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08); 
}

.checkbox-label input[type="checkbox"]:checked+.custom-checkbox {
  background: var(--accent-dark); 
  border-color: #525252; 
}

.checkbox-label input[type="checkbox"]:checked+.custom-checkbox::after {
  content: '';
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

.checkbox-small-no-border {
  width: 18px !important;
  height: 18px !important;
  border: 1.5px solid #525252 !important; 
  border-radius: 4px !important;
}

.checkbox-small-no-border::after {
  width: 4px !important;
  height: 8px !important;
}



.checkbox-text {
  font-size: .85rem;
  font-weight: 500; /* Un poco más de peso */
  color: #1e293b; /* Texto mucho más oscuro (antes #475569) */
  user-select: none;
}



.form-actions {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.btn-primary,
.btn-secondary {
  padding: 1rem 1.75rem;
  border-radius: .65rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
  border: none;
  transition: var(--transition);
  flex: 1 1 auto;
  text-align: center;
}

.btn-primary {
  background: #DD3045;
  color: #fff;
  height: 56px;
  border-radius: 16px;
  font-size: 0.95rem;
  font-weight: 400;
  box-shadow: none;
}

.btn-primary:hover {
  background: #c2293b;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  background: var(--border);
  color: var(--text-muted);
}

.btn-secondary:hover {
  background: #cbd5e1;
}

/* ============================================================
   PANTALLA 3 – CONFIRMACIÓN
   ============================================================ */
/* Inherits container layout from shared .confirm-container class above */

#screen-ci-done {
  background: transparent;
}

#screen-ci-done.active,
#screen-confirm.active {
  background: rgba(245, 245, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.confirm-card {
  justify-content: center;
  text-align: center;
  overflow: visible; /* to allow pulse effects */
}

.pro-max-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: transparent;
}

.success-animation-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.confirm-icon.pro-max-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #DD3045;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  box-shadow: 0 10px 25px -5px rgba(221, 48, 69, 0.4);
  position: relative;
  z-index: 2;
  animation: pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pop-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.confirm-icon.pro-max-icon svg {
  width: 40px;
  height: 40px;
  stroke: #ffffff;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw-check 0.8s ease-out 0.3s forwards;
}

@keyframes draw-check {
  to { stroke-dashoffset: 0; }
}

.confirm-text-group {
  margin-bottom: 2.5rem;
  animation: slide-up-fade 0.6s ease-out 0.2s both;
}

.confirm-hero-title {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--brand);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}



.confirm-instruction {
  color: var(--text);
  line-height: 1.6;
  font-size: 0.85rem;
  max-width: 400px;
  margin: 0 auto;
}

.highlight-action {
  color: var(--text);
  font-weight: 500;
  background: transparent;
  padding: 0;
  font-size: 0.85rem;
}

.confirm-footer-wrapper {
  width: 100%;
  max-width: 440px;
  margin: 0 auto 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.confirm-summary-box {
  background: #ffffff;
  border: none;
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  animation: slide-up-fade 0.6s ease-out 0.3s both;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid #F5F5F5; /* Matches layout dividers */
}

.summary-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 0.2rem;
}

.summary-row-highlight {
  padding-top: 0.5rem;
}

.summary-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
  text-align: left;
}

.summary-value {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 400;
  text-align: right;
  max-width: 55%;
  word-wrap: break-word;
}



.btn-pro-max {
  animation: slide-up-fade 0.6s ease-out 0.4s both;
  background: #DD3045;
  color: #ffffff;
  height: 64px;
  width: 100%; /* Spans full width of the shared wrapper */
  border-radius: 16px;
  font-weight: 500;
  font-size: 0.95rem;
  box-shadow: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-pro-max:hover {
  background: #c2293b;
  transform: translateY(-2px);
  box-shadow: none;
}

.btn-pro-max:active {
  transform: translateY(0);
}

@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Spinner animation */
.spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Utility */
.hidden {
  display: none !important;
}

.req {
  color: var(--brand);
}

/* ============================================================
   SELECTOR DE TIPO DE LIMPIEZA
   ============================================================ */
.tipo-grid {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin-top: 1.25rem;
  padding: 0 1rem;
  /* Reduce el ancho efectivo de las tarjetas */
  max-width: 480px;
  /* Evita que crezcan demasiado en pantallas anchas */
  margin-left: auto;
  margin-right: auto;
}

.tipo-row-50 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem;
  align-items: stretch;
}

.tipo-row-50 .tipo-card {
  aspect-ratio: 1 / 1;
  gap: 1.25rem;
  justify-content: center;
}

.tipo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem 1rem;
  background: #F8F8F8;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  transition: background var(--transition);
  text-align: center;
  width: 100%;
  font-family: inherit;
}

.tipo-card:hover {
  background: #fefaf3;
}

.tipo-card.selected {
  background: #fff7e6;
  box-shadow: 0 0 0 3px rgba(232, 160, 48, 0.2);
}

.tipo-card.selected .tipo-nombre {
  color: #b87000;
}

/* Tarjetas anchas (fuera del grid 50/50) → layout horizontal con texto apilado */
.tipo-grid>.tipo-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  text-align: left;
  gap: 0.25rem 1rem;
  padding: 1.1rem 1.5rem;
}

.tipo-grid>.tipo-card .tipo-icon {
  grid-row: 1 / 3;
  grid-column: 1;
  align-self: center;
}

.tipo-grid>.tipo-card .tipo-nombre {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
}

.tipo-grid>.tipo-card .tipo-desc {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
}

.tipo-icon {
  font-size: 2rem;
  line-height: 1;
}

.tipo-svg-icon {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
  filter: invert(65%) sepia(60%) saturate(600%) hue-rotate(350deg) brightness(100%) contrast(95%);
}

.tipo-nombre {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #E8A030;
  letter-spacing: 0.01em;
  margin-bottom: 0.1rem;
}

.tipo-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #C7C7C7;
}

/* ── Formularios dinámicos ── */
.tipo-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
  overflow-y: auto;
  /* Internal scroll */
  padding-right: 4px;
}

.form-back-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  width: 100%;
}

.form-close-header {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.btn-close-form {
  background: rgba(0, 0, 0, 0.05);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #4E4E4E;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-form:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.btn-icon-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: none;
  border: none;
  border-radius: 50%;
  color: #1a1a1a;
  cursor: pointer;
  transition: background var(--transition);
  padding: 0;
}

.btn-icon-back:hover {
  background: #f0f0f0;
}

.btn-tipo-back,
.btn-secondary {
  display: flex;
  /* flex for 100% width centering instead of inline-flex */
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a1a1a;
  /* Texto más oscuro para contrastar con fonto claro */
  background: #f6f6f6;
  /* gris puro solicitado */
  border: 1.5px solid #e5e7eb;
  /* Borde muy suave solicitado por el usuario */
  border-radius: 12px;
  padding: 0.85rem 1.25rem;
  /* Aumentado padding Y para más altura */
  cursor: pointer;
  transition: var(--transition);
}

.btn-tipo-back:hover,
.btn-secondary:hover {
  background: #e8e8e8;
}

.back-tipo {
  font-family: inherit;
  font-size: .82rem;
  font-weight: 400;
  color: var(--text-muted);
  background: var(--border);
  border: none;
  border-radius: .5rem;
  padding: .45rem .9rem;
  cursor: pointer;
  transition: var(--transition);
}

.back-tipo:hover {
  background: #cbd5e1;
}

.tipo-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  /* Alineado a la derecha */
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.65rem 1.5rem;
  border-radius: 2rem;
  background: var(--accent);
  color: #ffffff;
  border: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Color único por tipo de servicio */
.tipo-pill.normal {
  background: #3B82F6;
}

/* Azul normal - Limpieza Normal */
.tipo-pill.desocupado {
  background: #3AC9B0;
  color: #ffffff;
}

/* Teal - Limpieza Desocupado */
.tipo-pill.llaves {
  background: #F59E0B;
}

/* Amarillo - Entrega de Llaves */
.tipo-pill.incidencia {
  background: #EF4444;
}

/* Rojo  - Reportar Incidencia */
.tipo-pill.manitas {
  background: #9CA3AF;
}

/* Gris - Manitas */

/* ============================================================
   TOOLTIP DE INFORMACIÓN
   ============================================================ */
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: .3rem;
  vertical-align: middle;
  cursor: pointer;
  color: var(--brand);
  opacity: .7;
  transition: opacity var(--transition);
}

.info-tooltip:hover {
  opacity: 1;
}

/* Flecha inferior del tooltip */
.tooltip-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1a1a1a;
}

.info-tooltip:hover .tooltip-text {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   ROUTE TRACKER UI
   ============================================================ */
.route-tracker-ui {
  background: #ffffff;
  border-radius: 32px;
  padding: 2rem 2.5rem 2rem;
  margin-bottom: 1.5rem;
}

.route-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-lg);
}

.route-status.idle {
  background: #f6f6f6;
  color: #8e8e93;
}

.route-status.active {
  background: #ffffff;
  border: 1.5px solid transparent;
  color: #1a1a1a;
  font-weight: 500;
}

.route-status.finished {
  background: #f6f6f6;
  color: #1a1a1a;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.route-status.active .status-dot {
  animation: pulse-white 2s infinite;
}

@keyframes pulse-white {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.route-step {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#step-stops.route-step {
  gap: 24px;
}

#start-point-display,
#route-stops-controls,
#stops-container {
  margin: 0 !important;
  padding: 0 !important;
}

#route-stops-controls,
#stops-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.btn-route-action {
  width: 100%;
  padding: 0.875rem;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--accent);
  color: #ffffff;
  font-weight: 400;
  font-family: inherit;
  font-size: 0.9rem;
  /* reducido ligeramente */
  cursor: pointer;
  transition: all 0.2s;
}

.btn-route-action:hover {
  background: var(--accent-dark);
}

.btn-route-action.finish {
  background: #ffffff;
  border: 1.5px solid transparent;
  color: #1a1a1a;
  font-size: 0.9rem;
}

.btn-route-action.finish:hover {
  background: #e8e8e8;
  opacity: 1;
}

.btn-route-action.finish.has-stops {
  background: var(--accent);
  /* Naranja */
  color: #ffffff;
}

.btn-route-action.finish.has-stops:hover {
  background: var(--accent-dark);
}

.btn-add-stop {
  background: #F9F9F9;
  border: 1.5px solid transparent;
  color: rgba(78, 78, 78, 0.91);
  padding: 1rem;
  border-radius: var(--radius-lg);
  font-family: inherit;
  font-weight: 400;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.btn-add-stop:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.stop-alert {
  font-size: 0.82rem;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  margin-top: 0.25rem;
}

.live-distance-box {
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 0.75rem;
  text-align: left;
}

.live-distance-box.fixed-footer-style {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 !important;
  padding: 0.75rem 0.25rem !important;
  margin-bottom: 0.5rem !important;
}

.live-distance-box.fixed-footer-style .live-km {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--accent);
}

.live-distance-label {
  font-size: 0.85rem;
  color: #4b5563;
  /* Gris más oscuro para contraste */
  font-weight: 400;
}

.live-km {
  font-size: 1.35rem;
  font-weight: 400;
  color: #1a1a1a;
}

.live-distance-hint {
  font-size: 0.75rem;
  color: #8e8e93;
  margin-top: 0.35rem;
}

@media (max-width: 600px) {
  /* Incidencias: panel de ruta más aprovechado en móvil */
  #form-incidencia .route-tracker-ui {
    padding: 1rem 0.75rem;
    border-radius: 20px;
    margin-bottom: 0.5rem;
  }

  #form-incidencia #incidencia-step-3 .card-subtitle {
    margin-bottom: 0.5rem !important;
  }

  #form-incidencia #step-stops.route-step {
    gap: 16px;
  }
}

@media (max-height: 740px) {
  /* Incidencias en pantallas bajas (iPhone SE, etc.) */
  #form-incidencia .route-tracker-ui {
    padding-top: 1rem;
    padding-bottom: 1.1rem;
  }

  #form-incidencia #incidencia-step-3 .card-subtitle {
    margin-bottom: 0.35rem !important;
  }
}

.stop-item {
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 0 0.5rem;
  /* Minimized padding */
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  margin-bottom: 0px !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 2s ease-in-out, opacity 0.6s ease-in-out, padding 2s ease-in-out;
}

.stop-item.revealed {
  max-height: 200px; /* Suficiente para el contenido */
  opacity: 1;
  overflow: visible;
}

@keyframes subtleFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes subtleFadeInDot {
  from { opacity: 0; transform: translateX(-50%) scale(0.4); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* Base state: hidden */
.stop-item .stop-content,
.stop-item .timeline-dot {
  opacity: 0;
}

/* Revealed state: Animation */
.stop-item.revealed .stop-content {
  animation: subtleFadeIn 0.7s ease-out forwards;
}

.stop-item.revealed .timeline-dot {
  animation: subtleFadeInDot 0.7s ease-out forwards;
}

.stop-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Anchor to top to match timeline-column baseline */
  gap: 0.35rem;
  padding: 0; 
  transition: transform 0.5s ease;
}


.stop-item.removing {
  opacity: 0 !important;
  border-color: transparent !important;
  background-color: transparent !important;
  transition: opacity 0.6s ease-in-out, border-color 0.6s ease-out, background-color 0.6s ease-out !important;
}

.stop-item.collapsing {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  transition: all 0.6s ease-in-out !important;
  overflow: hidden;
}

/* Content visibility handled by animations above */

/* New saving state: hide actions only */
.stop-item.saving .stop-actions {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Ensure content stays visible during save animation if it was already interactive */
.stop-item.new-stop-interactive.animating .stop-content {
  opacity: 1;
  transform: translateY(0);
}


/* === TIMELINE TRACKER === */
.timeline-column {
  position: relative;
  width: 24px;
  min-height: 32px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.75rem;
  /* Removed padding-top: 12px; absolute children already use top: 12px */
}

.timeline-track {
  position: absolute;
  top: 8px; /* Adjusted for 4px padding-top */
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  border-radius: 10px;
  z-index: 1;
  transition: height 1s ease-in-out, background-color 0.5s, opacity 0.6s ease-in-out;
  height: 16px; /* 1x1 base (16x16 circle) */
}

.timeline-track.no-layout-transition {
  transition: none !important;
}

.stop-item.no-layout-transition {
  transition: none !important;
}

/* state idle: pulsing size */
.timeline-track.idle-pulse {
  animation: pulse-height 1.5s ease-in-out infinite;
  background: linear-gradient(to bottom, #FEF3C7 30%, rgba(254, 243, 199, 0) 100%);
}

.stop-item.animating-pulse .timeline-track.idle-pulse {
  animation: pulse-height 1.5s ease-in-out infinite;
  animation-delay: 1.0s; /* Wait for previous line to finish connecting */
  /* Hide the initial state before the animation kicks in */
  animation-fill-mode: both; 
  /* We use opacity 0 as the starting point so it doesn't suddenly appear before pulsating */
}

.timeline-track.connected {
  background: #FEF3C7; /* solid connection */
  animation: none;
}

.timeline-track.inactive {
  background: rgba(254, 243, 199, 0.6);
  animation: none;
  height: 16px; /* Reset to circle size */
}

@keyframes pulse-height {
  0% { height: 16px; opacity: 0; }
  35% { height: 16px; opacity: 1; } /* Smoother fade-in of the dot */
  50% { height: 32px; opacity: 1; }
  100% { height: 16px; opacity: 1; }
}

.timeline-dot {
  position: absolute;
  top: 4px; /* Match padding-top */
  height: 24px; /* Same line height as text */
  width: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s;
}

.timeline-dot::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: #F59E0B;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.stop-item.saved:not(.finish-point-item) .timeline-dot::after,
.stop-item.start-point-item .timeline-dot::after {
  transform: scale(1);
}

.stop-item.finish-point-item.revealed .timeline-dot::after {
  transform: scale(1);
}

.stop-item.finish-point-item.animating .timeline-dot::after,
.stop-item.finish-point-item.animating .timeline-track {
  transform: scale(0);
  opacity: 0;
}

.stop-item.start-point-item .timeline-dot::after,
.stop-item.finish-point-item .timeline-dot::after {
  width: 10px;
  height: 10px;
}

/* For initial start point, reveal immediately */
.stop-item.start-point-item.revealed .timeline-dot {
  transform: translateX(-50%) scale(1);
}

.stop-item.animating:not(.finish-point-item):not(.start-point-item) .timeline-dot::after {
  transition-delay: 1.0s;
}

.stop-item.new-stop-interactive {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.stop-item.new-stop-interactive .timeline-dot::after,
.stop-item.new-stop-interactive .timeline-track {
  opacity: 0;
}

.btn-remove-icon.greyish {
  filter: grayscale(1) opacity(0.5);
  width: 20px;
  height: 20px;
}

/* Saved state: no background, no border */
.stop-item.saved {
  background: transparent;
  border-color: transparent;
}

.stop-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Do not center-align with potential third siblings */
}

.stop-number {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  padding-top: 4px; /* Ultra-high density */
}

.stop-time-col,
.stop-title-col {
  line-height: 24px; /* Fixed height for dot centering */
  margin: 0;
  display: block;
}

.stop-actions {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  padding-top: 4px; /* Matches stop-number */
}

/* Distribución de texto de las paradas guardadas: hora a la izquierda, nombre a la derecha */
.stop-time-col {
  min-width: 52px;
  font-size: 0.8rem;
  font-weight: 300;
  color: #9CA3AF;
}

.stop-title-col {
  font-size: 0.9rem;
  font-weight: 400;
  color: #4E4E4E;
  text-transform: capitalize;
  display: block; /* Ensure it takes full width for duration underneath */
}

.stop-title-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1px;
}

.stop-duration {
  font-size: 0.65rem;
  font-weight: 300;
  color: #B0B0B5;
  margin-top: 0px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease, transform 0.4s ease;
  display: block;
}

.stop-duration.show-duration {
  max-height: 20px;
  opacity: 1;
  margin-top: 2px;
  transform: translateY(0);
}

/* Botón eliminar como una simple “X” de texto */
.btn-remove-stop,
.btn-save-stop {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

.btn-remove-stop:hover,
.btn-save-stop:hover {
  opacity: 0.7;
}

.stop-name-input {
  width: 100%;
  height: 48px;
  /* Reducido de 56px para mejor integración inline */
  padding: 0 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 400;
  color: var(--text);
  background: #ffffff;
  transition: all 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.stop-name-input.interactive {
  height: 24px; /* Matches stop-number line-height */
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 24px;
}

.stop-name-input.interactive:focus {
  border-color: transparent;
  box-shadow: none;
}

.stop-name-input:focus {
  border-color: var(--brand);
  box-shadow: none;
}

.stop-name-input.saved-input {
  background: #EEEEEE;
  border-color: var(--border);
  color: var(--text-muted);
  pointer-events: none;
  border-style: solid;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }

  15% {
    transform: translateX(-6px);
  }

  30% {
    transform: translateX(6px);
  }

  45% {
    transform: translateX(-5px);
  }

  60% {
    transform: translateX(5px);
  }

  75% {
    transform: translateX(-3px);
  }

  90% {
    transform: translateX(3px);
  }

  100% {
    transform: translateX(0);
  }
}

.stop-name-input.shake {
  animation: shake 0.45s ease;
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18);
}

.stop-item.shake {
  animation: shake 0.45s ease;
  border: 1.5px solid transparent;
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18);
}

.btn-save-stop {
  padding: 0.4rem 0.75rem;
  border: 1.5px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  background: #ffffff;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  color: #1a1a1a;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-save-stop.interactive {
  padding: 0;
  border: none;
  background: transparent;
  height: 24px;
  width: 24px;
}

.btn-save-stop.interactive:hover {
  background: transparent;
  transform: scale(1.1);
}

/* Estado de carga con texto para botones interactivos */
.btn-save-stop.loading-feedback {
  width: auto !important;
  height: 28px !important;
  padding: 0 8px !important;
  gap: 5px;
  background: rgba(245, 158, 11, 0.08) !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
  border-radius: 6px;
  color: #D97706;
  font-size: 0.7rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.btn-remove-stop.interactive {
  padding: 0;
  border: none;
  background: transparent;
  height: 24px;
  width: 24px;
}

.btn-remove-stop.interactive:hover {
  background: transparent;
  transform: scale(1.1);
}

.btn-save-stop:hover {
  background: transparent;
}

.spinner-mini {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(16, 185, 129, 0.2);
  border-top: 2px solid #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.btn-remove-stop {
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
}

.btn-remove-stop:hover {
  transform: scale(1.1);
}

.btn-remove-icon {
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.btn-remove-stop:hover .btn-remove-icon {
  opacity: 1;
}


/* --- Control de visibilidad al finalizar --- */
.stops-locked .btn-remove-stop,
.stops-locked .btn-save-stop {
  display: none !important;
}

.stops-locked .stop-item {
  border-color: #e5e7eb;
  background-color: #f9fafb;
}

/* Unified Start Point styling for perfect alignment */
.start-point-item.stop-item {
  background: transparent;
  border-color: transparent;
  margin-bottom: 0px !important;
}

.start-point-title {
  color: var(--accent) !important;
}

.start-point-item .stop-time-col {
  color: var(--accent) !important;
  opacity: 0.5;
}

.start-point-marker img {
  filter: invert(72%) sepia(85%) saturate(800%) hue-rotate(334deg) brightness(101%) contrast(92%);
}

.final-point-label {
  color: var(--accent) !important;
  font-weight: 500;
}

/* Specific styling for the finish point display box */
.finish-point-box {
  margin-top: 0px;
}

.finish-point-item.stop-item.saved {
  background: transparent;
  border-color: transparent;
  margin-bottom: 0px !important;
}

.finish-point-title {
  color: var(--accent) !important;
}

.finish-point-item .stop-time-col {
  color: var(--accent) !important;
  opacity: 0.5;
}

.divider-mini {
  height: 1px;
  background: #f0f0f0;
  margin: 0.75rem 0;
}

.route-summary-box {
  background: #ffffff;
  border: 1.5px solid transparent;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-item .label {
  color: #8e8e93;
  font-size: 0.9rem;
}

.summary-item .value {
  font-size: 1.25rem;
  font-weight: 400;
  color: #1a1a1a;
}

.btn-small {
  width: 100%;
  padding: 0.875rem;
  font-size: 0.85rem;
  font-weight: 500;
  background: #ffffff;
  color: #1a1a1a;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.btn-small:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

/* ============================================================
   PANEL CHECK-IN / CHECK-OUT
   ============================================================ */
.panel-greeting {
  text-align: center;
  margin-bottom: 50px !important;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@media (max-width: 600px) {
  .panel-greeting {
    margin-bottom: 60px !important;
    gap: 0.5rem;
  }
}

/* Ensure consistent height even if font sizes differ slightly */
.panel-greeting>* {
  margin: 0 !important;
}

.greeting-user {
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 0.75rem;
  /* Match the .card-title margin */
  font-weight: 300;
}

.greeting-question {
  font-size: 1.4rem;
  font-weight: 500;
  color: #DD3045;
  margin-bottom: 0;
  /* Reset this as the container .panel-greeting handles the bottom gap */
}

.panel-btns-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  overflow-y: auto;
  /* Internal scroll */
  padding-right: 4px;
  /* Space for scrollbar */
  flex: 1;
  margin: 1rem 0 1.5rem;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Hide scrollbars visually while maintaining functionality */
.panel-btns-list::-webkit-scrollbar,
.tipo-form::-webkit-scrollbar,
.form-scroll-content::-webkit-scrollbar {
  display: none;
}

.panel-btns-list,
.tipo-form,
.form-scroll-content {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.panel-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 0 1.5rem;
  height: 80px;
  min-height: 80px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 28px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, opacity 0.2s ease;
  box-shadow: none;
  width: 100%;
  text-align: left;
}

/* Icon Container */
.panel-btn-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: transparent;
  font-size: 1.5rem;
}

.panel-btn-icon .icon-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Text Content Area */
.panel-btn-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.panel-btn-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}

.panel-btn small {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  display: block;
}

.panel-btn.danger {
  background-color: #fff1f2;
}

.panel-btn.danger:hover {
  background-color: #ffe4e6;
  transform: scale(1.01);
}

.panel-btn.danger .panel-btn-icon {
  background: transparent;
  color: #f43f5e;
}

.panel-btn.danger .panel-btn-label {
  color: #e11d48;
}

.panel-btn.danger small {
  color: #fb7185;
}

/* Highlighted state (Red background, white text) */
.panel-btn.highlighted {
  background: #DD3045;
}

.panel-btn.highlighted .panel-btn-label,
.panel-btn.highlighted small {
  color: #fff;
}

.panel-btn.highlighted .panel-btn-icon .icon-img {
  filter: brightness(0) invert(1);
}

/* Effects */
.panel-btn:disabled {
  --target-opacity: 0.4;
  opacity: 0.4;
  pointer-events: none;
  box-shadow: none !important;
}

.panel-btn:disabled:hover,
.panel-btn:disabled:active {
  transform: none !important;
}

.panel-btn:hover {
  transform: scale(1.01);
  box-shadow: none;
}

.panel-btn:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

#screen-panel .checkin-card {
  padding: 10px clamp(1.5rem, 5vw, 3.5rem) 1rem;
}

/* Icon img adjustment for SVGs */
.panel-btn-icon .icon-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  /* Default color logic (Red #DD3045 approximation with filters) */
  filter: invert(27%) sepia(91%) saturate(2350%) hue-rotate(338deg) brightness(91%) contrast(91%);
}

.panel-btn.incidencia .icon-img {
  /* Yellow #FFB800 approximation with filters */
  filter: invert(80%) sepia(61%) saturate(1400%) hue-rotate(359deg) brightness(101%) contrast(106%);
}

/* Footer Section - Sticky at absolute bottom */
.panel-footer {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 1.5rem 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--card-max-width);
  z-index: 20;
}

/* Footer más compacto SOLO para Entrega de llaves */
#llaves-footer.panel-footer {
  padding: 0.9rem 0 1.15rem;
  flex: 0 0 auto;
  flex-shrink: 0;
}

/* Footer más compacto para Incidencias (Seguimiento de ruta) */
#incidencia-footer.panel-footer {
  padding: 0.25rem 0 2rem;
  gap: 0; /* Controlamos el espacio vía padding del footer-fixed */
}

/* Incidencias: permitir que el halo del dot no se recorte */
#incidencia-footer-fixed .footer-status-row {
  overflow: visible;
  padding-left: 8px;
}

/* En móvil, aún más compacto para ganar espacio útil */
@media (max-width: 600px) {
  #incidencia-footer.panel-footer {
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
  }

  #llaves-footer.panel-footer {
    padding: 0.6rem 0 calc(0.85rem + env(safe-area-inset-bottom, 0px));
    gap: 0.5rem;
  }

  #llaves-footer .form-actions.multi-step.horizontal-nav .btn-secondary,
  #llaves-footer .form-actions.multi-step.horizontal-nav .btn-primary {
    height: 64px;
  }
}

/* Specific to mobile to match exact bottom coordinates */
@media (max-width: 1024px) {
  .panel-footer {
    padding-bottom: 2rem;
    /* Ensure consistent bottom spacing on mobile */
    margin-bottom: 0;
  }
}

/* Loading Dots Animation */
.loading-dots::after {
  content: '';
  display: inline-block;
  animation: loadingDots 1.5s steps(4, end) infinite;
  width: 1em;
  text-align: left;
}

@keyframes loadingDots {

  0%,
  20% {
    content: '';
  }

  40% {
    content: '.';
  }

  60% {
    content: '..';
  }

  80%,
  100% {
    content: '...';
  }
}

/* Animación Wave de Color para el texto (Buscando) */
.text-wave {
  background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.4) 50%, #FFFFFF 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: colorWave 2s linear infinite;
  display: inline-block;
}

.text-wave-loading {
  background: linear-gradient(90deg, #D97706 0%, rgba(217, 119, 6, 0.4) 50%, #D97706 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: colorWave 2s linear infinite;
  display: inline-block;
}

.text-wave-dark {
  background: linear-gradient(90deg, #1a1a1a 0%, rgba(26, 26, 26, 0.4) 50%, #1a1a1a 100%);
  background-size: 200% auto;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: colorWave 2s linear infinite;
  display: inline-block;
}

@keyframes colorWave {
  to {
    background-position: -200% center;
  }
}

.btn-sugerencia {
  background: none;
  border: none;
  color: #DD3045;
  text-decoration: underline;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  font-family: inherit;
}

.btn-cambiar-usuario {
  width: 100%;
  height: 74px;
  background: #F5F5F5;
  color: #4E4E4E;
  border: 1.5px solid rgba(0, 0, 0, 0.05);
  border-radius: 28px;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, border-color 0.2s ease;
}

.btn-cambiar-usuario:hover {
  background: #EDEDED;
  border-color: #DCDCDC;
  transform: scale(1.01);
}

.btn-cambiar-usuario:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

.btn-icon-logout {
  width: 20px;
  height: 20px;
  opacity: 0.7;
}

/* Tipo card selected state (CI type selector) */
.tipo-ci-card.selected {
  border: 2px solid var(--brand);
  background: #fff1f2;
  transform: scale(1.02);
}


/* ---- Campo Cantidad con sufijo € ---- */
.amount-field {
  display: flex;
  align-items: center;
  width: 100%;
  height: 56px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.amount-field:focus-within {
  border-color: var(--brand);
  box-shadow: none;
}

.amount-field input {
  flex: 1;
  height: 100%;
  border: none;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  background: transparent;
  padding: 0 0 0 1.5rem;
  font-family: inherit;
  font-size: .8rem;
  color: var(--text);
}

.amount-field input:focus {
  border: none;
  box-shadow: none;
}

.amount-suffix {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 1.5rem 0 .5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
  pointer-events: none;
  user-select: none;
}

/* --- Estilos de Historial Desplegable --- */
.itinerary-toggle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, border-color 0.2s ease;
  margin-bottom: 0.5rem;
}

.itinerary-toggle:hover {
  background: #f1f5f9;
  border-color: var(--brand-light);
  transform: scale(1.01);
}

.itinerary-toggle:active {
  transform: scale(0.97);
  transition: transform 0.1s ease;
}

.itinerary-toggle .itinerary-label {
  margin-bottom: 0;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  pointer-events: none;
}

.toggle-icon {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.itinerary-toggle.active .toggle-icon {
  transform: rotate(180deg);
}

.itinerary-steps.hidden {
  display: none;
}

/* --- Estilos de Itinerario Detallado --- */
.itinerary-detail {
  margin-top: 1.25rem;
  text-align: left;
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
}

.itinerary-steps {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.itinerary-step-item {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0.1rem 0;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  box-shadow: none;
  animation: slideInLeft 0.3s ease both;
}

.itinerary-time {
  min-width: 52px;
  font-size: 0.8rem;
  font-weight: 400;
  color: #9CA3AF;
}

.itinerary-main {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.itinerary-title {
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a1a1a;
  text-transform: capitalize;
  display: block;
}

.itinerary-duration {
  font-size: 0.65rem;
  font-weight: 300;
  color: #B0B0B5;
  margin-top: 1px;
}

.itinerary-meta {
  font-size: 0.75rem;
  color: #9CA3AF;
}

/* Primera parada destacada en amarillo */
.itinerary-steps li:first-child .itinerary-time {
  color: var(--accent);
}

.itinerary-steps li:first-child .itinerary-title {
  color: var(--accent);
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.itinerary-steps li:nth-child(1) {
  animation-delay: 0.05s;
}

.itinerary-steps li:nth-child(2) {
  animation-delay: 0.1s;
}

.itinerary-steps li:nth-child(3) {
  animation-delay: 0.15s;
}

.itinerary-steps li:nth-child(4) {
  animation-delay: 0.2s;
}

.itinerary-steps li:nth-child(5) {
  animation-delay: 0.25s;
}

/* --- Estilo dinámico para botón de ruta --- */
.btn-route-action.finish.is-cancel {
  background: white !important;
  border: 2px solid #fecdd3 !important;
  color: #be123c !important;
  box-shadow: none !important;
  transform: none !important;
}

/* .amount-suffix ya definido arriba – duplicado eliminado */

/* ---- Campo Fecha Día/Mes ---- */
.date-dm-field {
  display: flex;
  gap: .4rem;
}

.date-dm-day {
  width: 72px !important;
  flex: 0 0 72px;
  text-align: center;
  padding: .75rem .5rem !important;
}

.date-dm-mes {
  flex: 1;
  min-width: 0;
}

.btn-route-action.finish.is-cancel:hover {
  background: #fff1f2 !important;
  border-color: #be123c !important;
  box-shadow: 0 2px 8px rgba(190, 18, 60, 0.1) !important;
}

/* ============================================================
   MOBILE – Sin contenedor blanco
   ============================================================ */
@media (max-width: 600px) {

  .checkin-card,
  .form-card,
  .confirm-card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 1.25rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }

  #screen-panel .checkin-card {
    padding-bottom: 0;
    /* Ya no es necesario con sticky */
    min-height: calc(100vh - 40px);
  }
}

/* Optimización para pantallas con poca altura (iPhone SE, etc.) */
@media (max-height: 740px) {
  :root {
    --card-pad-top: 22px;
    --logo-margin-bottom: 18px;
    --header-block-margin-bottom: 24px;
  }

  .checkin-container,
  .form-container,
  .confirm-container {
    justify-content: flex-start;
  }

  #screen-identify .id-fields {
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  #screen-identify .field-hint {
    margin-top: 0.35rem;
    margin-bottom: 0.25rem;
  }

  #screen-identify .status-msg {
    margin-bottom: 1rem;
  }

  /* Login: botón "Entrar" un poco más alto en pantallas bajas (iPhone SE) */
  #screen-identify #btn-continuar.btn-checkin {
    height: 68px !important;
    min-height: 68px !important;
    padding: 0 2rem !important;
    line-height: 1;
    margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* Asegurar aire bajo el botón: el borde inferior lo define la card, no el margen del botón */
  #screen-identify .checkin-card {
    padding-bottom: calc(2.25rem + env(safe-area-inset-bottom, 0px));
  }

  #screen-identify #btn-continuar.btn-checkin:disabled {
    opacity: 0.85;
    background: #E5E5EA;
  }

  .greeting-user,
  .greeting-question {
    font-size: 1.2rem;
  }

  .main-logo {
    height: 100px;
  }

  .id-fields {
    gap: 1rem;
    margin-bottom: 1rem;
  }
}

/* ============================================================
   SKELETON LOADER (Panel Check-in/Check-out)
   ============================================================ */

@keyframes skeleton-pulse {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.panel-skeleton {
  width: 100%;
}

.skeleton-greeting {
  margin-bottom: 2.5rem;
}

.skeleton-text-small {
  height: 16px;
  width: 120px;
  background-color: #e2e8f0;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text-large {
  height: 28px;
  width: 200px;
  background-color: #e2e8f0;
  border-radius: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.panel-btns-list.skeleton-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.skeleton-btn {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  height: 96px;
  /* Similar height to .panel-btn */
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #e2e8f0;
  flex-shrink: 0;
}

.skeleton-content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.skeleton-title {
  height: 18px;
  width: 140px;
  background-color: #e2e8f0;
  border-radius: 6px;
}

.skeleton-subtitle {
  height: 14px;
  width: 180px;
  background-color: #e2e8f0;
  border-radius: 4px;
}

/* ============================================================
   LOADING SKELETON BLUR (Panel Check-in/Check-out)
   ============================================================ */

.full-screen-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  touch-action: none;
  overscroll-behavior: none;
}

.full-screen-loading.hidden {
  display: none !important;
}

/* Bloqueo global de scroll mientras se muestra el loading */
body.no-scroll {
  overflow: hidden;
  touch-action: none;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.loading-logo {
  width: 140px;
  margin-bottom: 24px;
  animation: pulseLogo 1.5s infinite ease-in-out;
}

/* Consejos dinámicos en pantalla de carga */
.loading-tip {
  position: absolute;
  bottom: 12%;
  left: 1.5rem;
  right: 1.5rem;
  font-size: 0.9rem;
  color: var(--brand); /* Rojo corporativo */
  font-style: normal;
  font-weight: 500;
  max-width: 340px;
  margin: 0 auto;
  opacity: 0;
  line-height: 1.4;
  text-align: center;
  transition: opacity 0.3s ease-in-out;
}

.loading-tip.visible {
  opacity: 1;
  animation: pulseFloat 3s ease-in-out infinite;
}

@keyframes pulseFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.85; }
  50% { transform: translateY(-3px) scale(1.01); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 0.85; }
}

@keyframes pulseLogo {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.8;
  }
}

.loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(221, 48, 69, 0.15);
  /* Light red base */
  border-top-color: #DD3045;
  /* Solid brand red */
  border-radius: 50%;
  animation: spinSpinner 1s linear infinite;
}

@keyframes spinSpinner {
  to {
    transform: rotate(360deg);
  }
}

.loading-status-text {
  margin-top: 16px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
  max-width: 240px;
  line-height: 1.4;
  /* El fade-in debe ser suave */
  opacity: 1;
  transition: opacity 0.3s ease;
}

.loading-status-text.fade-in {
  animation: fadeIn 0.5s ease both;
}

.loading-dots::after {
  content: '';
  animation: dots 1.5s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Selector de Pastillas (Si/No) style */
.selection-pills-group {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.pill-item {
  width: auto;
  padding: 0 1.25rem;
  height: 40px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0; /* Volvemos a un borde más suave pero definido */
  color: #4b5563;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  user-select: none;
  gap: 6px;
}

.pill-item:hover {
  background: #fafafa;
  border-color: #e5e5e5;
  transform: scale(1.02);
}

.pill-item:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

.pill-check {
  display: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pill-item.active .pill-check {
  display: inline-flex;
  animation: fadeIn 0.2s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pill-item:hover {
  background: #fafafa;
  border-color: #e5e5e5;
}

.pill-item.active {
  background: #DD3045;
  color: #ffffff;
  border-color: #DD3045; 
}

.form-step .card-title {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.form-step .card-subtitle {
  margin-bottom: 3rem;
  text-align: center;
}

/* Progress Step Bar style */
.step-progress-bar {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 3rem);
  max-width: 580px;
  z-index: 1000;
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 0;
}

.step-bar {
  flex: 1;
  height: 4px;
  background: #E5E5EA;
  /* grey from image */
  border-radius: 10px;
  overflow: hidden;
  /* To clip the fill */
  position: relative;
}

.step-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  /* Dynamic */
  background: #DD3045;
  /* brand red */
  border-radius: 10px;
  transition: width 2s ease-in-out;
}

/* ============================================================
   MULTI-STEP FORM STYLES (LLAVES)
   ============================================================ */
.form-actions.multi-step {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  margin-top: 1.5rem;
}

/* En Entrega de llaves e Incidencias, el footer ya gestiona el espaciado: evitar hueco vertical extra */
#llaves-footer .form-actions.multi-step,
#incidencia-footer .form-actions.multi-step {
  margin-top: 0;
}

.form-actions.multi-step.horizontal-nav {
  flex-direction: row !important;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: nowrap !important;
  justify-content: space-between;
}

.form-actions.multi-step.horizontal-nav .nav-25 {
  flex: 0 0 calc(25% - 0.25rem);
  width: 25% !important;
  min-width: 0;
}

.form-actions.multi-step.horizontal-nav .nav-35 {
  flex: 0 0 calc(35% - 0.25rem);
  width: 35% !important;
  min-width: 0;
}

.form-actions.multi-step.horizontal-nav .nav-65 {
  flex: 0 0 calc(65% - 0.25rem);
  width: 65% !important;
  min-width: 0;
}

.form-actions.multi-step.horizontal-nav .nav-75 {
  flex: 0 0 calc(75% - 0.25rem);
  width: 75% !important;
  min-width: 0;
}

@media (max-height: 740px) {
  #llaves-footer .form-actions.multi-step.horizontal-nav {
    gap: 0.4rem;
  }

  #llaves-footer .form-actions.multi-step.horizontal-nav .btn-secondary,
  #llaves-footer .form-actions.multi-step.horizontal-nav .btn-primary {
    height: 68px;
  }
}

/* Llaves - Paso 2 (Horarios de estancia): anchos ya ajustados globalmente arriba en el max-width: 480px */

.form-actions.multi-step.horizontal-nav .nav-30 {
  flex: 30 !important;
  width: auto !important;
  margin: 0 !important;
}

.form-actions.multi-step.horizontal-nav .nav-70 {
  flex: 70 !important;
  width: auto !important;
  margin: 0 !important;
}

.form-actions.multi-step .btn-secondary {
  width: 100%;
  height: 74px;
  background: #F5F5F5;
  border: 1.5px solid rgba(0, 0, 0, 0.05);
  /* Sutil borde */
  color: rgba(78, 78, 78, 0.6);
  /* Menos oscuro */
  border-radius: 28px;
  font-family: inherit;
  font-size: 0.85rem;
  /* Más pequeña */
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, opacity 0.2s ease;
}

.form-actions.multi-step .btn-secondary:hover {
  background: #e8e8e8;
  transform: scale(1.01);
}

.form-actions.multi-step .btn-secondary:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

.form-actions.multi-step .btn-primary {
  width: 100%;
  height: 74px;
  border-radius: 28px;
  background: #DD3045;
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, opacity 0.2s ease;
}

.form-actions.multi-step .btn-primary:hover {
  background: #c2293b;
  transform: scale(1.01);
}

.form-actions.multi-step .btn-primary:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

.form-actions.multi-step .btn-primary:disabled {
  --target-opacity: 0.7;
  background: #E5E5EA !important;
  color: #8E8E93 !important;
  opacity: 0.7;
  cursor: not-allowed;
  box-shadow: none !important;
}

.form-actions.multi-step .btn-primary:disabled:hover,
.form-actions.multi-step .btn-primary:disabled:active {
  transform: none !important;
}

.form-actions.multi-step .btn-accent {
  width: 100%;
  height: 74px;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s ease, opacity 0.2s ease;
}

.form-actions.multi-step .btn-accent:hover {
  background: var(--accent-dark);
  transform: scale(1.01);
}

.form-actions.multi-step .btn-accent:active {
  transform: scale(0.94);
  transition: transform 0.1s ease;
}

.form-actions.multi-step .btn-accent:disabled {
  --target-opacity: 0.7;
  background: #E5E5EA !important;
  color: #8E8E93 !important;
  opacity: 0.7;
  cursor: not-allowed;
}

.form-actions.multi-step .btn-accent:disabled:hover,
.form-actions.multi-step .btn-accent:disabled:active {
  transform: none !important;
}


/* Stacked fields grouping */
.field-group-stacked {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.field-group-stacked label {
  font-size: .85rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.1rem;
}

/* ============================================================
   FIXED FOOTER FORM LAYOUT
   ============================================================ */
.tipo-form.has-fixed-footer:not(.hidden) {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.form-scroll-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 1.5rem;
  padding-right: 4px;
  -webkit-mask-image: linear-gradient(to bottom, black 98%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 98%, transparent 100%);
}

/* iOS/Safari: permitir que el área con overflow calcule bien el alto dentro de flex */
#form-llaves.tipo-form.has-fixed-footer:not(.hidden),
#form-normal.tipo-form.has-fixed-footer:not(.hidden),
#form-desocupado.tipo-form.has-fixed-footer:not(.hidden),
#form-manitas.tipo-form.has-fixed-footer:not(.hidden),
#form-app-feedback.tipo-form.has-fixed-footer:not(.hidden) {
  min-height: 0;
}

#form-llaves .form-scroll-content,
#form-normal .form-scroll-content,
#form-desocupado .form-scroll-content,
#form-manitas .form-scroll-content,
#form-app-feedback .form-scroll-content {
  min-height: 0;
}

/* Reservar espacio para el footer sticky en Entrega de llaves, Limpieza Normal, Desocupado, Manitas, Incidencias y Feedback */
#form-llaves .form-scroll-content,
#form-normal .form-scroll-content,
#form-desocupado .form-scroll-content,
#form-manitas .form-scroll-content,
#form-incidencia .form-scroll-content,
#form-app-feedback .form-scroll-content {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* En móvil: si el contenido cabe, bloquear scroll (evita "scroll fantasma" por padding del footer) */
@media (max-width: 600px) {
  #form-llaves .form-scroll-content.scroll-locked,
  #form-normal .form-scroll-content.scroll-locked,
  #form-desocupado .form-scroll-content.scroll-locked,
  #form-manitas .form-scroll-content.scroll-locked,
  #form-incidencia .form-scroll-content.scroll-locked,
  #form-app-feedback .form-scroll-content.scroll-locked {
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: none;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* Ensure the stepper and header stay at top */
.tipo-form .form-back-header,
.tipo-form .stepper-indicator {
  flex-shrink: 0;
}



/* Step Transition Animations */
.form-scroll-content {
  position: relative !important;
  overflow-x: hidden !important;
}

.form-step {
  width: 100%;
}

/* Forward Animation (Next) */
.slide-out-left {
  animation: slideOutLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: absolute;
  top: 1.5rem;
  /* Match parent padding-top */
  left: 0;
  z-index: 1;
}

.slide-in-right {
  animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: relative;
  z-index: 2;
}

/* Backward Animation (Prev) */
.slide-out-right {
  animation: slideOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: absolute;
  top: 1.5rem;
  left: 0;
  z-index: 1;
}

.slide-in-left {
  animation: slideInLeft 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  position: relative;
  z-index: 2;
}

@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }

  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* --- Incidencias Theme: Yellow --- */
#form-incidencia .step-bar-fill {
  background: var(--accent) !important;
}

#form-incidencia .btn-primary {
  background: var(--accent) !important;
}

#form-incidencia .btn-primary:hover {
  background: var(--accent-dark) !important;
}

#form-incidencia .status-dot {
  background: var(--accent) !important;
}

@keyframes pulse-yellow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.5);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(245, 166, 35, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(245, 166, 35, 0);
  }
}

#form-incidencia .route-status.active .status-dot {
  animation: pulse-yellow 2s infinite !important;
}

#form-incidencia input:focus,
#form-incidencia select:focus,
#form-incidencia textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: none !important;
}

#form-incidencia .btn-primary:disabled,
#form-incidencia .btn-accent:disabled {
  background: #E5E5EA !important;
  color: #8E8E93 !important;
  opacity: 0.7;
}

#form-incidencia .card-title {
  color: var(--accent) !important;
}

#form-incidencia .req {
  color: var(--accent) !important;
}

#form-incidencia .live-distance-box.fixed-footer-style {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.status-dot-footer {
  width: 7px;
  height: 7px;
  background-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-yellow 2s infinite !important;
}

.status-dot-footer.finished {
  background-color: #DD3045 !important;
  animation: none !important;
}

.loading-dots:after {
  content: ' .';
  animation: dots-animation 1.5s steps(5, end) infinite;
}

@keyframes dots-animation {

  0%,
  20% {
    content: '.';
  }

  40% {
    content: '..';
  }

  60% {
    content: '...';
  }

  80%,
  100% {
    content: '';
  }
}

/* ===== DYNAMIC SEGMENTED TIMELINE ===== */

.route-card-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 2rem;
  overflow: hidden;
}

.route-timeline-container {
  position: relative;
  padding-left: 10px;
  /* Balanced padding */
  margin-bottom: 2rem;
  min-height: 25px;
}

.timeline-point {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  margin-bottom: 0;
  padding-bottom: 1.8rem;
  /* Balanced vertical space */
}

/* Balanced "Pill" segment */
.point-connector {
  position: absolute;
  left: 0;
  top: -1.8rem;
  width: 18px;
  /* Slightly larger width */
  height: 0;
  background: #FEF3C7;
  border-radius: 50px;
  z-index: 1;
  transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.point-connector.filled {
  height: calc(100% + 1.8rem);
}

.timeline-point:last-child {
  padding-bottom: 0;
}

.point-dot-wrapper {
  position: relative;
  width: 18px;
  /* Matches connector width */
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
  margin-top: 4px;
  /* Align dot center with text line-height */
}

.point-dot {
  width: 6px;
  /* Slightly larger dot */
  height: 6px;
  background: #F59E0B;
  border-radius: 50%;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

.point-dot.visible {
  opacity: 1;
}

/* Proportional special first dot */
.timeline-point:first-child .point-dot {
  width: 10px;
  height: 10px;
  opacity: 1;
}

/* Proportional base pill for first point */
.timeline-point:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  /* Align pill with text start height */
  width: 18px;
  height: 18px;
  background: #FEF3C7;
  border-radius: 50px;
  z-index: 1;
}

/* Proportional flash effect */
.point-dot.reaching {
  animation: point-flash 0.6s ease forwards;
}

@keyframes point-flash {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }

  50% {
    transform: scale(1.6);
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
  }

  100% {
    transform: scale(1);
    filter: brightness(1);
  }
}

.point-info {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  width: 100%;
  padding-top: 2px;
}

.point-time {
  font-size: 0.9rem;
  /* Reduced from 1rem */
  font-weight: 400;
  color: #F59E0B;
  min-width: 45px;
}

.point-details {
  display: flex;
  flex-direction: column;
}

.point-name {
  font-size: 1rem;
  /* Reduced from 1.1rem */
  font-weight: 600;
  color: #1d1d1f;
}

.point-duration {
  font-size: 0.75rem;
  color: #8e8e93;
}

/* Add Stop Button Redesign */
.btn-add-stop-container {
  width: 100%;
  height: 70px;
  background: #f5f5f7;
  border: none;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #4b5563;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}

.btn-add-stop-container:hover {
  background: #ebebeb;
}

.btn-add-stop-container .plus-icon {
  font-size: 1.2rem;
  color: #9ca3af;
}

/* @keyframes slideInLeft ya definido arriba – duplicado eliminado */

/* ============================================================
   CUSTOM ALERT / CONFIRM MODAL
   ============================================================ */
.rh-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(220, 225, 235, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.rh-modal-backdrop.rh-modal-visible {
  opacity: 1;
}

.rh-modal-card {
  background: #ffffff;
  border-radius: 32px;
  padding: 2rem 2rem 2rem;
  width: 100%;
  max-width: 360px;
  box-shadow: none !important; /* Usuario pidió no shadow */
  transform: translateY(14px) scale(0.97);
  transition: transform 0.25s cubic-bezier(.34, 1.45, .64, 1), opacity 0.22s ease;
  opacity: 0;
}

.rh-modal-backdrop.rh-modal-visible .rh-modal-card {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.rh-modal-header {
  font-size: 1.1rem;
  font-weight: 400; /* Usuario pidió no bold */
  color: #1a1a2e;
  text-transform: none; /* Usuario pidió no mayúsculas */
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.rh-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
  text-align: center;
}

.rh-modal-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%; /* Icono circular */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
}

@keyframes rh-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(232, 0, 29, 0.4); transform: scale(1); }
  70% { box-shadow: 0 0 0 12px rgba(232, 0, 29, 0); transform: scale(1.05); }
  100% { box-shadow: 0 0 0 0 rgba(232, 0, 29, 0); transform: scale(1); }
}

.rh-modal-icon.type-info, 
.rh-modal-icon.type-confirm, 
.rh-modal-icon.type-warning, 
.rh-modal-icon.type-error,
.rh-modal-icon.type-success {
  animation: rh-pulse-red 2s infinite ease-in-out;
}

.rh-modal-icon.type-info    { background: #fee2e2; border: 1px solid #fecaca; }
.rh-modal-icon.type-success { background: #fee2e2; border: 1px solid #fecaca; }
.rh-modal-icon.type-error   { background: #fee2e2; border: 1px solid #fecaca; }
.rh-modal-icon.type-warning { background: #fef9c3; border: 1px solid #fef08a; }
.rh-modal-icon.type-confirm { background: #fee2e2; border: 1px solid #fecaca; }

.rh-modal-icon svg {
  width: 24px;
  height: 24px;
  /* Use different colors based on type or just brand */
}
.rh-modal-icon.type-info svg, 
.rh-modal-icon.type-confirm svg, 
.rh-modal-icon.type-error svg,
.rh-modal-icon.type-success svg { 
  fill: var(--brand); 
}
.rh-modal-icon.type-warning svg { fill: #a16207; }

.rh-modal-text {
  flex: 1;
}

.rh-modal-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 0.25rem;
  line-height: 1.35;
}

.rh-modal-message {
  font-size: 0.8rem;
  color: #7a8396;
  line-height: 1.5;
}

.rh-modal-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.rh-modal-btn {
  flex: 1;
  height: 48px;
  border: none;
  border-radius: 14px; /* Reducido de 32px a petición del usuario */
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 400; /* Usuario pidió no bold */
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.rh-modal-btn:active {
  transform: scale(0.96);
}

.rh-modal-btn-secondary {
  background: #f1f3f5;
  color: #495057;
}

.rh-modal-btn-secondary:hover {
  background: #e9ecef;
}

.rh-modal-btn-primary {
  background: var(--brand);
  color: #ffffff;
  box-shadow: none; /* Usuario pidió no shadow */
}

.rh-modal-btn-primary:hover {
  background: var(--brand-dark);
  box-shadow: none;
}

.rh-modal-btn-danger {
  background: #fa5252;
  color: #ffffff;
  box-shadow: none; /* Usuario pidió no shadow */
}

.rh-modal-btn-danger:hover {
  background: #e03131;
}
/* ============================================================
   TUTORIAL / HELP SYSTEM
   ============================================================ */
.btn-help-floating {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: all var(--transition);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  background: rgba(221, 48, 69, 0.1);
  border: 1px solid rgba(221, 48, 69, 0.2);
  color: var(--brand);
  font-size: 1.1rem;
  font-weight: 600;
}

.btn-help-floating:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: var(--brand);
  color: #fff;
}

.btn-help-floating:active {
  transform: scale(0.95);
}

@media (max-width: 600px) {
  .btn-help-floating {
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }
}

/* Modal Overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(220, 225, 235, 0.60);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

/* Cookie Modal (Privacidad) */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(220, 225, 235, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.cookie-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.cookie-modal-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 90vw;
  max-width: 440px;
  max-height: 85vh;
  border-radius: 32px;
  padding: 2rem 1.75rem;
  box-shadow: none !important; /* Usuario pidió no shadow en alertas */
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  overflow: hidden;
  will-change: transform, opacity;
}

.cookie-modal-overlay.active .cookie-modal-card {
  transform: translateY(0);
}

.cookie-modal-icon {
  width: 48px;
  height: 48px;
  background: rgba(221, 48, 69, 0.1);
  color: var(--brand);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  flex-shrink: 0; /* Evitar deformación al expandir contenido */
}

.cookie-modal-icon svg {
  width: 24px;
  height: 24px;
}

.cookie-modal-title {
  font-size: 1.15rem;
  font-weight: 400;
  color: #1a1f2e;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.cookie-modal-body {
  margin-bottom: 1.5rem;
  overflow-y: auto;
  flex: 1;
  width: 100%;
  padding: 0 0.5rem;
  /* Hidden scrollbar */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.cookie-modal-body::-webkit-scrollbar {
  display: none;
}

.cookie-modal-body p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #7a8396;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Ver más - Info Adicional */
.cookie-more-info {
  width: 100%;
  position: relative;
}

.cookie-more-toggle-wrap {
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, #FBFCFC 70%, rgba(251, 252, 252, 0));
  padding: 1.25rem 0 0.5rem;
  margin-top: -1.75rem;
  z-index: 10;
}

.btn-cookie-more {
  background: none;
  border: none;
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  margin: 0 auto;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: background 0.2s ease;
}

.btn-cookie-more:hover {
  background: transparent;
}

.btn-cookie-more:active {
  transform: scale(0.96);
}

.btn-cookie-more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.btn-cookie-more.active svg {
  transform: rotate(180deg);
}

.cookie-details-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
}

.cookie-details-content.active {
  max-height: 1000px;
}

.cookie-details-inner {
  padding: 1.25rem 1.15rem 5rem; /* Aumentado bottom padding a 5rem para total visibilidad con sticky */
  margin-top: 1.25rem;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cookie-detail-item {
  padding-left: 0;
}

.cookie-detail-item strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 400;
  color: #1a1f2e;
  margin-bottom: 0.2rem;
  text-align: left; /* Títulos de detalle a la izquierda por petición */
}

.cookie-detail-item p {
  font-size: 0.82rem !important;
  color: #7a8396 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  text-align: justify;
}

.cookie-legal-note {
  font-size: 0.8rem !important;
  color: #718096 !important;
  margin-top: 1.5rem;
  text-align: justify;
}

.cookie-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.btn-cookie-action {
  padding: 0.85rem;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  border: none;
  width: 100%;
}

.btn-cookie-action:active {
  transform: scale(0.97);
}

.btn-cookie-action.primary {
  background: var(--brand);
  color: #fff;
}

.btn-cookie-action.secondary {
  background: rgba(0, 0, 0, 0.05);
  color: #4a5568;
}

.btn-cookie-action:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.btn-cookie-action:active {
  transform: translateY(0);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-overlay.hidden {
  display: none;
}

/* Tutorial Card */
.tutorial-card {
  background: #ffffff;
  border: 1px solid #ffffff; /* Borde blanco puro solicitado */
  width: 95vw;
  max-width: 480px;
  min-height: 520px;
  height: 92vh; 
  max-height: 900px; 
  border-radius: 32px;
  padding: 0; 
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  justify-content: flex-end; 
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease-in-out;
}

.modal-overlay.active .tutorial-card {
  opacity: 1;
  transform: translateY(0);
}

.tutorial-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background-color: rgba(0, 0, 0, 0.5); 
  -webkit-mask-image: url('icons/close.svg');
  mask-image: url('icons/close.svg');
  mask-size: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  border: none;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 40; /* Por encima de todo */
  transition: background-color 0.2s, opacity 0.2s;
  box-shadow: none; 
  opacity: 0.7; 
}

.tutorial-close.light {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.tutorial-img-wrap {
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
  overflow: hidden; /* Added to hide sliding elements */
}

.tutorial-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); /* Curva "Expo Out" ultra suave tipo Apple, más lenta */
  will-change: transform; /* Aceleración por hardware para 60fps */
}

.tutorial-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background-repeat: repeat-y; 
  background-size: 100% auto;
}
/* .tutorial-step-img eliminado ya que ahora usamos background-image */

.tutorial-panel {
  position: relative;
  z-index: 2; 
  background: rgba(255, 255, 255, 0.88); 
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 1.5rem 1.6rem 1.8rem; /* Padding reducido para el nuevo height de 35% */
  width: 100%;
  height: 35%; /* Reducido a 35% solicitado */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center; 
  text-align: center;
  border-bottom-left-radius: 32px;
  border-bottom-right-radius: 32px;
  overflow: hidden; 
}

.tutorial-content {
  width: 100%;
  flex: 1; /* Ocupa todo el espacio superior disponible */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centrado vertical real solicitado para el texto */
  align-items: center;
  overflow-y: auto; 
  scrollbar-width: none; 
}

.tutorial-content::-webkit-scrollbar {
  display: none; 
}

.tutorial-actions {
  display: flex;
  gap: 12px;
  width: 100%;
  padding-top: 1rem; /* Espacio fijo entre texto y botones */
  flex-shrink: 0; /* No se encoge, se queda en el fondo */
  background: transparent;
}

.tutorial-title {
  font-size: 1.075rem; 
  font-weight: 500; 
  color: #DD3045; 
  margin-bottom: 0.75rem; 
  line-height: 1.35;
  letter-spacing: -0.01em;
  transition: opacity 0.3s ease-in-out;
  /* Fix Safari text overlap composite bug */
  transform: translateZ(0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tutorial-desc {
  font-size: 0.8rem;
  color: #7a8396; 
  line-height: 1.5;
  font-weight: 400;
  margin-bottom: 1rem;
  transition: opacity 0.3s ease-in-out;
  /* Fix Safari text overlap composite bug */
  transform: translateZ(0);
  will-change: opacity, transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tutorial-fade-out {
  opacity: 0 !important;
}

.tutorial-step-count {
  position: absolute; 
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.6); 
  font-weight: 400;
  display: block;
  overflow: hidden; /* Asegurar que el número no se salga del bloque al hacer el slide */
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.2); 
  backdrop-filter: blur(8px);
  border-radius: 20px;
  z-index: 10; 
  box-shadow: none; 
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.tutorial-step-number {
  display: inline-block;
  min-width: 9px;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Solo el número Sube (Next) */
.num-slide-up-out {
  opacity: 0 !important;
  transform: translateY(-15px) !important;
}
.num-slide-up-prep {
  transition: none !important;
  opacity: 0 !important;
  transform: translateY(15px) !important;
}

/* Solo el número Baja (Prev) */
.num-slide-down-out {
  opacity: 0 !important;
  transform: translateY(15px) !important;
}
.num-slide-down-prep {
  transition: none !important;
  opacity: 0 !important;
  transform: translateY(-15px) !important;
}

.tutorial-step-count.light {
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
}


.btn-tutorial-nav {
  height: 56px;
  border-radius: 16px;
  font-size: 0.85rem; /* Más pequeño solicitado */
  font-weight: 400; /* Normal solicitado */
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  border: none;
}

.btn-tutorial-nav:active {
  transform: scale(0.97);
}

.btn-tutorial-nav.primary {
  flex: 1; /* Crecer para ocupar el espacio restante (70% si está Atrás, 100% si no) */
  background: #DD3045;
  color: #fff;
}

.btn-tutorial-nav.primary:hover {
  background: #c2293b;
}

.btn-tutorial-nav.secondary {
  flex: 0 0 30%; /* 30% fijo de ancho */
  background: #f1f3f5;
  color: #495057;
}

.btn-tutorial-nav.secondary:hover {
  background: #e9ecef;
}

/* Tutorial Highlights */
.tutorial-highlight {
  position: relative;
  z-index: 2001 !important;
  box-shadow: 0 0 0 4px rgba(221, 48, 69, 0.4), 0 0 30px rgba(221, 48, 69, 0.3) !important;
  transform: scale(1.02);
  transition: all 0.3s ease !important;
}

.glassmorphism {
  background: #ffffff;
}
   /* PANTALLA: UBICACIÓN REQUERIDA (LOCK)
   ============================================================ */
#screen-location-required {
  z-index: 5000;
}

#screen-location-required.active {
  background-color: var(--surface);
}

#screen-location-required .confirm-hero-title {
  color: var(--brand);
}

#screen-location-required .danger-icon {
  animation: pulseDanger 2s infinite ease-in-out;
  background: var(--brand);
  border: 4px solid #fff;
  box-shadow: 0 4px 20px rgba(232, 0, 29, 0.3);
}

@keyframes pulseDanger {
  0% { transform: scale(1); box-shadow: 0 4px 20px rgba(232, 0, 29, 0.3); }
  50% { transform: scale(1.08); box-shadow: 0 6px 30px rgba(232, 0, 29, 0.5); }
  100% { transform: scale(1); box-shadow: 0 4px 20px rgba(232, 0, 29, 0.3); }
}

#screen-location-required .btn-pro-max {
  background: var(--brand);
}

#screen-location-required.active .success-animation-wrapper {
  animation: fadeSlideUpChild 850ms ease 100ms both;
}
#screen-location-required.active .confirm-text-group {
  animation: fadeSlideUpChild 800ms ease 250ms both;
}
#screen-location-required.active .confirm-footer-wrapper {
  animation: fadeSlideUpChild 700ms ease 500ms both;
}

/* Ajustes de alineación vertical para pantalla de bloqueo */
#screen-location-required.active { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 100vh !important; }
#screen-location-required .checkin-container { width: 100%; display: flex; justify-content: center; align-items: center; }

/* ============================================================
   COMPONENT: GUÍA DE SOLUCIÓN GPS
   ============================================================ */
.location-help-card {
  margin-top: 2rem;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  text-align: left;
  width: 100%;
}

.help-card-header {
  padding: 1.1rem 1.25rem;
  background: rgba(245, 166, 35, 0.04);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.help-card-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.help-card-body {
  padding: 1.5rem 1.25rem;
}

.help-step-group {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.help-step-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.step-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--brand);
  color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  margin-top: 1px;
}

.step-content {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #555;
}

.step-content b {
  color: var(--text);
  font-weight: 600;
}

.help-card-footer {
  padding: 1rem 1.25rem;
  background: #fafafa;
  border-top: 1px solid var(--border);
}

.help-footer-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.help-sub-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

/* ============================================================
   LAYOUT: PANTALLA BLOQUEO GPS (NUEVA DISTRIBUCIÓN)
   ============================================================ */
#screen-location-required .checkin-card {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  height: 85vh;
  max-height: 720px;
  width: 100%;
  max-width: 440px;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
}

.confirm-header-section {
  padding: 2.5rem 2rem 1rem;
  flex-shrink: 0;
  text-align: center;
}

.confirm-scroll-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 1.5rem 1.5rem;
  /* Mask gradient para indicar que hay más contenido al hacer scroll */
  -webkit-mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 92%, transparent 100%);
}

.confirm-fixed-footer {
  padding: 1.5rem;
  background: #F5F5F5;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  width: 100%;
}

.location-help-card {
  margin-top: 0.5rem !important;
  box-shadow: none !important;
  background: var(--surface) !important;
}

/* ============================================================
   BLOQUEO DE ORIENTACIÓN HORIZONTAL
   ============================================================ */
.orientation-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: white;
  display: none; /* Oculto por defecto */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.orientation-content {
  max-width: 320px;
}

.orientation-icon {
  width: 80px;
  height: 80px;
  background: var(--brand);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  animation: rotatePhone 2s ease-in-out infinite;
}

.orientation-icon svg {
  width: 40px;
  height: 40px;
}

.orientation-overlay h2 {
  font-size: 1.5rem;
  color: var(--text);
  margin-bottom: 1rem;
}

.orientation-overlay p {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

@keyframes rotatePhone {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  75% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* Solo mostrar en landscape y dispositivos móviles/tablets (max-width: 1024px) */
@media screen and (orientation: landscape) and (max-width: 1024px) {
  .orientation-overlay {
    display: flex;
  }
  
  /* Asegurar que nada más sea visible para forzar el giro */
  body > *:not(.orientation-overlay) {
    display: none !important;
  }
}

/* ============================================================
   RETRY QUEUE BANNER
   ============================================================ */
.retry-queue-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #1a1a2e;
  color: #fff;
  padding: 10px 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  animation: retryBannerSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.retry-queue-banner.hidden {
  display: none;
}

@keyframes retryBannerSlideIn {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.retry-queue-content {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--card-max-width);
  margin: 0 auto;
}

.retry-queue-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.retry-queue-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--accent);
}

.retry-queue-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.retry-queue-main {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

.retry-queue-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   OVERTIME MEDIA UPLOAD — Limpieza Normal
   ============================================================ */

.n-media-section {
  margin-top: 0.85rem;
}

.n-media-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.n-media-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text);
  opacity: 0.65;
}

.n-media-counters {
  display: flex;
  gap: 0.4rem;
}

.n-media-counter {
  font-size: 0.7rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 2px 9px;
  color: var(--text-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  font-variant-numeric: tabular-nums;
}

.n-media-counter.active {
  background: rgba(217, 119, 6, 0.09);
  border-color: rgba(217, 119, 6, 0.4);
  color: #d97706;
}

.n-media-counter.full {
  background: rgba(232, 0, 29, 0.07);
  border-color: rgba(232, 0, 29, 0.3);
  color: var(--brand);
}

.n-media-dropzone {
  border: 1.5px dashed #d1d9e6;
  border-radius: 12px;
  padding: 1.1rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  background: rgba(248, 249, 251, 0.7);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.n-media-dropzone:hover,
.n-media-dropzone.dragover {
  border-color: #d97706;
  background: rgba(217, 119, 6, 0.04);
}

.n-media-dropzone.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.n-media-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.n-media-icon {
  width: 1.75rem;
  height: 1.75rem;
  color: #d97706;
  opacity: 0.75;
}

.n-media-icon svg {
  width: 100%;
  height: 100%;
}

.n-media-hint {
  font-size: 0.8rem;
  color: var(--text);
  opacity: 0.65;
  font-weight: 400;
}

.n-media-sublimits {
  font-size: 0.68rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

/* Thumbnail grid */
.n-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.n-media-grid:empty {
  display: none;
}

.n-media-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #e8ecf0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.04);
}

.n-media-thumb img,
.n-media-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.n-media-thumb-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 0.58rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.06em;
  pointer-events: none;
}

.n-media-thumb-remove {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.n-media-thumb-remove:hover,
.n-media-thumb-remove:active {
  background: rgba(232, 0, 29, 0.85);
  transform: scale(1.1);
}

.n-media-thumb-remove svg {
  width: 10px;
  height: 10px;
  stroke: #fff;
  stroke-width: 2.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes n-thumb-in {
  from {
    opacity: 0;
    transform: scale(0.65);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.n-media-thumb-enter {
  animation: n-thumb-in 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.n-media-error {
  margin-top: 0.45rem;
  font-size: 0.73rem;
  color: var(--brand);
  background: rgba(232, 0, 29, 0.06);
  border: 1px solid rgba(232, 0, 29, 0.15);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  line-height: 1.4;
}

.n-media-error.hidden {
  display: none;
}