/* Time Picker Styles */

/* Hacer que todo el input sea clickeable para abrir el time picker */
input[type="time"]::-webkit-calendar-picker-indicator {
  display: block !important;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  width: 100% !important;
  height: 100% !important;
  border: none;
  cursor: pointer;
  color: #a855f7;
  opacity: 1 !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
}

input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(124, 58, 237, 0.1);
  border-radius: 4px;
}

/* Para Firefox */
input[type="time"] {
  -moz-appearance: none;
  position: relative;
  cursor: pointer;
}

/* Estilos específicos para time picker en modo oscuro */
.dark input[type="time"]::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%238b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');
  color: #8b5cf6;
}

.dark input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: rgba(168, 85, 247, 0.1);
}

/* Asegurar que el input sea completamente clickeable */
input[type="time"] {
  cursor: pointer;
  position: relative;
  padding-right: 35px !important; /* Espacio fijo para el icono */
}

/* Asegurar visibilidad en campos con las clases del sistema */
input[type="time"].shadow-sm {
  position: relative;
}

/* El indicador debe cubrir todo el campo pero mostrar el icono a la derecha */
input[type="time"].shadow-sm::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
  background-position: right 10px center;
  background-size: 16px 16px;
  margin: 0;
  padding: 0;
}

/* Mejorar la apariencia cuando está enfocado */
input[type="time"]:focus::-webkit-calendar-picker-indicator {
  color: #7c3aed;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%237c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');
}

.dark input[type="time"]:focus::-webkit-calendar-picker-indicator {
  color: #a855f7;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');
}

/* Asegurar que el texto del time picker sea visible y con espacio para el icono */
input[type="time"] {
  color: inherit;
  padding-right: 40px; /* Más espacio para el icono */
}

/* Mejorar alineación con clases de Tailwind */
input[type="time"].rounded-lg::-webkit-calendar-picker-indicator {
  border-radius: inherit;
  background-position: calc(100% - 14px) center; /* Ajuste para bordes redondeados */
}

/* Ajustes específicos para diferentes tamaños de padding */
input[type="time"].p-2::-webkit-calendar-picker-indicator {
  background-position: calc(100% - 10px) center;
}

input[type="time"].p-2\.5::-webkit-calendar-picker-indicator {
  background-position: right 8px center;
}

input[type="time"].p-3::-webkit-calendar-picker-indicator {
  background-position: calc(100% - 14px) center;
}

/* Para browsers que no soportan ::-webkit-calendar-picker-indicator */
input[type="time"]::-moz-focus-inner {
  border: 0;
}

input[type="time"]::-moz-focus-outer {
  border: 0;
}

/* Asegurar que el hover funcione en todo el campo */
input[type="time"]:hover {
  background-color: rgba(124, 58, 237, 0.02);
}

.dark input[type="time"]:hover {
  background-color: rgba(168, 85, 247, 0.02);
}

/* Reset específico para evitar conflictos con otros estilos */
input[type="time"]::-webkit-calendar-picker-indicator {
  box-sizing: border-box;
  vertical-align: middle;
}

/* Estilos para el time picker nativo cuando se abre */
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  color: inherit;
}

input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus,
input[type="time"]::-webkit-datetime-edit-second-field:focus {
  background-color: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  outline: none;
}

/* Colores para el dropdown del time picker en diferentes navegadores */
input[type="time"]::-webkit-calendar-picker-indicator:active {
  background-color: rgba(124, 58, 237, 0.2);
} 

/* ===== ESTILOS PARA EL TIME PICKER PERSONALIZADO ===== */

/* Contenedor del time picker personalizado */
[data-controller="flowbite-timepicker"] {
  position: relative;
}

/* Input del time picker personalizado */
[data-controller="flowbite-timepicker"] input[readonly] {
  cursor: pointer;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a855f7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  padding-right: 40px;
}

[data-controller="flowbite-timepicker"] input[readonly]:hover {
  background-color: rgba(124, 58, 237, 0.05);
}

[data-controller="flowbite-timepicker"] input[readonly]:focus {
  background-color: rgba(124, 58, 237, 0.1);
}

/* Dropdown del time picker */
[data-flowbite-timepicker-target="dropdown"] {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: white;
  min-width: 240px;
  max-width: 260px;
}

/* Selectores del time picker */
[data-flowbite-timepicker-target="dropdown"] select {
  font-family: 'Inter', 'Segoe UI', sans-serif;
  font-weight: 500;
  text-align: center;
  transition: all 0.15s ease;
  font-size: 11px;
}

[data-flowbite-timepicker-target="dropdown"] select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.1);
  transform: scale(1.01);
}

[data-flowbite-timepicker-target="dropdown"] select:hover {
  border-color: #a855f7;
}

/* Labels de los selectores */
[data-flowbite-timepicker-target="dropdown"] label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header del dropdown */
[data-flowbite-timepicker-target="dropdown"] h3 {
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* Botones de acción */
[data-flowbite-timepicker-target="dropdown"] .flex.justify-end button {
  transition: all 0.2s ease;
  font-weight: 500;
}

[data-flowbite-timepicker-target="dropdown"] .flex.justify-end button:hover {
  transform: translateY(-1px);
}

/* Modo oscuro */
.dark [data-flowbite-timepicker-target="dropdown"] {
  background: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.dark [data-flowbite-timepicker-target="dropdown"] input[type="text"] {
  background: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.dark [data-flowbite-timepicker-target="dropdown"] input[type="text"]:focus {
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.dark [data-flowbite-timepicker-target="dropdown"] button {
  background: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.dark [data-flowbite-timepicker-target="dropdown"] button:hover {
  background: #4b5563;
}

/* Animación de entrada del dropdown */
[data-flowbite-timepicker-target="dropdown"] {
  animation: timepickerSlideIn 0.2s ease-out;
}

@keyframes timepickerSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 640px) {
  [data-flowbite-timepicker-target="dropdown"] {
    min-width: 240px;
    padding: 12px;
  }
  
  [data-flowbite-timepicker-target="dropdown"] .flex.items-center.justify-center {
    gap: 8px;
  }
  
  [data-flowbite-timepicker-target="dropdown"] input[type="text"] {
    width: 40px;
    height: 36px;
    font-size: 14px;
  }
  
  [data-flowbite-timepicker-target="dropdown"] button {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
}