/* =========================================================
   DISTRIBUCIÓN VERTICAL: UBICACIÓN ARRIBA / FECHA ABAJO
========================================================= */

/*
  El paso se dimensiona respecto del viewport real.
  Ubicación queda en la zona superior-media y fecha
  en la zona inferior, justo encima del progreso.
*/

#create-ubicacion-fecha-step {
  position: relative;
  min-height: calc(100dvh - 178px);
}

#create-ubicacion-fecha-step > .create-field {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
}

#create-ubicacion-fecha-step > .create-field:first-child {
  top: 58px;
}

#create-ubicacion-fecha-step > .create-field:last-child {
  bottom: -70%;
}

#create-ubicacion-fecha-step .create-field-hint {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  #create-ubicacion-fecha-step {
    min-height: calc(100dvh - 152px);
  }

  #create-ubicacion-fecha-step > .create-field:first-child {
    top: 64px;
  }

  #create-ubicacion-fecha-step > .create-field:last-child {
    bottom: -70%;
  }
}


/* =========================================================
   LABEL DE UBICACIÓN / FECHA
========================================================= */

#create-ubicacion-fecha-step .create-field > label {
  margin-bottom: 3px;
}



/* =========================================================
   COLUMNAS DE FECHA
========================================================= */

.create-fecha-column {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-width: 0;
  height: 100%;

  overflow: hidden;

  border-right: 1px solid rgba(255, 255, 255, 0.075);
}

.create-fecha-column:last-child {
  border-right: none;
}



/* =========================================================
   VALOR DE FECHA
========================================================= */

.create-fecha-display {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;

  padding: 0 8px;

  overflow: hidden;

  color: #ffffff;

  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;

  text-align: center;
  white-space: nowrap;

  user-select: none;
  -webkit-user-select: none;

  cursor: grab;

  touch-action: none;

  outline: none;

  transition:
    background 120ms ease,
    color 120ms ease;
}

.create-fecha-display:hover {
  background: rgba(255, 255, 255, 0.025);
}

.create-fecha-display:active {
  cursor: grabbing;
}

.create-fecha-display:focus-visible {
  outline: 2px solid #a78bfa;
  outline-offset: -4px;
}



/* =========================================================
   ANIMACIÓN FECHA
========================================================= */

.create-fecha-display.is-changing-next {
  animation: createFechaNext 150ms ease;
}

.create-fecha-display.is-changing-prev {
  animation: createFechaPrev 150ms ease;
}

@keyframes createFechaNext {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

@keyframes createFechaPrev {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }

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