/*
 * Sistema visual AE: colores de marca del store.
 * Spec: docs/guias/SISTEMA-VISUAL-AE.md
 * Se carga después de styles.css (Ecomus) y redefine sus variables, así que
 * todo lo que ya usa var(--primary) / var(--main) toma la paleta AE.
 * En CSS nuevo usar siempre las variables --xoey-*, nunca el hexadecimal.
 */

:root {
  /* Paleta AE (definida por la marca) */
  --xoey-rosa-ae: #C95778;
  --xoey-rosa-ae-rgb: 201, 87, 120;
  --xoey-rosa-oscuro: #B63D5D;
  --xoey-rosa-suave: #FBECEF;
  --xoey-fondo: #FFFFFF;
  --xoey-texto: #171717;
  --xoey-secundario: #707070;

  /* Derivado: borde fino de botones secundarios y tarjetas rosa */
  --xoey-borde-rosa: rgba(var(--xoey-rosa-ae-rgb), 0.35);

  /* Variables de la plantilla Ecomus (styles.css) */
  --primary: var(--xoey-rosa-ae);
  --main: var(--xoey-texto);
  --text: var(--xoey-secundario);
  --white: var(--xoey-fondo);

  /* Variables de Bootstrap 5.3 */
  --bs-primary: var(--xoey-rosa-ae);
  --bs-primary-rgb: var(--xoey-rosa-ae-rgb);
  --bs-link-color: var(--xoey-rosa-oscuro);
  --bs-link-color-rgb: 182, 61, 93;
  --bs-link-hover-color: var(--xoey-rosa-ae);
  --bs-link-hover-color-rgb: var(--xoey-rosa-ae-rgb);
}

/* Botón principal (CTA): Rosa AE con texto blanco.
   Blanco sobre #C95778 da 4.1:1, por eso el texto va en 600. */
.tf-btn.btn-fill,
.btn.btn-fill,
.xoey-btn-primary {
  background-color: var(--xoey-rosa-ae);
  border-color: var(--xoey-rosa-ae);
  color: var(--xoey-fondo);
  font-weight: 600;
}

.tf-btn.btn-fill:hover,
.tf-btn.btn-fill:focus-visible,
.btn.btn-fill:hover,
.btn.btn-fill:focus-visible,
.xoey-btn-primary:hover,
.xoey-btn-primary:focus-visible {
  background-color: var(--xoey-rosa-oscuro);
  border-color: var(--xoey-rosa-oscuro);
  color: var(--xoey-fondo);
}

/* Botón secundario: fondo blanco, texto rosa oscuro, borde fino */
.tf-btn.btn-outline,
.btn.btn-outline,
.xoey-btn-secondary {
  background-color: var(--xoey-fondo);
  border: 1px solid var(--xoey-borde-rosa);
  color: var(--xoey-rosa-oscuro);
  font-weight: 600;
}

.tf-btn.btn-outline:hover,
.tf-btn.btn-outline:focus-visible,
.btn.btn-outline:hover,
.btn.btn-outline:focus-visible,
.xoey-btn-secondary:hover,
.xoey-btn-secondary:focus-visible {
  background-color: var(--xoey-rosa-suave);
  border-color: var(--xoey-rosa-ae);
  color: var(--xoey-rosa-oscuro);
}

/* Bootstrap .btn-primary (formularios como libro de reclamaciones) */
.btn-primary {
  --bs-btn-bg: var(--xoey-rosa-ae);
  --bs-btn-border-color: var(--xoey-rosa-ae);
  --bs-btn-color: var(--xoey-fondo);
  --bs-btn-hover-bg: var(--xoey-rosa-oscuro);
  --bs-btn-hover-border-color: var(--xoey-rosa-oscuro);
  --bs-btn-hover-color: var(--xoey-fondo);
  --bs-btn-active-bg: var(--xoey-rosa-oscuro);
  --bs-btn-active-border-color: var(--xoey-rosa-oscuro);
  --bs-btn-disabled-bg: var(--xoey-rosa-ae);
  --bs-btn-disabled-border-color: var(--xoey-rosa-ae);
  --bs-btn-focus-shadow-rgb: var(--xoey-rosa-ae-rgb);
}

/* --- Pendiente de colores (ficha + Home) --- */

/* Talla seleccionada: Rosa AE (Ecomus usa --main ≈ negro) */
.variant-picker-item .variant-picker-values input:checked + label:not(.color-btn) {
  border-color: var(--xoey-rosa-ae);
}

.variant-picker-item .variant-picker-values input:checked + label.style-text:not(.color-btn) {
  background-color: var(--xoey-rosa-ae);
  border-color: var(--xoey-rosa-ae);
}

.variant-picker-item .variant-picker-values input:checked + label.style-text:not(.color-btn) p {
  color: var(--xoey-fondo);
}

/* Anillo del color seleccionado */
.variant-picker-item .variant-picker-values input:checked + label.color-btn,
.variant-picker-item .color-btn.active {
  border-color: var(--xoey-rosa-ae) !important;
}

/* Badge de marca / destacados en ficha de producto */
.tf-product-info-badges .badges {
  border-color: var(--xoey-borde-rosa);
  color: var(--xoey-rosa-oscuro);
}

/* Subrayado de pestaña activa en Home (Más vendidos / Novedades / Destacados) */
.widget-tab-3 .nav-tab-item a.active {
  border-bottom-color: var(--xoey-rosa-ae);
}

.widget-tab-3 .nav-tab-item a:hover,
.widget-tab-3 .nav-tab-item a.active {
  color: var(--xoey-rosa-oscuro);
}