/*
 * Capa opcional de Apariencia.
 * Ninguna regla se activa al instalar: cada grupo depende de una clase que
 * proviene de instance/apariencia.db. Los CSS originales siguen siendo la
 * fuente visual mientras el sector permanece desactivado.
 */

body.apariencia-general,
body.apariencia-general .body {
  color: var(--ap-color-text);
  background-color: var(--ap-color-bg);
}

body.apariencia-general .main,
body.apariencia-general .fondo-gris {
  background-color: var(--ap-color-bg) !important;
}

body.apariencia-general h1,
body.apariencia-general h2,
body.apariencia-general h3,
body.apariencia-general h4,
body.apariencia-general h5,
body.apariencia-general h6,
body.apariencia-general .title,
body.apariencia-general .section-title {
  color: var(--ap-color-headings);
}

body.apariencia-general .card,
body.apariencia-general .modal-content,
body.apariencia-general .form-control,
body.apariencia-general .form-select {
  border-color: var(--ap-color-border);
  background-color: var(--ap-color-surface);
}

body.apariencia-general a:not(.btn):not(.stkml-nav-link):not(.stkml-nav-icon) {
  color: var(--ap-color-primary);
}

body.apariencia-general a:not(.btn):not(.stkml-nav-link):not(.stkml-nav-icon):hover {
  color: var(--ap-color-primary-hover);
}

body.apariencia-tipografias,
body.apariencia-tipografias .body {
  font-family: var(--ap-font-body) !important;
}

/*
 * Muchos templates históricos declaran Montserrat/Open Sans directamente en
 * estilos internos que se cargan después de este archivo. Al activar
 * Tipografías, los elementos de texto deben heredar la fuente administrada.
 * Los elementos de iconos quedan excluidos para no romper Font Awesome ni los
 * demás juegos de iconos del tema.
 */
body.apariencia-tipografias :where(
  div, section, article, main, nav, header, footer, aside,
  p, span, a, ul, ol, li, dl, dt, dd,
  table, thead, tbody, tfoot, tr, td, th,
  blockquote, address, small, strong, em, b
):where(
  :not([class^="fa"]):not([class*=" fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not(.material-icons)
) {
  font-family: inherit !important;
}

body.apariencia-tipografias h1,
body.apariencia-tipografias h2,
body.apariencia-tipografias h3,
body.apariencia-tipografias h4,
body.apariencia-tipografias h5,
body.apariencia-tipografias h6,
body.apariencia-tipografias .title,
body.apariencia-tipografias .section-title {
  font-family: var(--ap-font-headings) !important;
}

body.apariencia-tipografias #header.stkml-header .stkml-topbar,
body.apariencia-tipografias #header.stkml-header .stkml-main {
  font-family: var(--ap-font-header) !important;
}

body.apariencia-tipografias #header.stkml-header .stkml-nav,
body.apariencia-tipografias #header.stkml-header .stkml-mobile-menu,
body.apariencia-tipografias #header.stkml-header .stkml-mega {
  font-family: var(--ap-font-menu) !important;
}

body.apariencia-tipografias .product,
body.apariencia-tipografias .product-title,
body.apariencia-tipografias .product-thumb-info-content,
body.apariencia-tipografias .st-product-card,
body.apariencia-tipografias .st-product-card a:not(.btn) {
  font-family: var(--ap-font-products) !important;
}

body.apariencia-tipografias .price,
body.apariencia-tipografias .amount,
body.apariencia-tipografias .stkml-price,
body.apariencia-tipografias .st-precio-contado-valor,
body.apariencia-tipografias .detalle-precio-contado-valor {
  font-family: var(--ap-font-prices) !important;
}

body.apariencia-tipografias .btn,
body.apariencia-tipografias button,
body.apariencia-tipografias [class^="btn-"],
body.apariencia-tipografias [class*=" btn-"] {
  font-family: var(--ap-font-buttons) !important;
}

body.apariencia-tipografias input,
body.apariencia-tipografias select,
body.apariencia-tipografias textarea,
body.apariencia-tipografias label,
body.apariencia-tipografias .form-control,
body.apariencia-tipografias .form-select {
  font-family: var(--ap-font-forms) !important;
}

body.apariencia-tipografias .checkout-page {
  font-family: var(--ap-font-checkout) !important;
}

body.apariencia-tipografias #footer.footer-soundtek {
  font-family: var(--ap-font-footer) !important;
}

body.apariencia-tipografias .stkml-header-promo-copy,
body.apariencia-tipografias .stkml-header-promo-copy strong,
body.apariencia-tipografias .stkml-header-promo-copy small,
body.apariencia-tipografias .banner-principal-wrapper {
  font-family: var(--ap-font-promos) !important;
}

