@import "tailwindcss";

/* Custom input styles - mejor UX con más altura y focus más visible */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
textarea,
select {
  @apply py-3 px-4;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus {
  @apply border-blue-600 ring-2 ring-blue-600;
}

/* Un formulario que se está enviando (aria-busy: lo ponen Turbo y
   submit_lock.js) muestra en espera el botón que lo envió. */
form[aria-busy="true"] :is(button, input[type="submit"]):disabled {
  cursor: wait;
  opacity: 0.6;
}

/* Arrastrar una tarjeta a otro día del itinerario (itinerary_drag_controller.js) */
.itinerary-dragging,
.itinerary-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

.itinerary-drag-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  max-height: 9rem;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.95;
  transition: none;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.itinerary-drag-label {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 61;
  pointer-events: none;
  white-space: nowrap;
  border-radius: 9999px;
  background: #1d4ed8;
  color: white;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
}

.itinerary-drag-source,
.itinerary-drag-pending {
  opacity: 0.35;
}

/* Un día del itinerario bajo el puntero: el tinte sale un poco por fuera para
   no tocar el relleno (cambiaría el tamaño del día en pleno arrastre) */
section[data-drop-over] {
  border-radius: 0.75rem;
  background-color: #eff6ff;
  box-shadow: 0 0 0 10px #eff6ff;
  outline: 2px dashed #60a5fa;
  outline-offset: 10px;
}

a[data-drop-over] {
  background-color: #dbeafe;
  outline: 2px solid #2563eb;
}

.itinerary-drag-landed {
  animation: itinerary-drag-landed 1.6s ease-out;
}

@keyframes itinerary-drag-landed {
  from { box-shadow: 0 0 0 4px rgb(37 99 235 / 0.5); }
  to { box-shadow: 0 0 0 4px rgb(37 99 235 / 0); }
}