:root{--bg:#0b0d10;--card:#15191f;--card-hover:#1a1f27;--text:#f8f8f8;--muted:#969da8;--line:rgba(255,255,255,.08);--line-strong:rgba(255,255,255,.14);--radius:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 50% -20%,#232832 0,#0b0d10 40%);color:var(--text)}
.container{width:min(1180px,calc(100% - 36px));margin:0 auto}
.brand-logo{width:min(520px,86vw);height:auto;display:block;margin:-6px auto 0;object-fit:contain}
.hero{padding:18px 0 28px;text-align:center;border-bottom:1px solid var(--line)}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:30px 0 22px}
.toolbar input{width:min(560px,100%);padding:15px 18px;background:rgba(255,255,255,.045);color:var(--text);border:1px solid var(--line-strong);border-radius:15px;font-size:15px;outline:none}
#productCount{color:var(--muted);font-size:14px;white-space:nowrap}
.product-grid{padding-bottom:60px}.product-section{margin-bottom:50px}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:17px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.section-label{color:#666e7a;font-size:10px;font-weight:800;letter-spacing:.18em}.section-heading h2{margin:4px 0 0;font-size:clamp(23px,4vw,33px);line-height:1;letter-spacing:-.035em}.section-count{color:var(--muted);font-size:13px}
.cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-card{overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.025),rgba(255,255,255,0)),var(--card);border:1px solid var(--line);border-radius:var(--radius);transition:.2s}
.product-card:hover{transform:translateY(-3px);border-color:var(--line-strong);background-color:var(--card-hover)}
.product-image-wrap{position:relative;overflow:hidden;aspect-ratio:1/1;background:#101319}.product-image{display:block;width:100%;height:100%;object-fit:contain;padding:12px}
.product-image.placeholder{padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(circle at center,#242a34 0,#12151a 70%);color:#fff}
.placeholder-logo{display:grid;place-items:center;width:72px;height:72px;border-radius:22px;border:1px solid rgba(255,255,255,.15);font-size:22px;font-weight:950;background:rgba(255,255,255,.05)}
.product-image.placeholder small{color:#69717d;font-size:9px;font-weight:800;letter-spacing:.2em}
.product-body{padding:16px 17px 18px}.product-brand{margin-bottom:6px;color:#737b86;font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.product-card h3{margin:0;min-height:44px;font-size:17px;line-height:1.25}
.product-footer{margin-top:16px}.product-price{margin-bottom:9px;font-size:21px;font-weight:900;letter-spacing:-.035em;color:#fff}
.stock{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#cfd4dc;font-size:11px;font-weight:750}.stock.low-stock{background:rgba(255,255,255,.12);color:#fff}
.status{padding:30px 0;color:var(--muted);text-align:center}.footer{padding:25px 0;border-top:1px solid var(--line);color:#666e78;font-size:12px;text-align:center;letter-spacing:.08em;text-transform:uppercase}
.admin-shell{max-width:1000px;margin:0 auto;padding:24px}.admin-card{background:#fff;color:#111;border:1px solid #e8e8e8;border-radius:18px;padding:20px;margin-bottom:18px;box-shadow:0 10px 30px rgba(0,0,0,.04)}
.admin-row{display:grid;grid-template-columns:2fr 1fr 1fr 120px 140px;gap:10px;align-items:end}.admin-row input,.admin-card input{width:100%;padding:11px 12px;border:1px solid #d8d8d8;border-radius:10px}
.admin-actions{display:flex;gap:8px;flex-wrap:wrap}button{cursor:pointer;border:0;border-radius:10px;padding:10px 14px;font-weight:700}button.primary{background:#111;color:#fff}button.danger{background:#f3f3f3}button.small{padding:8px 11px}
.admin-product{padding:16px 0;border-bottom:1px solid #eee}.admin-edit-fields{display:grid;grid-template-columns:2fr 1fr 1.5fr 140px 150px;gap:12px}.admin-edit-fields label{font-size:12px;font-weight:700}.admin-edit-fields input{margin-top:6px}.image-field{grid-column:1/-1}
.stock-control{display:flex;gap:5px;align-items:center;margin-top:6px}.stock-control input{margin:0;width:70px!important;text-align:center}.admin-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:14px}.active-toggle{display:flex;align-items:center;gap:7px;font-weight:600}.active-toggle input{width:auto}
.login-wrap{max-width:420px;margin:80px auto;padding:24px}.muted{opacity:.65}.error{color:#a40000;margin-top:10px}.success{color:#126a2f;margin-top:10px}
@media(max-width:1000px){.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.admin-row,.admin-edit-fields{grid-template-columns:1fr 1fr}.image-field{grid-column:1/-1}}
@media(max-width:760px){.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.container{width:min(100% - 24px,1180px)}.toolbar{flex-direction:column;align-items:stretch}.admin-row,.admin-edit-fields{grid-template-columns:1fr}.image-field{grid-column:auto}.admin-bottom{flex-direction:column;align-items:stretch}}
.upload-block {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.upload-label {
  display: inline-flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
}

.upload-label input[type=file] {
  width: auto;
  max-width: 100%;
  padding: 8px;
  background: #f7f7f7;
}

.image-preview {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  border: 1px solid #e4e4e4;
  overflow: hidden;
  background: #fafafa;
  display: grid;
  place-items: center;
  color: #888;
  font-size: 11px;
  text-align: center;
}

.image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.empty-preview {
  padding: 10px;
}
/* ======================================================
   HUMO REALISTA SUTIL EN LOS LATERALES
====================================================== */

body {
  position: relative;
  overflow-x: hidden;
}

/* El contenido siempre por encima */
.hero,
body > main,
.footer {
  position: relative;
  z-index: 2;
}

/* Capa decorativa */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1000' viewBox='0 0 1600 1000'%3E%3Cfilter id='smoke'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .018' numOctaves='4' seed='7'/%3E%3CfeColorMatrix type='matrix' values='1 0 0 0 .75 0 1 0 0 .78 0 0 1 0 .82 0 0 0 .42 0'/%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3Crect x='-120' y='0' width='330' height='1000' filter='url(%23smoke)' opacity='.35'/%3E%3Crect x='1390' y='0' width='330' height='1000' filter='url(%23smoke)' opacity='.32'/%3E%3C/svg%3E");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 0.75;
  mix-blend-mode: screen;
}

/* Segunda capa para formar curvas más naturales */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(
      ellipse 150px 380px at -20px 25%,
      rgba(210, 215, 220, .13),
      transparent 70%
    ),
    radial-gradient(
      ellipse 170px 420px at 102% 65%,
      rgba(205, 210, 218, .12),
      transparent 72%
    );

  filter: blur(18px);
}

@media (max-width: 760px) {
  body::before {
    opacity: 0.45;
  }

  body::after {
    opacity: 0.55;
  }
}
/* ===== HUMO DE FONDO SUAVE ===== */

body {
  position: relative;
  background-color: #0b0e12;
  background-image:
    linear-gradient(
      to right,
      rgba(11, 14, 18, 0.88) 0%,
      rgba(11, 14, 18, 0.25) 18%,
      rgba(11, 14, 18, 0.92) 38%,
      rgba(11, 14, 18, 0.92) 62%,
      rgba(11, 14, 18, 0.25) 82%,
      rgba(11, 14, 18, 0.88) 100%
    ),
    url("./assets/humo-fondo.png");

  background-repeat: no-repeat, repeat-y;
  background-position: center, center top;
  background-size: 100% 100%, 100% auto;
  background-attachment: fixed, fixed;

/* ======================================================
   CARRITO
====================================================== */

.product-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

.btn-comprar,
.btn-agregar-carrito {
  width: 100%;
  min-height: 40px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  transition: .2s ease;
}

.btn-comprar {
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.13);
}

.btn-comprar:hover {
  background: rgba(255,255,255,.13);
}

.btn-agregar-carrito {
  background: #fff;
  color: #0b0e12;
  border: 1px solid #fff;
}

.btn-agregar-carrito:hover {
  transform: translateY(-1px);
  background: #e9e9e9;
}

.carrito-flotante {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;

  background: #fff;
  color: #0b0e12;

  border: 0;
  border-radius: 999px;

  padding: 14px 20px;

  font-size: 14px;
  font-weight: 900;

  box-shadow: 0 12px 35px rgba(0,0,0,.42);
}

.carrito-panel {
  position: fixed;
  inset: 0;
  z-index: 100;

  background: rgba(0,0,0,.76);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  backdrop-filter: blur(5px);
}

.carrito-panel[hidden],
.carrito-flotante[hidden] {
  display: none !important;
}

.carrito-box {
  width: min(580px,100%);
  max-height: 82vh;
  overflow-y: auto;

  background: #15191f;
  color: #fff;

  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;

  padding: 20px;

  box-shadow: 0 25px 70px rgba(0,0,0,.5);
}

.carrito-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 12px;
}

.carrito-header h2 {
  margin: 0;
  font-size: 23px;
}

#cerrarCarrito {
  background: rgba(255,255,255,.08);
  color: #fff;

  width: 40px;
  height: 40px;

  padding: 0;
}

.carrito-item {
  display: grid;

  grid-template-columns:
    minmax(0,1fr)
    auto
    auto;

  gap: 12px;
  align-items: center;

  padding: 14px 0;

  border-bottom: 1px solid rgba(255,255,255,.08);
}

.carrito-info strong {
  display: block;
}

.carrito-info span,
.carrito-info small {
  display: block;

  color: #969da8;

  font-size: 12px;

  margin-top: 3px;
}

.carrito-cantidad {
  display: flex;
  align-items: center;

  gap: 8px;

  background: rgba(255,255,255,.06);

  border-radius: 12px;

  padding: 4px;
}

.carrito-cantidad span {
  min-width: 24px;

  text-align: center;

  font-weight: 900;
}

.cantidad-btn {
  width: 32px;
  height: 32px;

  padding: 0;

  background: rgba(255,255,255,.10);
  color: #fff;
}

.quitar-carrito {
  background: transparent;
  color: #aaa;

  border: 1px solid rgba(255,255,255,.10);
}

.carrito-actions {
  display: grid;
  grid-template-columns: auto 1fr;

  gap: 10px;

  margin-top: 18px;
}

#vaciarCarrito {
  background: rgba(255,255,255,.08);
  color: #fff;
}

#carritoWhatsapp {
  background: #fff;
  color: #0b0e12;
}

@media (max-width: 520px) {
  .carrito-flotante {
    right: 14px;
    bottom: 14px;
  }

  .carrito-item {
    grid-template-columns: 1fr auto;
  }

  .quitar-carrito {
    grid-column: 1 / -1;
  }

  .carrito-actions {
    grid-template-columns: 1fr;
  }

  .btn-comprar,
  .btn-agregar-carrito {
    font-size: 11px;
    padding: 9px 7px;
  }
}


/* ======================================================
   ADMIN MÓVIL - STOCK RÁPIDO
====================================================== */

.mobile-stock-hint {
  display: none;
}

@media (max-width: 760px) {
  .admin-shell {
    max-width: none;
    padding: 10px;
  }

  .admin-card {
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
  }

  .login-wrap {
    margin: 28px auto;
    padding: 18px;
  }

  .mobile-stock-hint {
    display: block;
    margin: 8px 0 0;
    font-size: 12px;
    font-weight: 700;
    color: #555;
  }

  #adminView > .admin-card:first-child {
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 8px 28px rgba(0,0,0,.12);
  }

  #adminView > .admin-card:first-child h1 {
    font-size: 22px;
  }

  .admin-product {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 16px;
    padding: 14px;
    margin-bottom: 12px;
  }

  .admin-edit-fields {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .stock-field {
    order: -20;
    padding: 12px;
    border: 2px solid #111;
    border-radius: 14px;
    background: #f8f8f8;
    font-size: 13px !important;
  }

  .price-field {
    order: -19;
  }

  .stock-control {
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    gap: 8px;
    margin-top: 8px;
  }

  .stock-control input {
    width: 100% !important;
    height: 54px;
    margin: 0 !important;
    text-align: center;
    font-size: 22px;
    font-weight: 900;
    border: 2px solid #d8d8d8;
    background: #fff;
  }

  .stock-control button {
    width: 56px;
    height: 54px;
    padding: 0;
    font-size: 24px;
    border-radius: 12px;
    background: #111;
    color: #fff;
  }

  .admin-edit-fields label {
    font-size: 12px;
  }

  .admin-edit-fields input {
    min-height: 46px;
    font-size: 16px; /* evita zoom automático en iPhone */
  }

  .upload-block {
    align-items: flex-start;
  }

  .image-preview {
    width: 78px;
    height: 78px;
  }

  .admin-bottom {
    position: sticky;
    bottom: 8px;
    z-index: 20;
    margin-top: 12px;
    padding: 10px;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    backdrop-filter: blur(8px);
  }

  .admin-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  .admin-actions .save {
    min-height: 48px;
    font-size: 15px;
  }

  .admin-actions .delete {
    min-height: 48px;
  }

  .active-toggle {
    width: 100%;
    justify-content: flex-start;
  }

  .stock-changed .stock-field {
    box-shadow: 0 0 0 3px rgba(0,0,0,.08);
  }

  /* El formulario de alta sigue disponible, pero ocupa menos */
  #addForm {
    grid-template-columns: 1fr;
  }

  #addForm .upload-block,
  #addForm #newImagen {
    grid-column: auto !important;
  }

  #refreshBtn {
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  .admin-shell {
    padding: 7px;
  }

  .admin-card {
    padding: 12px;
  }

  .stock-control {
    grid-template-columns: 52px 1fr 52px;
  }

  .stock-control button {
    width: 52px;
  }

  .admin-actions {
    grid-template-columns: 1fr;
  }
}