/* =========================================================
   Tu Mejor Negocio — Estilos base (versión UI-2025-11)
   ESTE ARCHIVO REEMPLAZA COMPLETO /assets/style.css
   ========================================================= */

/* ---------- Variables & base ---------- */
:root{
  --bg:#0b1430;
  --ink:#0c1a45;
  --ink-2:#1a2452;
  --muted:#6a7da5;

  --brand:#0a65ff;
  --brand-2:#6e8bff;

  --ok:#06c167;
  --warn:#ffb703;
  --hot:#ff4d6d;

  --surface:#ffffff;
  --surface-2:#f5f7fb;
  --line:#e9edf7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit}
img{max-width:100%;display:block}

/* ---------- Layout helpers ---------- */
.container{max-width:1200px; margin:0 auto; padding:0 16px}
.grid{display:grid; gap:16px}

/* ---------- Header / Hero ---------- */
.site-header{
  background:linear-gradient(180deg, #0a1027 0%, #0b1430 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.site-header .hero{padding:18px 0}
.hero-title{
  font-size:2.2rem; font-weight:900; letter-spacing:.4px; margin:6px 0 2px;
}
.brandmark{display:flex; align-items:center; gap:12px}
.logo-mark{width:42px; height:42px}

/* ---------- Top actions (login/cart/admin) ---------- */
.header-row{
  display:flex; justify-content:flex-end; align-items:center; gap:10px;
  padding:10px 0;
}
.badge{
  display:inline-block; min-width:22px; text-align:center;
  padding:.15rem .4rem; border-radius:999px; font-weight:800; font-size:.85rem;
  background:#00bfff; color:#fff;
}
#cartBadge{margin-left:6px}

/* ---------- Pill / trustbar ---------- */
.pill{
  display:inline-block; padding:.35rem .6rem; border-radius:999px;
  background:rgba(255,255,255,.08); color:#dfe6ff; font-weight:700;
  border:1px solid rgba(255,255,255,.15)
}
.trustbar{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none;
  background:linear-gradient(135deg,var(--brand),#004fff);
  color:#fff; border:0; padding:.65rem 1rem; border-radius:12px;
  font-weight:800; box-shadow:0 6px 16px rgba(10,101,255,.35);
  transition:transform .18s ease, filter .18s ease
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn:disabled{opacity:.55; cursor:not-allowed}

.btn-ghost{
  background:transparent; color:#fff;
  border:1px solid rgba(255,255,255,.25); padding:.55rem .9rem; border-radius:12px;
  font-weight:700;
}
.btn-ghost.btn-dark{
  color:var(--ink); border:1px solid #dfe6ff; background:#fff;
}
.btn-small{padding:.45rem .75rem; border-radius:10px; font-weight:700}
.btn-danger{background:linear-gradient(135deg,#ff4d6d,#ff7a59)}
.btn-success{background:linear-gradient(135deg,#00c175,#06a65e)}

/* Enlaces principales (navbar) */
.nav-link{color:#dfe6ff; text-decoration:none; font-weight:700}
.nav-link:hover{color:#fff}

/* ---------- Cards / listas ---------- */
.card{
  background:#fff; color:#111; border-radius:16px; border:1px solid var(--line);
  box-shadow:0 8px 30px rgba(13,31,67,.12);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-2px); box-shadow:0 14px 38px rgba(13,31,67,.18)}
.card .title{font-weight:900; color:var(--ink); margin:.2rem 0}
.card .price{font-size:1.15rem; font-weight:900; color:var(--ink)}
.card .desc{color:#2b3352; line-height:1.4}
.card .thumb img{width:100%; height:auto; border-radius:12px}
.inline{display:flex; justify-content:space-between; align-items:center; gap:8px}

/* Badges para productos */
.badge-hot{background:linear-gradient(135deg,var(--hot), #ff7a59); color:#fff; font-weight:800; padding:.22rem .55rem; border-radius:999px}
.badge-new{background:#e9f2ff; color:#204fff; font-weight:800; padding:.22rem .55rem; border-radius:999px}

/* ---------- Inputs / Formularios ---------- */
input, select, textarea{
  width:100%; padding:10px; border-radius:12px; border:1px solid #ccd5ff;
  background:#fff; color:#111;
}
input:focus, select:focus, textarea:focus{outline:3px solid rgba(110,139,255,.25)}
label{font-weight:700; color:var(--ink);}

/* ---------- Listado de productos (grid genérico) ---------- */
.grid.products{
  grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
}
.products .card{padding:12px}
.products .card .cat{color:var(--muted); font-weight:700; font-size:.9rem}

/* ---------- Páginas claras (cart/checkout/admin) ---------- */
main .card, .page-light{background:#fff; color:#111}

/* Tabla genérica (admin, listas) */
.table{
  width:100%; border-collapse:collapse; background:#fff; color:#111; border-radius:14px; overflow:hidden;
  border:1px solid var(--line)
}
.table th, .table td{padding:12px; border-bottom:1px solid var(--line); text-align:left}
.table thead th{background:#f4f7ff; color:#1c275c; font-weight:800}
.table tr:last-child td{border-bottom:0}

/* ---------- Carrito ---------- */
.qty-input{
  width:72px; padding:8px; text-align:center; border-radius:10px; border:1px solid #bbb;
  background:#0c1a45; color:#fff; font-weight:700; box-shadow:0 0 0 rgba(0,0,0,0)
}
.money{white-space:nowrap; font-weight:800; color:#111}

/* Botones dentro de TARJETAS claras (soluciona botón blanco en "Seguir comprando") */
.card a.btn, .card .btn{
  background:linear-gradient(135deg,var(--brand),#004fff) !important;
  color:#fff !important; border:0 !important; padding:.65rem 1rem; border-radius:12px;
  font-weight:800; box-shadow:0 6px 16px rgba(10,101,255,.25);
}
.card .btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.card .btn-remove{background:linear-gradient(135deg,#ff4d6d,#d00000) !important}

/* ---------- Fichas de producto ---------- */
.big{width:100%; height:auto; border-radius:12px; background:var(--surface-2)}
.thumbs{display:flex; gap:8px; overflow:auto}
.thumbs img{height:72px; width:auto; border-radius:10px; border:2px solid #eaefff; cursor:pointer}

/* ---------- Mensajes ---------- */
.msg{padding:10px 12px; border-radius:8px; margin:10px 0}
.msg.ok{background:#e9f9ef; border:1px solid #bce4c7; color:#134b2f}
.msg.err{background:#fff1f0; border:1px solid #f5c2c7; color:#842029}

/* ---------- Footer ---------- */
.site-footer{padding:24px 0; border-top:1px solid rgba(255,255,255,.08); color:#dfe6ff}
.site-footer small{color:#c9d3ff}

/* ---------- Utilidades ---------- */
.center{display:grid; place-items:center}
.muted{color:#666}
.hidden{display:none}