/* ===========================
   DROPDOWN
=========================== */
.dropdown-menu {
  background-color: var(--bs-body-bg) !important;
  border: 1px solid var(--bs-primary) !important;
}

.dropdown-menu .dropdown-item {
  color: var(--bs-body-color) !important;
  background-color: transparent !important;
}

.dropdown-menu .dropdown-item:hover {
  color: #fff !important;
  background-color: var(--btn-bg-hover) !important;
}

/* ===========================
   BOTONES
=========================== */
.btn:not(.btn-agregar-item):not(.btn-borrar),
:not(.btn-otros-impuestos) .btn-primary {
  background: linear-gradient(
    135deg,
    var(--bs-primary),
    var(--btn-bg-active)
  ) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.btn:hover,
.btn-primary:hover {
  background-color: #0d6efd !important;
  box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

.btn:active,
.btn:focus,
.btn-primary:active,
.btn-primary:focus {
  background: linear-gradient(
    135deg,
    var(--btn-bg-active),
    var(--bs-gradient)
  ) !important;
  border-color: var(--btn-bg-active) !important;
}

.btn:disabled,
.btn.disabled {
  background-color: var(--bs-disabled-bg) !important;
  border-color: var(--bs-disabled-bg) !important;
  color: #ccc !important;
  opacity: 0.65 !important;
}

/* ===========================
   BOTÓN ELIMINAR
=========================== */

.btn-borrar {
  width: 32px;
  height: 32px;
  padding: 0;
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  line-height: 1;

  background: linear-gradient(135deg, #ff4d4d, #b30000) !important;
  border-color: #b30000 !important;

  color: #ced2d6 !important;
  border: none !important;
  transition: all 0.2s ease;
}

.btn-borrar:hover {
  color: #ffffff !important;
  cursor: pointer;
  background: linear-gradient(135deg, #ff0000, #800000) !important;
  border-color: #800000 !important;
}

/* ===========================
   BOTÓN AGREGAR ITEM
=========================== */
.btn.btn-agregar-item,
.btn.btn-agregar-item:link,
.btn.btn-agregar-item:visited {
  background: linear-gradient(135deg, #19692c, #11441c) !important;
  border-color: #0b2e13 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn.btn-agregar-item:hover {
  background: linear-gradient(135deg, #1e7e34, #19692c) !important;
  border-color: #11441c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn.btn-agregar-item span,
.btn.btn-agregar-item i {
  color: #ffffff !important;
}

/* ===========================
   BOTÓN CAMBIO DE TEMA
=========================== */

#bd-theme {
  background: linear-gradient(
    135deg,
    var(--bs-primary),
    var(--btn-bg-active)
  ) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

#bd-theme:hover {
  background: linear-gradient(
    135deg,
    var(--btn-bg-hover),
    var(--btn-bg-active)
  ) !important;
  border-color: var(--btn-bg-hover) !important;
}

/* ===========================
   LABELS
=========================== */
.form-signin label {
  color: var(--bs-body-color) !important;
}

/* ===========================
   CHECKBOX + INPUTS
=========================== */

.form-check-input {
  background-color: transparent !important;
  border-color: var(--bs-primary) !important;
}
.form-check-input:checked {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

.form-check-input:focus,
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important;
  border-color: var(--bs-primary) !important;
}

/* ===========================
   AUTOCOMPLETADO
=========================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--bs-body-color) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--bs-body-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--bs-body-bg) inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ===========================
   SELECT
=========================== */
.select-compact {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  border: 1px solid var(--bs-primary) !important;
  padding: 0.5rem;
  font-size: 1rem;
}

/* Opciones dentro del select */
.select-compact option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

/* Hover de las opciones*/
.select-compact option:hover {
  background-color: var(--btn-bg-hover) !important;
  color: #fff !important;
}

/* =======================================
   FORZAR COLOR SELECT EN NAVEGADORES
========================================= */
select,
select option {
  /* Fuerzo al navegador a renderizar el control como 'light' o 'dark' 
 para que no use el negro por defecto */
  color-scheme: light dark !important;
}

select option {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
  -webkit-appearance: none;
}

/*en modo claro */
[data-bs-theme="light"] select option {
  background-color: #ffffff !important;
  color: #000000 !important;
}

/*  modo oscuro */
[data-bs-theme="dark"] select option {
  background-color: #212529 !important;
  color: #ffffff !important;
}