:root{
    --paper:#EFEAD9;
    --paper-2:#E5DFC8;
    --ink:#23291F;
    --ink-soft:#4B5142;
    --forest:#1F3D2B;
    --forest-2:#173021;
    --sage:#8A9A7B;
    --amber:#A5651E;
    --amber-2:#D9A15C;
    --line:#C9BFA0;
    --danger:#8C3B2E;
    --radius:2px;
    --shadow:0 6px 18px rgba(23,48,33,0.12);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Work Sans',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--amber-2);color:var(--forest-2);}
  a{color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  :focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

  /* ---------- header ---------- */
  header.top{
    background:var(--forest);
    color:var(--paper);
    padding:22px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    border-bottom:6px solid var(--amber);
  }
  .brand{display:flex;flex-direction:column;gap:2px;}
  .brand .name{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:clamp(28px,4vw,38px);
    letter-spacing:0.5px;
  }
  .brand .tag{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--amber-2);
  }
  .admin-toggle{
    background:transparent;
    border:1px solid rgba(239,234,217,0.4);
    color:var(--paper);
    padding:10px 16px;
    font-size:13px;
    letter-spacing:0.5px;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    gap:8px;
    transition:background .15s ease, border-color .15s ease;
  }
  .admin-toggle:hover{background:rgba(239,234,217,0.08);border-color:var(--amber-2);}
  .admin-toggle.active{background:var(--amber);border-color:var(--amber);color:var(--forest-2);font-weight:600;}

  /* ---------- admin bar ---------- */
  .admin-bar{
    background:var(--amber-2);
    color:var(--forest-2);
    display:none;
    align-items:center;
    justify-content:space-between;
    padding:12px 28px;
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.3px;
    gap:12px;
    flex-wrap:wrap;
  }
  .admin-bar.show{display:flex;}
  .admin-bar .left{display:flex;align-items:center;gap:10px;}
  .admin-bar strong{font-weight:600;}
  .btn{
    border:1px solid var(--forest-2);
    background:var(--forest);
    color:var(--paper);
    padding:8px 14px;
    font-size:12.5px;
    font-family:'JetBrains Mono',monospace;
    border-radius:var(--radius);
    letter-spacing:0.3px;
  }
  .btn:hover{background:var(--forest-2);}
  .btn.ghost{background:transparent;color:var(--forest-2);border-color:var(--forest-2);}
  .btn.ghost:hover{background:rgba(23,48,33,0.08);}

  /* ---------- categories ---------- */
  .cats{
    max-width:1180px;
    margin:26px auto 0;
    padding:0 28px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .chip{
    font-family:'JetBrains Mono',monospace;
    font-size:11.5px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:7px 13px;
    border:1px solid var(--line);
    border-radius:20px;
    background:transparent;
    color:var(--ink-soft);
  }
  .chip.active{background:var(--forest);color:var(--paper);border-color:var(--forest);}

  /* ---------- grid ---------- */
  main{max-width:1180px;margin:0 auto;padding:24px 28px 80px;}
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:26px;
    margin-top:22px;
  }
  .empty{
    text-align:center;
    padding:70px 20px;
    color:var(--ink-soft);
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:20px;
  }

  .card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    position:relative;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
  @media (prefers-reduced-motion:reduce){ .card{transition:none;} .card:hover{transform:none;} }

  .card .tear{
    height:10px;
    background:
      linear-gradient(-45deg, transparent 6px, var(--amber) 6px) 0 0/12px 12px repeat-x,
      var(--amber);
    -webkit-mask: linear-gradient(#000 0 0);
  }
  .card.hidden-item{opacity:.55;}
  .card .imgbox{
    width:100%;
    height:230px;
    background:var(--paper-2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    position:relative;
  }
  .card .imgbox img{width:100%;height:100%;object-fit:cover;display:block;}
  .card .imgbox .noimg{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    color:var(--ink-soft);
    letter-spacing:1px;
    text-transform:uppercase;
  }
  .leaf{
    position:absolute;top:10px;right:10px;
    width:22px;height:22px;
    opacity:.85;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,0.25));
  }
  .badge-hidden{
    position:absolute;top:10px;left:10px;
    background:var(--danger);
    color:#fff;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:4px 8px;
    border-radius:2px;
  }
  .card .body{padding:16px 16px 18px;}
  .card .cat{
    font-family:'JetBrains Mono',monospace;
    font-size:10.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--amber);
    margin-bottom:6px;
    display:block;
  }
  .card h3{
    margin:0 0 6px;
    font-family:'Fraunces',serif;
    font-weight:600;
    font-size:19px;
    color:var(--forest-2);
  }
  .card p.desc{
    margin:0 0 10px;
    font-size:13.5px;
    line-height:1.5;
    color:var(--ink-soft);
    min-height:20px;
  }
  .card .price{
    font-family:'JetBrains Mono',monospace;
    font-size:15px;
    font-weight:500;
    color:var(--forest);
  }
  .card .controls{
    display:flex;
    gap:8px;
    margin-top:12px;
    flex-wrap:wrap;
  }
  .card .controls button{
    flex:1;
    min-width:80px;
    padding:7px 8px;
    font-size:11.5px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:var(--paper);
    color:var(--ink);
  }
  .card .controls button:hover{background:var(--paper-2);}
  .card .controls button.danger{border-color:var(--danger);color:var(--danger);}
  .card .controls button.danger:hover{background:rgba(140,59,46,0.08);}

  /* ---------- modal ---------- */
  .overlay{
    position:fixed;inset:0;
    background:rgba(23,41,31,0.55);
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:40px 16px;
    overflow-y:auto;
    z-index:50;
  }
  .overlay.show{display:flex;}
  .modal{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--radius);
    width:100%;
    max-width:440px;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
  }
  .modal .mhead{
    background:var(--forest);
    color:var(--paper);
    padding:16px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .modal .mhead h2{
    margin:0;
    font-family:'Fraunces',serif;
    font-style:italic;
    font-weight:500;
    font-size:20px;
  }
  .modal .mhead button{background:none;border:none;color:var(--paper);font-size:20px;line-height:1;}
  .modal .mbody{padding:20px;}
  .field{margin-bottom:14px;}
  .field label{
    display:block;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin-bottom:6px;
  }
  .field input[type=text],
  .field input[type=number],
  .field input[type=password],
  .field textarea{
    width:100%;
    padding:10px 11px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:#fff;
    font-family:'Work Sans',sans-serif;
    font-size:14px;
    color:var(--ink);
  }
  .field textarea{resize:vertical;min-height:70px;}
  .field small{display:block;margin-top:5px;color:var(--ink-soft);font-size:11.5px;}
  .file-drop{
    border:1.5px dashed var(--line);
    border-radius:var(--radius);
    padding:16px;
    text-align:center;
    background:#fff;
  }
  .file-drop input{width:100%;}
  .preview{
    margin-top:12px;
    width:100%;
    height:180px;
    background:var(--paper-2);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:var(--radius);
  }
  .preview img{width:100%;height:100%;object-fit:cover;}
  .preview .noimg{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
  .modal .mfoot{
    padding:14px 20px 20px;
    display:flex;
    gap:10px;
    justify-content:flex-end;
  }
  .msg{
    font-size:12.5px;
    padding:8px 10px;
    border-radius:var(--radius);
    margin-bottom:12px;
    display:none;
  }
  .msg.show{display:block;}
  .msg.err{background:rgba(140,59,46,0.1);color:var(--danger);border:1px solid rgba(140,59,46,0.3);}

  footer{
    text-align:center;
    padding:26px;
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:1px;
    color:var(--ink-soft);
    border-top:1px solid var(--line);
  }

  .toast{
    position:fixed;
    bottom:20px;left:50%;
    transform:translateX(-50%) translateY(10px);
    background:var(--forest-2);
    color:var(--paper);
    padding:11px 18px;
    border-radius:var(--radius);
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    letter-spacing:0.5px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:80;
  }
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- añadidos: logo, búsqueda, carga, lightbox ---------- */
.brand{flex-direction:row;align-items:center;gap:12px;}
.brand-logo{
  width:46px;height:46px;
  object-fit:contain;
  border-radius:4px;
  background:rgba(239,234,217,0.08);
}
.brand-text{display:flex;flex-direction:column;gap:2px;}

.searchbar-wrap{
  max-width:1180px;
  margin:22px auto 0;
  padding:0 28px;
}
.searchbar{
  width:100%;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  font-family:'Work Sans',sans-serif;
  font-size:14px;
  color:var(--ink);
}
.searchbar::placeholder{color:var(--ink-soft);}
.searchbar:focus{border-color:var(--amber);}

.loading{
  text-align:center;
  padding:50px 20px;
  color:var(--ink-soft);
  font-family:'JetBrains Mono',monospace;
  font-size:12.5px;
  letter-spacing:1px;
  text-transform:uppercase;
  display:none;
}
.loading.show{display:block;}

.loadmore-wrap{
  display:flex;
  justify-content:center;
  margin-top:30px;
}

.imgbox{cursor:pointer;}

.lightbox-modal{max-width:560px;}
.lightbox-imgbox{
  width:100%;
  height:360px;
  background:var(--paper-2);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
}
.lightbox-imgbox img{width:100%;height:100%;object-fit:contain;background:#fff;}
#lightboxDesc{color:var(--ink-soft);font-size:14px;line-height:1.6;margin-top:10px;}
#lightboxCat{margin-top:4px;}

/* ---------- imagen completa, sin recorte ---------- */
.card .imgbox{background:#F2EDE1;}
.card .imgbox img{object-fit:contain;}

/* ---------- gestión de categorías ---------- */
.cat-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:220px;
  overflow-y:auto;
}
.cat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  font-size:13.5px;
}
.cat-row button{
  border:1px solid var(--danger);
  color:var(--danger);
  background:transparent;
  padding:5px 10px;
  font-size:11.5px;
  border-radius:var(--radius);
}
.cat-row button:hover{background:rgba(140,59,46,0.08);}
.cat-empty{color:var(--ink-soft);font-size:13px;font-style:italic;}

select#pCat{
  width:100%;
  padding:10px 11px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  font-family:'Work Sans',sans-serif;
  font-size:14px;
  color:var(--ink);
}

/* ---------- botón flotante de WhatsApp ---------- */
.wa-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
  z-index:60;
  transition:transform .15s ease;
}
.wa-float:hover{transform:scale(1.06);}
@media (prefers-reduced-motion:reduce){ .wa-float{transition:none;} .wa-float:hover{transform:none;} }