/* =========================
   SELLO URBANO THEME (PRO)
   ========================= */

:root{
  --su-bg: #0b1220;
  --su-surface: #0f172a;
  --su-surface-2: #111827;
  --su-border: rgba(255,255,255,.08);

  --su-text: #e5e7eb;
  --su-muted: #9ca3af;

  --su-accent: #f97316;
  --su-accent-2: #fb923c;

  --su-shadow: 0 18px 35px rgba(61, 25, 25, 0.35);
  --su-radius: 16px;
}

html, body{
  background: var(--su-bg);
  color: var(--su-text);
}

a{
  color: var(--su-text);
}
a:hover{
  color: var(--su-accent);
}

.navbar, .dropdown-menu{
  background: rgba(15,23,42,.85) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--su-border);
}

.container{
  max-width: 1180px;
}

.su-surface{
  background: var(--su-surface);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
}

.su-card{
  background: var(--su-surface);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.su-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 45px rgba(0,0,0,.45);
  border-color: rgba(249,115,22,.35);
}

/* Imágenes consistentes */
.su-card-img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  background: #0b1220;
}

/* Botones */
.btn-su{
  background: linear-gradient(135deg, var(--su-accent), var(--su-accent-2));
  border: none;
  color: #111827;
  font-weight: 700;
  border-radius: 999px;
  padding: .65rem 1rem;
}
.btn-su:hover{
  filter: brightness(1.05);
}

.btn-su-outline{
  border: 1px solid rgba(255,255,255,.18);
  color: var(--su-text);
  border-radius: 999px;
  padding: .65rem 1rem;
  background: transparent;
}
.btn-su-outline:hover{
  border-color: rgba(249,115,22,.55);
  color: var(--su-accent);
}

/* Inputs */
.form-control, .form-select{
  background: rgba(17,24,39,.7);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--su-text);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(249,115,22,.55);
  box-shadow: 0 0 0 .2rem rgba(249,115,22,.15);
}

/* Badges */
.badge-su{
  background: rgba(249,115,22,.14);
  border: 1px solid rgba(249,115,22,.35);
  color: var(--su-accent);
}

/* Secciones */
.su-section-title{
  font-weight: 800;
  letter-spacing: .2px;
}

/* Footer */
.su-footer{
  border-top: 1px solid var(--su-border);
  background: rgba(15,23,42,.6);
}

/* WhatsApp flotante */
.su-whatsapp-float{
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: #25D366;
  color: #fff;
  font-size: 26px;
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
  z-index: 9999;
  transition: transform .15s ease;
}
.su-whatsapp-float:hover{ transform: translateY(-3px); color:#fff; }


/* ===== NAVBAR PRO (Torque-like) ===== */
.su-nav{
  background: rgba(15, 23, 42, .75) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--su-border);
}

.su-nav .nav-link{
  color: rgba(229,231,235,.85) !important;
  font-weight: 600;
  padding: .65rem .9rem;
  border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}

.su-nav .nav-link:hover{
  background: rgba(255,255,255,.06);
  color: #fff !important;
}

.su-logo-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--su-accent), var(--su-accent-2));
  box-shadow: 0 0 0 4px rgba(249,115,22,.15);
}

.su-cart-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.su-cart-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;

  background: rgba(249,115,22,.18);
  border: 1px solid rgba(249,115,22,.45);
  color: var(--su-accent);
}

/* ===== HERO PRO ===== */
.su-hero{
  position: relative;
}

.su-surface-plain{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}

.su-hero-img{
  height: 420px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

@media (max-width: 767px){
  .su-hero-img{ height: 280px; }
}

.su-carousel{
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  overflow: hidden;
}

.carousel-control-prev-icon,
.carousel-control-next-icon{
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.65));
}

/* ===== HERO ===== */
.su-surface-plain{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}

.su-hero-img{
  height: 420px;
  object-fit: cover;
  filter: contrast(1.05) saturate(1.05);
}

@media (max-width: 767px){
  .su-hero-img{ height: 280px; }
}

.su-carousel{
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  overflow: hidden;
}

/* ===== CATEGORÍAS VISUALES ===== */
.su-cat-card{
  display:block;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.09);
  text-decoration: none;
  color: var(--su-text);
  transition: transform .18s ease, border-color .18s ease;
  min-height: 120px;
}

.su-cat-card:hover{
  transform: translateY(-4px);
  border-color: rgba(249,115,22,.35);
  color: var(--su-text);
}

.su-cat-title{
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 4px;
}

.su-cat-sub{
  color: var(--su-muted);
  font-size: 13px;
}

/* ===== PAGINACIÓN PRO ===== */
.su-pagination .page-link{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--su-text);
  border-radius: 999px;
  margin: 0 4px;
  padding: .45rem .85rem;
}

.su-pagination .page-item.active .page-link{
  background: rgba(249,115,22,.18);
  border-color: rgba(249,115,22,.45);
  color: var(--su-accent);
  font-weight: 800;
}
.su-pagination .page-item.disabled .page-link{
  opacity: .5;
}

/* Detalle producto */
.su-product-main img{
  transition: transform .25s ease;
}
.su-product-main img:hover{
  transform: scale(1.02);
}

/* Checkout */
.list-group-item{
  border-color: rgba(255,255,255,.08);
}

.list-group-item{
  border-color: rgba(255,255,255,.08) !important;
}

/* Texto destacado del hero */
.su-hero-text {
  color: #fdfdfd; /* naranja Sello Urbano */
  font-weight: 500;
}

.table > :not(caption) > * > *{
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
  color: var(--su-text);
}
.table thead th{
  color: rgba(255,255,255,.65);
  font-weight: 600;
}

/* =========================
   AUTH (LOGIN / REGISTER)
   ========================= */

.su-auth-page{
  /* como ya estás dentro de main.container, no forzamos alturas */
}

.su-auth-subtitle{
  color: var(--su-muted);
}

.su-auth-card{
  background: rgba(15,23,42,.78);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius);
  box-shadow: var(--su-shadow);
  backdrop-filter: blur(10px);
}

.su-input{
  border-radius: 14px;
  padding: .75rem .9rem;
}

.su-auth-link{
  color: rgba(229,231,235,.85);
  text-decoration: none;
}
.su-auth-link:hover{
  color: var(--su-accent);
  text-decoration: underline;
}

/* autofill Chrome */
.su-auth-page input:-webkit-autofill,
.su-auth-page input:-webkit-autofill:hover,
.su-auth-page input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--su-text);
  -webkit-box-shadow: 0 0 0px 1000px rgba(17,24,39,.85) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.dropdown-menu .dropdown-item{
  color: rgba(229,231,235,.9);
}
.dropdown-menu .dropdown-item:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}
.dropdown-divider{
  border-color: rgba(255,255,255,.10);
}

/* Dropdown theme */
.dropdown-menu{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px;
}

.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item-text{
  color: rgba(229,231,235,.9);
}

.dropdown-menu .dropdown-item:hover{
  background: rgba(255,255,255,.06);
  color: #fff;
}

.dropdown-divider{
  border-color: rgba(255,255,255,.10);
}