body {
  font-family: "Poppins", sans-serif;
  color: #333; /* Color del texto para una buena visibilidad */
  overflow-x: hidden; /* 🔥 elimina el scroll horizontal */
  font-size: 0.85rem; /* 🔥 aquí bajas el tamaño global */
}

#panel-scale {
  transform: scale(0.85);
  transform-origin: top center;
  margin: 0 auto;
  width: 100%;
}

/* Switch Style */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  transform: translateX(14px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* Colores para los estados */

.bg-green {
  background-color: #28a745;
}

.bg-orange {
  background-color: #fd7e14;
}

.bg-white {
  background-color: #f4e8ffed;
}

.bg-red {
  background-color: #dc3545;
}

/* Rojo parpadeando */
.bg-red-blink {
  animation: blink 1s infinite;
}

/* Fondo gris claro para las reservas completadas */
.bg-gray-300 {
  background-color: #bdbebfc7; /* Gris claro */
}

.bg-gray-100 {
  background-color: #f3f4f6; /* Gris más claro para las finalizadas */
}

.bg-gray-50 {
  background-color: rgb(91 113 192 / 82%) !important;
}

.status-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-upcoming {
  background-color: orange; /* Naranja para reservas futuras */
}

.status-ongoing {
  background-color: rgb(7, 245, 30); /* Rojo para reservas en curso */
  animation: blink 1s infinite; /* Rojo parpadeante para reservas terminadas */
}

.status-completed {
  background-color: red;
}

.status-free {
  background-color: green; /* Verde para reservas libres */
}

.status-finalized {
  background-color: #070707; /* Color gris para finalizadas */
}

@keyframes blink {
  ls 0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.status-indicator {
  margin-top: 10px;
  display: inline-block;
  width: 20px; /* Ajusta el tamaño a 20px (más grande) */
  height: 20px; /* Ajusta el tamaño a 20px (más grande) */
  border-radius: 50%; /* Mantén el borde redondeado para hacer un círculo */
  margin-right: 8px;
}

.background-pattern {
  background-image: url("https://www.transparenttextures.com/patterns/white-diamond.png");
  background-repeat: repeat;
  background-size: cover;
}

/* Ajuste del tamaño del título y botones en pantallas pequeñas */
@media (max-width: 768px) {
  .fc-toolbar-title {
    font-size: 1.2em; /* Reduce el tamaño del título */
  }
  .fc-button {
    padding: 5px 10px; /* Reduce el tamaño de los botones */
    font-size: 0.9em; /* Ajusta el tamaño de fuente */
  }
  .fc-col-header-cell {
    font-size: 0.85em; /* Tamaño de las cabeceras del calendario */
  }
}

/* Mejorar la apariencia del calendario */
.fc {
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.fc-toolbar {
  background-color: #007bff;
  color: #fff;
  border-radius: 8px 8px 0 0;
  padding: 10px;
}

.fc-toolbar-title {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}

.fc-button {
  background-color: #28a745;
  color: white;
  border-radius: 4px;
}

.fc-button:hover {
  background-color: #218838;
  color: #fff;
}

.fc-button:disabled {
  background-color: #6c757d;
  color: #fff;
}

.fc-event {
  font-size: 0.85em;
  padding: 5px;
  border-radius: 4px;
}

/* Para una mejor visualización de los eventos en pantallas pequeñas */
.fc-timeGridDay-view .fc-daygrid-event {
  display: block;
  white-space: normal;
  font-size: 0.9em;
}

/* para la fechas de los filtros. */

th {
  position: relative;
}

#sort-icon-0,
#sort-icon-1,
#sort-icon-2,
#sort-icon-3,
#sort-icon-4,
#sort-icon-5,
#sort-icon-6,
#sort-icon-7 {
  font-size: 12px;
  margin-left: 8px;
  color: #888;
}

th .sort-asc::after {
  content: "↑";
  margin-left: 4px;
  color: #000;
}

th .sort-desc::after {
  content: "↓";
  margin-left: 4px;
  color: #000;
}

/* Aplica la fuente Amazon Ember */
nav {
  font-family: "Poppins", sans-serif;
  background-color: #232f3e; /* Color de fondo similar al menú de Amazon */
  padding: 10px;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  margin-right: 15px;
}

nav a:hover {
  text-decoration: underline;
}

.text-lg {
  font-size: 15px;
}

.text-3xl {
  font-size: 2.875rem;
  line-height: 2.25rem;
}

.hover\:bg-gray-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(56 146 197 / 59%);
}

.bg-gray-100 {
  background-color: #7a9ac994;
}

/* Estado de la flota*/
body {
  background-color: #f5f5f5; /* Fondo suave para diferenciar */
}

.fleet-status-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fleet-status-item:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.legend {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.legend-color {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border-radius: 3px;
}

.courtesy-vehicle-legend {
  background-color: #378006;
}

.no-courtesy-vehicle-legend {
  background-color: #ff5733;
}

.highlight-day {
  background-color: #ffecb3 !important; /* Fondo de color amarillo claro */
  border-radius: 50%; /* Redondear para hacerlo más visible */
  color: #000 !important; /* Texto negro */
}

.reservation-highlight {
  color: #000aff; /* Cambia esto al color que prefieras */
  font-weight: bold; /* Para mantener el estilo fuerte */
}

.pagination-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2rem;
}

.pagination-controls a {
  padding: 0.5rem 1rem;
  margin: 0 0.5rem;
  background-color: #4a90e2;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.pagination-controls a:hover {
  background-color: #357ab8;
}

.pagination-controls span {
  margin: 0 1rem;
  font-weight: bold;
}

.table-cell {
  white-space: nowrap;
}

.status-cell {
  font-weight: bold;
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* Estilo para las fechas deshabilitadas en Pikaday */
.pika-single .pika-table td.is-disabled {
  background-color: rgba(255, 0, 0, 0.1) !important;
  color: rgba(255, 0, 0, 0.8) !important;
  font-weight: bold; /* Esto es opcional, pero ayuda a que sea más evidente */
}

.pika-single .pika-table td.is-disabled:hover {
  background-color: rgba(255, 0, 0, 0.2) !important;
  color: rgba(255, 0, 0, 1) !important;
  cursor: not-allowed;
  font-weight: bold;
}

/* Ajustes del menú desplegable */
.dropdown-menu a {
  display: block;
  padding: 0.5rem 1rem; /* Espaciado interno */
  font-size: 0.875rem; /* Texto pequeño */
  color: #374151; /* Texto gris oscuro */
  text-decoration: none; /* Sin subrayado */
  border-bottom: 1px solid #e5e7eb; /* Línea divisoria */
}

.dropdown-menu a:last-child {
  border-bottom: none; /* Eliminar la línea en la última opción */
}

.dropdown-menu a:hover {
  background-color: #f3f4f6; /* Hover gris claro */
  color: #111827; /* Texto más oscuro */
}

/* Responsividad */
@media (max-width: 640px) {
  .dropdown-menu {
    width: 90%; /* Ocupar el 90% del ancho de la pantalla */
    left: 5%; /* Centrar con margen izquierdo */
    top: auto; /* Ajustar para móviles */
    position: fixed; /* Fijar el menú */
    z-index: 60; /* Elevar sobre otros elementos */
  }
}

.progress-wrapper {
  display: flex;
  align-items: center;
  gap: 8px; /* Espacio entre la barra y el porcentaje */
}

.progress-container {
  flex: 1; /* Asegura que la barra ocupe el espacio disponible */
  height: 8px; /* Ajusta la altura de la barra */
  background-color: #e5e7eb; /* Fondo de la barra */
  border-radius: 4px; /* Bordes redondeados */
  position: relative;
}

.progress-bar {
  height: 100%; /* Asegura que la barra rellena ocupe la altura completa */
  border-radius: 4px; /* Bordes redondeados */
}

.progress-percentage {
  min-width: 40px; /* Asegura espacio mínimo para el texto */
  text-align: right; /* Alinea el texto al lado derecho */
  font-weight: bold; /* Resalta el porcentaje */
}

/* Estilos específicos para la vista de la flota */
.fleet-status-item {
  position: relative;
}

.fleet-progress-container {
  position: absolute;
  top: 10px; /* Ajusta según el espacio necesario */
  right: 45px; /* Ajusta según el espacio necesario */
  width: 120px; /* Ancho de la barra */
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.fleet-progress-bar {
  height: 100%;
  border-radius: 4px;
}

.fleet-progress-percentage {
  position: absolute;
  top: 4px; /* Ajusta según la distancia de la barra */
  right: 6px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #4a5568;
}

/* 🔥 Tamaño y estilo unificado con "Finalizadas" */
.button-edit,
.button-complete,
.button-whatsapp,
.button-recogida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;              /* ↑ antes 13px */
  font-weight: 600;
  padding: 10px 18px;           /* ↑ antes 8px 14px */
  border-radius: 10px;          /* ↑ bordes algo más redondeados */
  cursor: pointer;
  color: #fff;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.button-edit {
  background: linear-gradient(90deg, #3b82f6, #2563eb);
}
.button-edit:hover {
  box-shadow: 0 6px 12px rgba(37, 99, 235, 0.5);
  transform: translateY(-2px);
}

.button-complete {
  background: linear-gradient(90deg, #22c55e, #16a34a);
}
.button-complete:hover {
  box-shadow: 0 6px 12px rgba(22, 163, 74, 0.5);
  transform: translateY(-2px);
}

.button-whatsapp {
  background: linear-gradient(90deg, #25d366, #128c7e);
}
.button-whatsapp:hover {
  box-shadow: 0 6px 12px rgba(18, 140, 126, 0.5);
  transform: translateY(-2px);
}

.button-recogida {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  gap: 8px;
}
.button-recogida:hover {
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.5);
  transform: translateY(-2px);
}


.card-hover {
  transition: all 0.2s ease-in-out;
}
.card-hover:hover {
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  filter: brightness(1.1);
}

/* ======== Ajuste responsive botones en tarjetas ======== */
.button-row {
  display: flex;
  flex-wrap: wrap;          /* ✅ permite que bajen de línea si no caben */
  justify-content: center;  /* centrado en desktop y móvil */
  gap: 8px;                 /* espacio entre botones horizontal/vertical */
}

./* ======== Ajuste responsive botones en tarjetas ======== */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.button-row > .button-edit,
.button-row > .button-complete,
.button-row > .button-whatsapp,
.button-row > .button-recogida,
.button-row form {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* ⚙️ Tamaño más proporcionado */
.button-row button {
  padding: 7px 12px;        /* 🔹 más compacto */
  font-size: 14px;          /* 🔹 texto un poco menor */
  border-radius: 8px;
}

/* 📱 En pantallas pequeñas */
@media (max-width: 640px) {
  .button-row {
    gap: 6px;
  }

  .button-row > .button-edit,
  .button-row > .button-complete,
  .button-row > .button-whatsapp,
  .button-row > .button-recogida,
  .button-row form {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .button-row button {
    width: 100%;
    padding: 6px 10px;      /* 🔹 más finos en móvil */
    font-size: 13px;
  }
}


/* ====== Distribución de botones responsive en tarjetas ====== */
.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Todos los botones dentro de la fila */
.button-row button,
.button-row form button {
  flex: 1 1 auto;
  text-align: center;
}

/* 📱 En móvil: dos por fila */
@media (max-width: 640px) {
  .button-row {
    gap: 6px;
  }

  .button-row button,
  .button-row form button {
    flex: 1 1 calc(50% - 8px);
    font-size: 13px;
    padding: 7px 10px;
  }
}

/* ==========================
   Botón WhatsApp Finalizadas(degradado real, no Tailwind)
   ========================== */
.button-whatsapp {
  background: linear-gradient(90deg, #25D366 0%, #128C7E 100%) !important;
  color: white !important;
  border: none;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 4px 8px rgba(18, 140, 126, 0.35);
}

.button-whatsapp:hover {
  background: linear-gradient(90deg, #20bd5a 0%, #0e7a6d 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(18, 140, 126, 0.5);
}