:root {
  /* Colores base */
  --color-primario: #03289b;   /* Azul principal */
  --color-secundario: #e00322; /* Rojo acento */
  --color-blanco: #ffffff;     /* Fondo / texto invertido */

  /* Variaciones de primario */
  --primario-oscuro: #021d73;  /* Para navbar / footer */
  --primario-claro: #4766d4;   /* Hover en botones, backgrounds suaves */
  --primario-suave: #e5e9f7;   /* Fondos de secciones, cards */

  /* Variaciones de secundario */
  --secundario-oscuro: #b0021a; /* Hover o texto en fondo claro */
  --secundario-claro: #ff5a73;  /* Estados activos, badges */
  --secundario-suave: #fde5e8;  /* Fondos de alerta, resaltados */

  /* Grises de apoyo */
  --gris-oscuro: #222222;   /* Texto principal */
  --gris-medio: #666666;    /* Texto secundario */
  --gris-claro: #f5f5f5;    /* Fondos neutros, separadores */

  /* Feedback (extra) */
  --exito: #28a745;
  --alerta: #ffc107;
  --error: #dc3545;
}


/* Helpers de color */
.color-primario { background-color: var(--color-primario); color: var(--color-blanco); }
.color-secundario { background-color: var(--color-secundario); color: var(--color-blanco); }
.color-blanco-primario { background-color: var(--color-blanco); color: var(--color-primario); }
.color-blanco-secundario { background-color: var(--color-blanco); color: var(--color-secundario); }


/* =========================
   Navbar (mobile-first)
   ========================= */
/* Sobre-escribe bg-primary / text-bg-primary de Bootstrap con tu paleta */
.bg-primary,
.text-bg-primary { background-color: var(--color-primario) !important; }
.navbar,
.navbar.navbar-dark { background-color: var(--color-primario); }

.navbar {
  box-sizing: border-box;
  height: 64px;                /* más compacto en móvil */
  font-weight: 700;
  font-size: 1rem;
  box-shadow: var(--shadow);
}

/* Logos responsivos */
.logo-nav { height: 36px; width: auto; display: block; }
.logo-offcanvas { height: 28px; width: auto; display: block; }

/* Links dentro de navbar */
.navbar .nav-link {
  color: var(--color-blanco);
  transition: color .2s ease, transform .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--secundario-claro);
  transform: translateY(-1px);
}

/* Botón toggler con buen contraste */
.navbar .navbar-toggler {
  border-color: rgba(255,255,255,.35);
  padding: .5rem .65rem;
  border-radius: var(--radius-sm);
}
.navbar .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,255,255,.25); }

/* =========================
   Dropdown (carrito)
   ========================= */
.navbar .dropdown-menu {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .5rem;
}
#carritoBadge {
  font-size: .7rem;
  min-width: 1.25rem;
  line-height: 1.1;
}

/* =========================
   Botones sobre fondo primario
   ========================= */
.navbar .btn.btn-light {
  color: var(--gris-oscuro);
  border: 0;
  border-radius: var(--radius-sm);
}
.navbar .btn.btn-light:hover { background-color: var(--gris-claro); }

/* =========================
   Offcanvas (menú + búsqueda)
   ========================= */
.offcanvas.text-bg-primary {
  color: var(--color-blanco);
  background-color: var(--primario-oscuro) !important;
}
.offcanvas .btn-close { filter: invert(1) grayscale(100%); }
.offcanvas .btn {
  border-radius: var(--radius-sm);
}
.offcanvas .btn.btn-light {
  color: var(--gris-oscuro);
}

/* =========================
   Buscadores
   ========================= */
/* Desktop: input integrado en navbar */
@media (min-width: 992px) {
  .navbar form[role="search"] .form-control {
    border: none;
  }
  .navbar form[role="search"] .btn {
    border: none;
  }
}

/* Mobile: offcanvas-top con input grande */
#offcanvasSearch .form-control {
  height: 3rem;
  font-size: 1.05rem;
}
#offcanvasSearch .btn {
  height: 3rem;
}

/* =========================
   Menú con “divisor” (uso desktop)
   ========================= */
.menu-divisor .nav-item:not(:last-child) {
  border-right: 1px solid var(--primario-claro);
  margin-right: 10px;
  padding-right: 10px;
}

/* =========================
   Accesibilidad / Focus
   ========================= */
:focus-visible {
  outline: 3px solid var(--secundario-claro);
  outline-offset: 2px;
}

/* =========================
   Preferencia de usuario
   ========================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* =========================
   Ajustes responsive finos
   ========================= */
@media (max-width: 991.98px) {
  .navbar { height: 64px; }
  .navbar .btn,
  .navbar .navbar-toggler { padding: .5rem .75rem; }
}

/* Opcional: hover de alto contraste para acciones primarias */
.btn-warning { color: #000; }
.btn-warning:hover { filter: brightness(0.95); }