:root {
  --primary-ligth-color: #e0a817;
  --primary-dark-color: #c59b2e;
}



.active .page-link{
  background-color: var(--primary-ligth-color) !important;
}


.btn-primary,
.tox .tox-dialog__footer .tox-button:last-child,
.tox .tox-button {
  --phoenix-btn-color: #fff;
  --phoenix-btn-bg: var(--primary-ligth-color);
  --phoenix-btn-border-color: transparent;
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: #d79d08;
  --phoenix-btn-hover-border-color: rgba(0, 0, 0, 0.2);
  --phoenix-btn-focus-shadow-rgb: 255, 255, 255;
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: #c89102;
  --phoenix-btn-active-border-color: rgba(0, 0, 0, 0.25);
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: #fff;
  --phoenix-btn-disabled-bg: #f4e25e;
  --phoenix-btn-disabled-border-color: transparent
}

.btn-outline-primary {
  --phoenix-btn-color: var(--primary-ligth-color);
  --phoenix-btn-border-color: var(--primary-ligth-color);
  --phoenix-btn-hover-color: #fff;
  --phoenix-btn-hover-bg: var(--primary-ligth-color);
  --phoenix-btn-hover-border-color: var(--primary-ligth-color);
  --phoenix-btn-focus-shadow-rgb: 56, 116, 255;
  --phoenix-btn-active-color: #fff;
  --phoenix-btn-active-bg: var(--primary-ligth-color);
  --phoenix-btn-active-border-color: var(--primary-ligth-color);
  --phoenix-btn-active-shadow: initial;
  --phoenix-btn-disabled-color: var(--primary-ligth-color);
  --phoenix-btn-disabled-bg: transparent;
  --phoenix-btn-disabled-border-color: var(--primary-ligth-color);
  --phoenix-gradient: none
}

a {
  color: var(--primary-ligth-color);
  text-decoration: none
}

.bg-primary {
  background-color: var(--primary-ligth-color) !important;

}


.nav-link.active {
  color: var(--primary-ligth-color) !important;
}

.btn-phoenix-primary {
  color: var(--primary-ligth-color) !important;

}

.text-primary {
  color: var(--primary-ligth-color) !important;
}



.dropzone {
  /* background-color: white; */
  border: 2px dashed #e3e6ed;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 20px;
  border-radius: 10px;
}

.dropzone.hover {
  background-color: #f0f0f0;
}

.preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preview-image {
  position: relative;
}

.preview-image img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
}

.remove-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background: red;
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 99999999999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
}

.modal img {
  max-width: 90%;
  max-height: 90%;
}

.close {
  position: absolute;
  top: 20px;
  right: 40px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}




.editable_title {
  font-weight: 800;
  border: 1px solid rgba(121, 121, 121, 0.233);
  background-color: transparent;
  font-size: larger;
  color: black !important;
}


.editable_title:focus {
  font-weight: 800;
  outline: none;
  border: 1px solid rgba(121, 121, 121, 0.233);
  background-color: transparent;
  font-size: larger;
  color: black !important;
}

.editable_text {
  border: 1px solid rgba(121, 121, 121, 0.233);
  background-color: transparent;
  font-size: 13px;
  color: black !important;
}


.editable_text:focus {
  outline: none;
  border: 1px solid rgba(121, 121, 121, 0.233);
  background-color: transparent;
  font-size: 13px;
  color: black !important;
}

.editable_textT {
  font-weight: 800;
  border: 1px solid rgba(121, 121, 121, 0.233);
  background-color: transparent;
  font-size: 13px;
  color: black !important;
}


.editable_textT:focus {
  outline: none;
  font-weight: 800;
  border: 1px solid rgba(121, 121, 121, 0.233);
  background-color: transparent;
  font-size: 13px;
  color: black !important;
}


.select2-selection--single {
  height: 37px !important;
  /* Ajusta la altura que desees */
  display: flex !important;
  align-items: center !important;
  font-size: 16px;
  /* Opcional: para texto más grande */
  border: 1px solid #ccd0dd !important;
  border-radius: 0.375rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.select2-selection--multiple {
  min-height: 37px !important;
  /* Ajusta la altura que desees */
  display: flex !important;
  align-items: center !important;
  font-size: 16px;
  /* Opcional: para texto más grande */
  border: 1px solid #ccd0dd !important;
  border-radius: 0.375rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.select2-search__field:focus {
  outline: none !important;
  box-shadow: none !important;
}


.select2-selection__arrow {
  margin-top: 5px !important;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: #111322;
  /* Fondo similar a inputs */
  border: 1px solid #2c2f45;
  color: #e3e3e3;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple {
  background-color: #111322;
  border: 1px solid #2c2f45;
  color: #e3e3e3;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection__rendered {
  color: #e3e3e3;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection__placeholder {
  color: #999;
}

html[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
}

html[data-bs-theme="dark"] .select2-dropdown {
  background-color: #0f1122;
  border: 1px solid #2c2f45;
  color: #fff;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option {
  background-color: #0f1122;
  color: #fff;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #3b3f60;
  color: #fff;
}

html[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #2c2f45;
}


.dropzone-warning {
  border: 2px dashed #dc3545 !important;
  /* rojo Bootstrap */
  background-color: rgba(220, 53, 69, 0.1);
}

.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  color: transparent !important;
  border-radius: 0.375rem;
}

.skeleton.loaded {
  animation: none;
  background: none;
  color: inherit;
}

/* Modo oscuro */
[data-bs-theme="dark"] .skeleton:not(.loaded) {
  background: linear-gradient(90deg, #2c2c3a 25%, #3a3a4a 50%, #2c2c3a 75%);
}



@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.logo-text{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px; /* ajusta según el espacio disponible */
  display: inline-block;
}


.skeleton-container:not(.skeleton) {
  display: none !important;
}

@media (max-width: 450px) {
  .logo-text{
    font-size: 20px;
  }
  /* .navbar-nav-icons {
    justify-content: flex-end !important;
    width: 100%;
  }

  .carrito-icon {
    margin-left: auto !important;
    
  } */
}