body { padding-top: 58px; }

:root{
  --nav-bg: #ffffff;
  --nav-text: #1f2937;
  --nav-border: #e5e7eb;
  --brand: #2563eb;
}

.navbar-soft {
  background: var(--nav-bg) !important;
  color: var(--nav-text) !important;
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.navbar-soft .navbar-brand,
.navbar-soft .nav-link,
.navbar-soft .navbar-text { color: var(--nav-text) !important; }
.navbar-soft .navbar-toggler { border-color: var(--nav-border); }
.navbar-soft .navbar-toggler-icon{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(31,41,55, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-soft .input-group .input-group-text { border-color: var(--nav-border); }
.navbar-soft .form-control { border-color: var(--nav-border); }

.suggest-box{
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  right: 0;
  z-index: 1050;
  display: none;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 6px 24px rgba(0,0,0,.14);
  border-radius: .5rem;
  background: #fff;
}
.suggest-item small { color:#6c757d }

@media (max-width: 991.98px){
  body { padding-top: 58px; }
  .search-mobile { margin-top: .25rem; }
}

.navbar-brand { font-weight: 700; letter-spacing:.2px }
.card-product .card-img-top { height: 160px; object-fit: contain; background: #fafafa; cursor: zoom-in; }
.badge-filter { cursor:pointer }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fab-cart{
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 1055;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  border: none;
}
.fab-cart .badge{
  position: absolute;
  top: -6px; right: -6px;
  border-radius: 999px;
  font-size: .72rem;
  padding: .25rem .45rem;
}

@keyframes bump { 0%{transform:scale(1)} 20%{transform:scale(1.08)} 60%{transform:scale(.98)} 100%{transform:scale(1)} }
.bump { animation: bump .4s ease; }

.gallery-img { max-height: 70vh; object-fit: contain; background: #111; }

/* --- Sin stock --- */
.card-product{ position: relative; }
.badge-oos{
  position: absolute;
  top: .5rem; left: .5rem;
  z-index: 2;
  pointer-events: none;
}
.card-oos .card-img-top{ filter: grayscale(100%); opacity:.6; }
.card-oos .card-body{ opacity:.9; }

/* Sentinela para infinite scroll */
#sentinel { height: 1px; }
/* Footer fijo */
.site-footer{
  background: #ffffff;
  border-top: 1px solid var(--nav-border);
  box-shadow: 0 -2px 10px rgba(0,0,0,.04);
  padding: .5rem 0;
  z-index: 1040; /* por encima del contenido, por debajo de modales */
}

/* Asegura que el contenido no quede tapado por el footer */
body{
  padding-bottom: calc(64px + env(safe-area-inset-bottom)); /* alto aprox. del footer */
}

/* Ajuste del FAB para no superponer el footer */
.fab-cart{
  bottom: calc(88px + env(safe-area-inset-bottom)); /* subimos el FAB por el footer */
}
.footer-link-mute{
  font-size: .92rem;
  color: #6b7280;           /* gris neutro */
  text-decoration: none;
  border-bottom: 1px dashed #d1d5db; /* subrayado sutil */
  padding-bottom: 1px;
}
.footer-link-mute:hover{
  color: #374151;
  border-bottom-color: #9ca3af;
}

/* =========================
   Modo oscuro automático
   ========================= */
@media (prefers-color-scheme: dark){

  :root{
    --nav-bg: #0f1720;       /* navbar/footer */
    --nav-text: #e5e7eb;     /* textos claros */
    --nav-border: #1f2a37;   /* bordes sutiles */
    --brand: #60a5fa;        /* acento suave */
  }

  body{
    background: #0b1217;     /* fondo general */
    color: #e3e7ef;
  }

  /* Navbar */
  .navbar-soft{
    background: var(--nav-bg) !important;
    color: var(--nav-text) !important;
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.3);
  }
  .navbar-soft .navbar-brand,
  .navbar-soft .nav-link,
  .navbar-soft .navbar-text { color: var(--nav-text) !important; }
  .navbar-soft .form-control,
  .navbar-soft .input-group-text{
    background: #111a22;
    border-color: var(--nav-border);
    color: #cbd5e1;
  }

  /* Footer */
  .site-footer{
    background: var(--nav-bg);
    border-top: 1px solid var(--nav-border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.3);
  }
  .footer-link-mute{
    color: #9aa4b2;
    border-bottom-color: #2a3a4a;
  }
  .footer-link-mute:hover{
    color: #e5e7eb;
    border-bottom-color: #5b6b7a;
  }

  /* Badges filtros */
  .badge.text-bg-primary{ background-color:#1f4ddc !important; }
  .badge.text-bg-secondary{ background-color:#334155 !important; }

  /* Sugerencias de búsqueda */
  .suggest-box{
    background:#101923;
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
    border:1px solid var(--nav-border);
  }
  .list-group-item{
    background:#101923;
    color:#d1d5db;
    border-color:#1e293b;
  }
  .list-group-item.active{
    background:#1b2633;
    border-color:#1b2633;
  }

  /* Cards de productos */
  .card{
    background:#0f1720;
    border:1px solid #1e293b;
    color:#e5e7eb;
  }
  .card-product .card-img-top{
    background:#0b1217; /* contenedor de imagen */
  }
  .text-muted{ color:#94a3b8 !important; }
  .text-primary{ color:#93c5fd !important; }
  .btn-primary{
    background:#2563eb; border-color:#2563eb;
  }
  .btn-primary:hover{
    background:#1d4ed8; border-color:#1d4ed8;
  }
  .btn-outline-danger{ color:#fca5a5; border-color:#7f1d1d; }
  .btn-outline-danger:hover{ background:#7f1d1d; color:#fee2e2; }

  /* “Sin stock” */
  .badge-oos{
    background:#7f1d1d; color:#fee2e2;
  }

  /* Tabla del carrito */
  .table{
    --bs-table-bg: #0f1720;
    --bs-table-color: #e5e7eb;
    --bs-table-border-color: #1e293b;
  }

  /* Spinner */
  .spinner-border{
    --bs-spinner-border-color: #93c5fd;
    --bs-spinner-animation-speed: .75s;
  }

  /* FAB carrito: elevar un poco y mejorar contraste */
  .fab-cart{
    box-shadow: 0 10px 28px rgba(0,0,0,.6);
  }

  /* Alertas (contenedores genéricos) */
  .alert{
    background:#101923; color:#e5e7eb; border-color:#1e293b;
  }
}