/* ================================================== */
/* ESTILOS PARA EL NAVBAR (navbar.css)       */
/* ================================================== */

/* --- Variables (Copiadas para referencia) --- */
:root {
    --primary: #193986;
    --second: #86BE1E;
    --white: #fff;
    --black: #000;
    --bs-primary: #193986;
    --bs-secondary: #86BE1E;
    --bs-light: #F8F8F9;
    --bs-dark: #000103;
    --bs-white: #fff;
    --bs-text-primary: var(--primary);
    --bs-text-secondary: var(--second);
    --border: rgba(25, 57, 134, 0.15);
    --card: #FFFFFF;
    --input-background: #F8F9FA;
    --radius: 10px;
    --muted-foreground: #7A7A7A;
    --shadow-sm: 0 1px 2px 0 rgb(25 57 134 / 0.08);
}

/* --- Clases de utilidad (Bootstrap/estilos.css) --- */
.container-fluid, .container { width: 100%; padding-right: 0.75rem; padding-left: 0.75rem; margin-right: auto; margin-left: auto; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }
.d-flex { display: flex !important; }
.d-none { display: none !important; }
@media (min-width: 768px) { .d-md-flex { display: flex !important; } }
@media (min-width: 1200px) { .d-xl-flex { display: flex !important; } }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.ps-4 { padding-left: 1.5rem !important; }
.pe-4 { padding-right: 1.5rem !important; }
.me-0 { margin-right: 0 !important; }
.me-2 { margin-right: 0.5rem !important; }
.me-3 { margin-right: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-3 { margin-top: 1rem !important; }
.text-white { color: var(--white) !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.5) !important; }
.text-primary { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.rounded-circle { border-radius: 50% !important; }
.border-end { border-right: 1px solid #dee2e6 !important; }
.position-relative { position: relative !important; }
.sticky-top { position: sticky; top: 0; z-index: 1020; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-wrap { flex-wrap: wrap !important; }

/* --- Estilos Específicos del Header (de style.css y estilos.css) --- */
.btn { font-weight: 600; transition: .5s; }
.btn-sm-square { width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; }
.b-deg-b { border: solid 3px transparent; border-radius: 50% !important; background-image: linear-gradient(white, white), linear-gradient(to bottom, var(--second), var(--primary) 115%); background-origin: border-box; background-clip: padding-box, border-box; }
.bg-white { background-color: var(--bs-light) !important; }
.ma-tb { margin-top: auto; margin-bottom: auto; }
.font-weight-black { font-weight: 900 !important; }
.font-weight-bold { font-weight: 700 !important; }
.text-hg { transition: all ease-in-out 0.5s; }
.text-hg:hover { color: var(--second); }

/* Topbar */
.topbar .top-info { letter-spacing: 1px; }
.topbar .top-link { display: flex; align-items: center; justify-content: center; }
.topbar .top-link a { margin-right: 10px; }
.top-message { flex-grow: 1; text-align: center; }
.social-icons a { color: var(--white); transition: transform 0.2s; }

/* Navbar */
.navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.navbar .navbar-brand { padding-top: 0; padding-bottom: 0; margin-right: 1rem; }
.logo { width: auto; height: 55px; display: block; }
.navbar-toggler { padding: 0.25rem 0.75rem; font-size: 1.25rem; line-height: 1; background-color: transparent; border: 1px solid rgba(0,0,0,.1); border-radius: 0.25rem; }
.navbar-dark .navbar-toggler-icon{ display: inline-block; width: 1.5em; height: 1.5em; vertical-align: middle; background-repeat: no-repeat; background-position: center; background-size: 100%; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.navbar-collapse { flex-basis: 100%; flex-grow: 1; align-items: center; }
.navbar-nav { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; list-style: none; }
.navbar-nav .nav-link { padding: 0.5rem 1rem; color: var(--primary); font-size: 1rem; font-weight: 700; outline: none; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--second) !important; }
@media (min-width: 992px) {
    .navbar-expand-lg { flex-wrap: nowrap; justify-content: flex-start; }
    .navbar-expand-lg .navbar-nav { flex-direction: row; }
    .navbar-expand-lg .navbar-nav .nav-link { padding-right: 1rem; padding-left: 1rem; }
    .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
    .navbar-expand-lg .navbar-toggler { display: none; }
    .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; }
}
#phone-tada i { color: var(--primary); }

/* --- ESTILOS PARA LA NUEVA BARRA DE CONTROLES --- */

.catalog-header {
  background-color: var(--card); /* Fondo blanco */
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: sticky;
  /* El 'top' se aplica con JS */
  z-index: 1019; /* Debajo del navbar principal */
}
.catalog-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.catalog-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0;
  /*white-space: nowrap;*/
}
.catalog-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-grow: 1;
  justify-content: flex-end;
}

