/* ==========================================
   Estilos globales y ajustes visuales del sistema
   ========================================== */

/* Fondo del login */
body#login-page {
  background-image: url("../img/bg_hsjd.png");
  background-size: cover;
}

/* ==========================================
   Ajustes Select2 para que combine con Tailwind
   ========================================== */

/* Ancho completo */
.select2-container {
  width: 100% !important;
}

/* ---------- Select simple ---------- */
.select2-container--default .select2-selection--single {
  position: relative;
  height: 42px;
  background-color: #fff;
  border: 1px solid #d1d5db;  /* gray-300 */
  border-radius: .5rem;        /* rounded-lg */
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 40px;
  padding-left: .75rem;
  padding-right: 3rem;          /* espacio para clear + flecha */
  font-size: .875rem;           /* text-sm */
  color: #374151;               /* gray-700 */
}

/* Flecha desplegable */
.select2-container--default .select2-selection--single .select2-selection__arrow {
  position: absolute;
  right: .5rem;
  top: 50%;
  transform: translateY(-50%);
  height: 40px;
}

/* Botón de limpiar (X) */
.select2-container--default .select2-selection--single .select2-selection__clear {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 1rem;
  color: #9ca3af;               /* gray-400 */
  cursor: pointer;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
  color: #111827;               /* gray-900 */
}

/* Estado de foco */
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #06b6d4;        /* cyan-500 */
  box-shadow: 0 0 0 2px rgba(8,145,178,.2);
}

/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #9ca3af;
}

/* ---------- Dropdown ---------- */
.select2-container .select2-dropdown {
  border: 1px solid #d1d5db;
  border-radius: .5rem;
  overflow: hidden;
  z-index: 70;                  /* sobre otros elementos */
}

/* Campo de búsqueda */
.select2-dropdown .select2-search__field {
  border: 1px solid #d1d5db;
  border-radius: .375rem;
  padding: .5rem .75rem;
  outline: none;
  font-size: .875rem;
}

/* Lista de opciones */
.select2-results__options {
  max-height: 18rem;
}

.select2-results__option {
  font-size: .875rem;
  padding: .5rem .75rem;
}

.select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #e0f2fe;    /* sky-100 */
  color: #0f172a;               /* slate-900 */
}

/* Estado deshabilitado */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #f3f4f6;    /* gray-100 */
  cursor: not-allowed;
}

/* ==========================================
   Select2 múltiple (chips/tags)
   ========================================== */

/* Estilo de cada chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #60A5FA !important; /* blue-400 */
  border: 1px solid #06b6d4 !important; /* cyan-500 */
  color: #ffffff !important;            /* text-white */
}

/* Hover en chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice:focus {
  background: linear-gradient(to right, #22d3ee, #3b82f6) !important;
  border-color: #0891b2 !important;    /* cyan-600 */
  color: #ffffff !important;
}

/* Botón X del chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.8) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

/* Placeholder en select múltiple */
.select2-selection__placeholder {
  color: #9ca3af !important;
  font-style: italic;
}

/* Altura mínima para selects grandes */
.select2-container--default .select2-selection--multiple {
  min-height: 80px;
}