:root {
  /* Tema 8 CLARO */
  --primary-color: #37126C;     /* Púrpura */
  --secondary-color: #FFBF37;   /* Amarillo */
  --bg-main: #fff;
  --text-main: #222;
  --bg-card: #fff;
  --border-main: #FFBF37;
}

body.dark-mode {
  /* Tema 8 OSCURO */
  --primary-color: #00cfff;     /* Celeste */
  --secondary-color: #141B2D;   /* Azul muy oscuro */
  --bg-main: #141B2D;
  --text-main: #fff;
  --bg-card: #212a40;
  --border-main: #293759;
}

body, .header-bottom, .bg-primary, .page-index header.navbar-shrink {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
}

.card-product, .card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-main) !important;
}

.btn, .btn-addtocart, .modal-header {
  background: var(--secondary-color) !important;
  color: var(--text-main) !important;
}

.spinner-loader, a, .h1, .h2, .h3, .h4, .h5, .h6, h3.title,
.card-product:hover .service-name, .page-link, ul.nav-pills.flex-nowrap .nav-link.active,
.double-border h5 {
  color: var(--primary-color) !important;
}
.text-muted { color: var(--primary-color) !important; opacity: 0.8; }

.iconify--tabler, .iconify.iconify--tabler {
  color: var(--primary-color) !important;
  transition: color 0.2s, background 0.2s, box-shadow 0.2s;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  padding: 4px;
  shape-rendering: geometricPrecision;
  width: 32px;
  height: 32px;
}
.iconify--tabler:hover,
.iconify--tabler:focus,
.iconify--tabler:active,
.iconify.iconify--tabler:hover,
.iconify.iconify--tabler:focus,
.iconify.iconify--tabler:active {
  color: #fff !important;
  background: var(--primary-color) !important;
  box-shadow: 0 0 8px 2px var(--primary-color) !important;
}

@media (max-width: 991.98px) {
  .iconify--tabler, .iconify.iconify--tabler {
    width: 25px;
    height: 25px;
  }
}

/* ==== FIX UNIVERSAL: elimina fondo gris/oscuro de cualquier overlay/modal ==== */
.modal-backdrop,
.backdrop,
.backdrop-over,
.overlay,
.order-process-backdrop,
.order-process-overlay,
[class*="backdrop"],
[class*="overlay"] {
    background: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    display: none !important;
}

/* --- NO INCLUIR ESTA PARTE, hace los modales transparentes ---
.modal,
[class*="modal"] {
    background: none !important;
}
-------------------------------------------------------------- */

/* Mantén el fondo por defecto para los modales CLAROS (blanco) y OSCUROS (definido por variables) */
.modal-content {
    background: var(--bg-card) !important;
    color: var(--text-main) !important;
}