/* assets/style.css — Navbar superior horizontal + estilo blanco/gris/negro minimal + hero + product detail + footer fijo */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

:root{
  --max: 1200px;
  --radius: 12px;
  --pad: 24px;

  --c-white: #ffffff;
  --c-light: #f7f7f7;
  --c-gray: #e9e9e9;
  --c-mid: #b8b8b8;
  --c-text: #222222;
  --c-muted: #5d5d5d;
  --c-black: #000000;

  --shadow: 0 8px 24px rgba(0,0,0,.08);

  --footer-h: 56px; /* altura del footer fijo */
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
  color:var(--c-text); background: var(--c-white);
}

/* espacio inferior para que el contenido no quede tapado por el footer fijo */
body { padding-bottom: var(--footer-h); }

a{ color: inherit; text-decoration: none; }

/* =========================
   NAVBAR SUPERIOR
   ========================= */
.site-header{
  width:100%;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-gray);
  position: sticky;
  top: 0;
  z-index: 100;
}
.nav-bar{
  max-width: var(--max);
  margin: 0 auto;
  padding: 12px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-left{ display: flex; align-items: center; gap: 20px; }
.brand{ font-weight: 700; font-size: 22px; letter-spacing:.4px; color: var(--c-black); white-space: nowrap; }
.primary-nav{ display: flex; align-items: center; gap: 18px; }
.primary-nav a{ padding: 8px 4px; font-weight: 500; color: var(--c-text); position: relative; }
.primary-nav a::after{ content:""; position: absolute; left:0; bottom:-6px; width:0%; height:2px; background:var(--c-black); transition: width .25s ease; }
.primary-nav a:hover::after{ width:100%; }

.nav-right{ display: flex; align-items: center; gap: 16px; }
.icon{ width: 22px; height: 22px; fill: var(--c-black); }
.chip{ display:inline-block; min-width:22px; padding:2px 8px; font-size:12px; line-height:1.6; text-align:center; border-radius:999px; background: var(--c-light); border:1px solid var(--c-gray); margin-left:6px; color:var(--c-text); }

/* Usuario */
.user-menu{ position: relative; }
.user-btn{ display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid var(--c-gray); border-radius:999px; padding:8px 12px; cursor:pointer; }
.user-btn:hover{ background: var(--c-light); }
.user-label{ font-weight:600; color:var(--c-black); }
.user-dropdown{ position:absolute; right:0; top:calc(100% + 8px); background:var(--c-white); border:1px solid var(--c-gray); border-radius:10px; min-width:200px; box-shadow:var(--shadow); display:none; overflow:hidden; }
.user-dropdown.open{ display:block; }
.user-dropdown a{ display:block; padding:12px 14px; color:var(--c-text); }
.user-dropdown a:hover{ background:var(--c-light); }

/* Carrito (sin fondo) */
.cart-link{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--c-black); background:transparent; color:var(--c-black); padding:8px 12px; border-radius:999px; font-weight:600; transition: background .2s ease; }
.cart-link:hover{ background: var(--c-light); }

/* =========================
   HERO (inicio)
   ========================= */
.hero{ border-bottom:1px solid var(--c-gray); background: var(--c-light); }
.hero-inner{ max-width: var(--max); margin: 0 auto; padding: 48px var(--pad); text-align: center; }
.hero h1{ margin:0; font-size: 2.2rem; color: var(--c-black); }
.hero p{ color: var(--c-muted); margin:10px 0 16px 0; }
.hero-actions{ display:flex; gap:12px; justify-content: center; }

/* =========================
   LAYOUT GENERAL
   ========================= */
.container{ max-width: var(--max); margin: 0 auto; padding: var(--pad); }
.header{ display:none; } /* header viejo oculto */

/* =========================
   FOOTER FIJO
   ========================= */
.site-footer{
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: var(--c-white);
  border-top: 1px solid var(--c-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  z-index: 99;
}
.site-footer .inner{
  width: 100%;
  max-width: var(--max);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #666;
  font-size: 14px;
  text-align: center;
}

/* =========================
   GRID & CARDS (catálogo)
   ========================= */
.grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 24px; }
.card{ background: var(--c-white); border:1px solid var(--c-gray); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); display:flex; flex-direction:column; }
.card img{ width:100%; height: 220px; object-fit:cover; background: var(--c-light); }
.card .body{ padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
.price{ font-weight:700; color: var(--c-black); }
.badge{ font-size:12px; padding:4px 10px; border-radius:999px; background: var(--c-light); border:1px solid var(--c-gray); }

/* =========================
   FORMULARIOS / BOTONES
   ========================= */
.input, select, textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1.5px solid var(--c-gray); background:var(--c-white); color:var(--c-text); }
.input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--c-black); box-shadow: 0 0 0 3px rgba(0,0,0,.06); }
.form-actions{ display:flex; gap:10px; flex-wrap: wrap; }

.btn{ padding: 12px 20px; border-radius: 999px; border: 1px solid var(--c-black); background: var(--c-black); color: var(--c-white); cursor:pointer; font-weight:600; }
.btn:hover{ background:#333; }
.btn-outline{ padding: 12px 20px; border-radius: 999px; border:1px solid var(--c-black); background:transparent; color:var(--c-black); cursor:pointer; font-weight:600; }
.btn-outline:hover{ background: var(--c-light); }

/* Avisos */
.notice{ padding:12px 16px; background:#e9f7ef; border:1px solid #ccebd8; border-radius:10px; color:#205b37; }
.warn{ padding:12px 16px; background:#fde8ea; border:1px solid #f3c2c7; border-radius:10px; color:#7a2b2f; }

/* =========================
   TABLAS
   ========================= */
.table{ width:100%; border-collapse:collapse; background: var(--c-white); border:1px solid var(--c-gray); border-radius: 12px; overflow:hidden; box-shadow: var(--shadow); }
.table th, .table td{ padding: 14px 16px; border-bottom: 1px solid var(--c-gray); text-align:left; }
.table th{ background: var(--c-light); color: var(--c-black); font-weight:600; }
.table tr:hover td{ background: #fafafa; }

/* =========================
   PRODUCT DETAIL
   ========================= */
.product-detail{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.pd-image img{ width: 100%; height: auto; border:1px solid var(--c-gray); border-radius: 12px; }
.pd-info .pd-desc{ color:#666; }
.pd-actions{ display:grid; gap: 12px; max-width: 420px; }
.pd-buttons{ display:flex; gap: 10px; flex-wrap: wrap; }
.pd-buttons .btn{ padding: 12px 20px; }
.pd-buttons .btn-outline{ padding: 12px 20px; }

@media (max-width: 980px){
  .primary-nav{ display:none; }
  .product-detail{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .grid{ gap:16px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
}