/* Controles (Buscador, Filtros, Vistas, Carrito) */
.search-wrapper { position: relative; flex-grow: 1; max-width: 400px; }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); pointer-events: none; }
.search-wrapper input { width: 100%; height: 2.5rem; padding: 0.5rem 2.5rem 0.5rem 2.5rem; background-color: var(--input-background); border: 1px solid var(--border); border-radius: var(--radius); outline: none; transition: all 0.2s; color: var(--foreground); }
.search-wrapper input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(25, 57, 134, 0.1); }
.clear-search { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--muted-foreground); background: none; border: none; cursor: pointer; padding: 0.25rem; display: flex; align-items: center; justify-content: center; }

.btn-filter, .btn-view, .btn-cart { display: flex; align-items: center; justify-content: center; height: 2.5rem; padding: 0.5rem 1rem; background-color: var(--background); border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; white-space: nowrap; color: var(--foreground); gap: 0.5rem; cursor: pointer; flex-shrink: 0; }
.btn-filter:hover, .btn-view:hover, .btn-cart:hover { background-color: rgba(134, 190, 30, 0.1); border-color: var(--second); }
.btn-view { width: 2.5rem; padding: 0; color: var(--muted-foreground); }
.btn-view.active { background-color: var(--primary); color: var(--white); border-color: var(--primary); }
.btn-cart { width: 2.75rem; padding: 0; color: var(--primary); position: relative; }
.filter-count, .cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem; background-color: var(--primary); color: var(--white); border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
.cart-badge { position: absolute; top: -5px; right: -5px; background-color: var(--second); border: 2px solid var(--card); }

/* --- Responsive (Navbar + Controls) --- */
@media (max-width: 1024px) {
  /* Oculta texto de topbar (si lo añades de nuevo) */
  .top-message { display: none !important; }
}
@media (max-width: 991.98px) {
    .navbar-collapse { background-color: var(--bs-light); padding: 1rem; margin-top: 0.5rem; border-radius: var(--radius); box-shadow: var(--shadow-md); }
    .navbar-nav .nav-link { padding: 0.5rem 0; }
    /* El carrito se queda en el navbar en móvil */
    .catalog-controls .btn-cart { display: none; } /* Oculta el de la barra de controles */

    .catalog-header-content { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .catalog-title { width: 100%; text-align: center; }
    .catalog-controls { width: 100%; justify-content: space-between; }
    .catalog-controls .search-wrapper { max-width: none; }

    /* --- INICIO DE NUEVO BLOQUE --- */
    /* Estilos para uniformar botones de nav móvil */
    .navbar .navbar-toggler.border-black {
      border-color: var(--border) !important; /* Borde suave */
      border-radius: var(--radius);
      height: 2.5rem; /* Misma altura que el carrito */
      width: 2.5rem; /* Misma anchura */
      padding: 0; /* Quitar padding */
      font-size: 1rem; /* Reducir icono */
    }
    
    .navbar .btn-cart.d-lg-none {
       width: 2.5rem; /* Misma anchura */
       height: 2.5rem; /* Misma altura */
       padding: 0; /* Quitar padding */
       /* Los márgenes (ms-auto me-2) se controlan desde el HTML */
    }
    /* --- FIN DE NUEVO BLOQUE --- */
}
@media (max-width: 640px) {
  .catalog-controls { flex-wrap: wrap; justify-content: center; }
  .catalog-controls .search-wrapper { flex-grow: 1; order: 1; width: 100%;}
  .catalog-controls .btn-filter { flex-grow: 1; order: 2;} /* Crece para llenar espacio */
  .catalog-controls .view-toggle { order: 3; margin-left: auto;}
  /* Ocultamos el carrito de aquí (ya está en el menú hamburguesa) */
  .catalog-controls .btn-cart { display: none; } 
  
  .catalog-controls .search-wrapper input { padding-left: 2rem; padding-right: 2rem; }
  .catalog-controls .search-icon { left: 0.5rem; }
  .catalog-controls .clear-search { right: 0.5rem; }
  .catalog-header-content.container {
  max-width: none;}
}