/**
 * Tema Tienda - Equipos de cómputo
 * Colores vivos, sin temas oscuros. Paleta fresca y tecnológica.
 */
:root {
  /* Primario: azul brillante (tecnología, confianza) */
  --tienda-primary: #0096FF;
  --tienda-primary-dark: #0077CC;
  --tienda-primary-light: #4DB8FF;
  /* Acento: naranja coral (ofertas, CTAs, energía) */
  --tienda-accent: #FF6B35;
  --tienda-accent-hover: #E55A2B;
  --tienda-accent-light: #FFB088;
  /* Éxito: verde (precios, garantía, seguro) */
  --tienda-success: #00C853;
  --tienda-success-dark: #00A843;
  /* Fondos claros */
  --tienda-bg: #F0F7FF;
  --tienda-bg-white: #FFFFFF;
  --tienda-card-border: #E3EFF9;
  /* Texto */
  --tienda-text: #1A2B3C;
  --tienda-text-muted: #5C6B7E;
  /* Footer */
  --tienda-footer-bg: #0077CC;
  --tienda-footer-text: #FFFFFF;
}

/* Base: fondo claro, nunca oscuro */
body {
  background-color: var(--tienda-bg) !important;
  color: var(--tienda-text);
}

.bg {
  background-color: var(--tienda-bg) !important;
}

.bg-white {
  background-color: var(--tienda-bg-white) !important;
}

/* Header / Nav: barra primaria viva */
.section-header .header-main {
  background-color: var(--tienda-bg-white);
  border-bottom: 1px solid var(--tienda-card-border);
}

.navbar-main.bg-primary,
.navbar-main[style*="background"],
.navbar-main {
  background: linear-gradient(135deg, var(--tienda-primary) 0%, var(--tienda-primary-dark) 100%) !important;
  border: none !important;
}

.navbar-main .nav-link.text-white,
.navbar-main .nav-link {
  color: #fff !important;
  font-weight: 600;
}

.navbar-main .nav-link:hover {
  color: var(--tienda-accent-light) !important;
}

.navbar-main .btn-light {
  background: #fff;
  color: var(--tienda-primary);
  border: none;
}

.navbar-main .btn-light:hover {
  background: var(--tienda-accent);
  color: #fff;
  border: none;
}

/* Enlaces y botones primarios */
.text-primary,
a.text-primary,
.widget-header a:hover,
[class*='card-product'] a.title:hover,
.section-footer ul a:hover {
  color: var(--tienda-primary) !important;
}

.btn-primary,
.btn-primary.text-white {
  background: linear-gradient(135deg, var(--tienda-primary) 0%, var(--tienda-primary-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary.text-white:hover {
  background: linear-gradient(135deg, var(--tienda-primary-dark) 0%, #005A99 100%) !important;
  border: none !important;
  color: #fff !important;
}

/* Acento naranja para ofertas y CTAs secundarios */
.btn-warning,
.badge-danger {
  background-color: var(--tienda-accent) !important;
  border-color: var(--tienda-accent) !important;
  color: #fff !important;
}

.btn-warning:hover {
  background-color: var(--tienda-accent-hover) !important;
  border-color: var(--tienda-accent-hover) !important;
  color: #fff !important;
}

/* Precios en verde vivo */
.card-product-grid .price.h5.text-primary,
.card-product-grid .price,
var.price {
  color: var(--tienda-success) !important;
  font-weight: 700;
}

/* Cards de producto: blanco, borde suave, sombra ligera */
.card-product-grid,
.card {
  background: var(--tienda-bg-white);
  border: 1px solid var(--tienda-card-border);
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 150, 255, 0.06);
}

.card-product-grid:hover {
  box-shadow: 0 8px 24px rgba(0, 150, 255, 0.12);
  border-color: var(--tienda-primary-light);
}

.card-product-grid .info-wrap {
  border-color: var(--tienda-card-border);
}

.card-product-grid .bottom-wrap.border-primary {
  border-color: var(--tienda-primary-light) !important;
}

/* Inputs y búsqueda */
.form-control.border-primary,
.input-group .border-primary {
  border-color: var(--tienda-primary) !important;
}

.form-control:focus {
  border-color: var(--tienda-primary);
  box-shadow: 0 0 0 0.2rem rgba(0, 150, 255, 0.25);
}

/* Footer: primario vivo, no oscuro */
.section-footer {
  background: linear-gradient(180deg, var(--tienda-footer-bg) 0%, #005A99 100%);
  color: var(--tienda-footer-text);
}

.section-footer .title,
.section-footer h3.title {
  color: #fff !important;
}

.section-footer ul a,
.section-footer a {
  color: rgba(255, 255, 255, 0.9);
}

.section-footer ul a:hover,
.section-footer a:hover {
  color: var(--tienda-accent-light);
}

.section-footer .text-muted,
.section-footer .text-dark,
.footer-copyright .text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

.section-footer a.text-dark:hover {
  color: var(--tienda-accent-light) !important;
}

.footer-copyright {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Iconos sociales en footer */
.section-footer .fa-facebook,
.section-footer .fa-instagram,
.section-footer .fa-whatsapp {
  color: #fff !important;
}

.section-footer .fa-facebook:hover,
.section-footer .fa-instagram:hover,
.section-footer .fa-whatsapp:hover {
  color: var(--tienda-accent-light) !important;
}

/* Títulos de sección */
.section-title.text-primary,
.section-heading .section-title {
  color: var(--tienda-primary) !important;
}

.section-title {
  color: var(--tienda-text);
}

/* Modales */
.modal-content {
  border-radius: 12px;
  border: 1px solid var(--tienda-card-border);
  box-shadow: 0 8px 32px rgba(0, 150, 255, 0.15);
}

.modal-header {
  background: var(--tienda-bg);
  border-bottom: 1px solid var(--tienda-card-border);
}

/* Carrito dropdown */
.dropdown-menu {
  border-radius: 12px;
  border: 1px solid var(--tienda-card-border);
  box-shadow: 0 8px 24px rgba(0, 150, 255, 0.12);
}

/* Hover genérico azul */
.hover-bg:hover {
  background: var(--tienda-primary) !important;
}

/* Listas y bullets */
.list-normal li:before {
  color: var(--tienda-primary);
}

.list-check > li:before {
  color: var(--tienda-success);
}

/* Botones outline */
.btn-outline-primary {
  color: var(--tienda-primary);
  border-color: var(--tienda-primary);
}

.btn-outline-primary:hover {
  background: var(--tienda-primary);
  color: #fff;
  border-color: var(--tienda-primary);
}

/* Carrusel / slider: controles visibles y vivos */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--tienda-primary);
  border-radius: 50%;
  padding: 1rem;
}

.carousel-indicators li.active {
  background-color: var(--tienda-primary);
}

.carousel-indicators li {
  background-color: var(--tienda-primary-light);
}