body.apariencia-header #header.stkml-header .stkml-topbar {
  background: var(--ap-header-top-bg) !important;
  color: var(--ap-header-top-text) !important;
}

body.apariencia-header #header.stkml-header .stkml-topbar a {
  color: var(--ap-header-top-text) !important;
}

body.apariencia-header #header.stkml-header .stkml-main {
  background: var(--ap-header-main-bg) !important;
  color: var(--ap-header-main-text) !important;
}

body.apariencia-header #header.stkml-header .stkml-main a,
body.apariencia-header #header.stkml-header .stkml-main button,
body.apariencia-header #header.stkml-header .stkml-action {
  color: var(--ap-header-main-text) !important;
}

body.apariencia-header #header.stkml-header .stkml-nav {
  background: var(--ap-header-menu-bg) !important;
}

body.apariencia-header #header.stkml-header .stkml-nav-link,
body.apariencia-header #header.stkml-header .stkml-nav-icon {
  color: var(--ap-header-menu-text) !important;
}

body.apariencia-header #header.stkml-header .stkml-nav-link:hover,
body.apariencia-header #header.stkml-header .stkml-nav-icon:hover {
  background: var(--ap-header-hover-bg) !important;
  color: var(--ap-header-hover-text) !important;
}

body.apariencia-header #header.stkml-header .stkml-mobile-row.offer,
body.apariencia-header #header.stkml-header .stkml-offer {
  color: var(--ap-header-offer) !important;
}

body.apariencia-header #header.stkml-header .stkml-badge,
body.apariencia-header #header.stkml-header .stkml-nav-icon b {
  background: var(--ap-color-primary) !important;
  color: var(--ap-button-primary-text) !important;
}

body.apariencia-footer #footer.footer-soundtek {
  background: var(--ap-footer-bg) !important;
  color: var(--ap-footer-text) !important;
}

body.apariencia-footer #footer.footer-soundtek h5,
body.apariencia-footer #footer.footer-soundtek strong,
body.apariencia-footer #footer.footer-soundtek p,
body.apariencia-footer #footer.footer-soundtek small,
body.apariencia-footer #footer.footer-soundtek li {
  color: var(--ap-footer-text) !important;
}

body.apariencia-footer #footer.footer-soundtek a {
  color: var(--ap-footer-links) !important;
}

body.apariencia-footer #footer.footer-soundtek a:hover {
  color: var(--ap-footer-hover) !important;
}

body.apariencia-footer #footer.footer-soundtek .footer-legal,
body.apariencia-footer #footer.footer-soundtek .footer-social a {
  border-color: var(--ap-footer-border) !important;
}

body.apariencia-botones .btn-primary,
body.apariencia-botones .btn-soundtek,
body.apariencia-botones .btn-agregar-detalle,
body.apariencia-botones .st-product-card .btn-primary {
  border-color: var(--ap-button-primary-bg) !important;
  border-radius: var(--ap-button-radius) !important;
  background: var(--ap-button-primary-bg) !important;
  color: var(--ap-button-primary-text) !important;
}

body.apariencia-botones .btn-primary:hover,
body.apariencia-botones .btn-soundtek:hover,
body.apariencia-botones .btn-agregar-detalle:hover,
body.apariencia-botones .st-product-card .btn-primary:hover {
  border-color: var(--ap-button-primary-hover) !important;
  background: var(--ap-button-primary-hover) !important;
}

body.apariencia-botones .btn-dark,
body.apariencia-botones .btn-secondary {
  border-color: var(--ap-button-secondary-bg) !important;
  border-radius: var(--ap-button-radius) !important;
  background: var(--ap-button-secondary-bg) !important;
  color: var(--ap-button-secondary-text) !important;
}

body.apariencia-productos .st-product-card-inner,
body.apariencia-productos .product-thumb-info {
  border: 1px solid var(--ap-product-card-border) !important;
  border-radius: var(--ap-product-radius) !important;
  background: var(--ap-product-card-bg) !important;
  box-shadow: var(--ap-product-shadow) !important;
}

body.apariencia-productos .price .amount,
body.apariencia-productos .st-precio-contado-valor,
body.apariencia-productos .detalle-precio-contado-valor {
  color: var(--ap-product-price) !important;
}

body.apariencia-productos .product-label.label-sale,
body.apariencia-productos .product-estado.oferta,
body.apariencia-productos .st-oferta {
  border-color: var(--ap-product-offer) !important;
  background: var(--ap-product-offer) !important;
  color: #fff !important;
}

body.apariencia-checkout .checkout-page {
  font-family: var(--ap-font-checkout) !important;
}

@media (max-width: 767.98px) {
  body.apariencia-tipografias input,
  body.apariencia-tipografias select,
  body.apariencia-tipografias textarea,
  body.apariencia-tipografias .form-control,
  body.apariencia-tipografias .form-select {
    font-size: 16px;
  }
}