/* =========================================================
   SÁNCHEZ — Hoja de estilos principal (elegancia, fuerza,
   confianza y exclusividad). Sin imágenes embebidas.
   Paleta: negro, carbón, grafito y oro.
   Tipos: Cinzel (títulos) + Inter (cuerpo).
   ========================================================= */

/* ===== Reset / Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  line-height: 1.6;
  background: var(--bg);
  color: var(--fg);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, "Noto Sans";
}

/* ===== Tokens generales ===== */
/* #hola */
:root{
  --container:1480px;
  --radius:16px;

  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;

  --fs-hero:clamp(2.2rem,3vw + 1rem,3.2rem);
  --fs-h2:clamp(1.6rem,1.5vw + .8rem,2.2rem);
  --transition:200ms ease;
}

/* ===== Tema Oscuro por defecto ===== */
.theme-dark{
  --bg:#0B0C0E;
  --panel:#15171B;
  --panel-2:#1E2127;
  --fg:#F5F7FA;
  --fg-muted:#C7CDD6;
  --gold:#D4AF37;
  --gold-2:#E9C46A;
  --stroke:#2A2E36;
  --shadow:0 12px 30px rgba(0,0,0,.35);
  --shadow-soft:0 6px 18px rgba(0,0,0,.28);
}

/* ===== Tema Claro ===== */
.theme-light{
  --bg:#F6F7F9;
  --panel:#FFFFFF;
  --panel-2:#F0F2F5;
  --fg:#1A202C;
  --fg-muted:#4A5568;
  --gold:#B8952E;
  --gold-2:#DDB65A;
  --stroke:#E2E8F0;
  --shadow:0 10px 24px rgba(0,0,0,.08);
  --shadow-soft:0 6px 16px rgba(0,0,0,.06);
}
.theme-light .section--alt{
  background: linear-gradient(180deg, rgba(184,149,46,.08), transparent 70%);
}
.theme-light .hero{
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(184,149,46,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.03), transparent);
}
.theme-light .nav__link.is-active{
  background: rgba(184,149,46,.10);
  outline: 1px solid rgba(184,149,46,.30);
}
.theme-light .card:hover{ border-color: rgba(184,149,46,.30); }
.theme-light .site-header{ border-bottom: 1px solid rgba(184,149,46,.22); background: rgba(255,255,255,.8); backdrop-filter: blur(8px); }
.theme-light .site-footer{ background:#FFFFFF; border-top: 1px solid var(--stroke); }
.theme-light .btn--ghost{ border-color: rgba(0,0,0,.08); }
.theme-light .btn--ghost:hover{ background: rgba(0,0,0,.04); }
.theme-light .media-frame{
  background:
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,0)),
    radial-gradient(120% 100% at 50% -10%, rgba(221,182,90,.10), transparent 60%),
    linear-gradient(180deg, #FFFFFF, #F3F4F6);
  border: 1px solid rgba(184,149,46,.28);
}

/* ===== Utilidades & Layout ===== */
.container{ max-width:var(--container); padding:0 1rem; margin:0 auto; }
.section{ padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section--alt{ background: linear-gradient(180deg, rgba(233,196,106,.06), transparent 70%); }
.muted{ color: var(--fg-muted); }
.center{ text-align: center; }
.hidden{ display: none !important; }
.grid{ display:grid; gap: var(--sp-5); }
.grid--2{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid--3{ grid-template-columns: 1fr 1fr; } }
@media (max-width:640px){ .grid--2, .grid--3{ grid-template-columns: 1fr; } }
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto;
  background:#000; color:#fff; padding:.5rem .75rem; border-radius:.5rem; z-index:9999;
}

/* ===== Header/Nav ===== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,12,14,.78);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(212,175,55,.18);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  min-height: 70px; gap: var(--sp-4);
}

/* Logo tipográfico */
.logo{ display:flex; align-items:baseline; gap:.6rem; text-decoration:none; }
.logo__word{
  font-family: Cinzel, serif; font-weight: 700; letter-spacing: .08em;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.logo__tag{ font-size:.8rem; color: var(--fg-muted); letter-spacing:.25em; }

/* Menú */
.site-nav{ display:flex; align-items:center; gap: var(--sp-4); }
.nav__list{ display:flex; gap: var(--sp-3); list-style:none; margin:0; padding:0; }
.nav__item{ position:relative; }
.nav__link,
.nav__link--button{
  color: var(--fg-muted);
  text-decoration: none;
  padding: .55rem .8rem;
  border-radius: .7rem;
  transition: background var(--transition), color var(--transition);
  display: inline-flex; align-items:center; gap:.35rem;
  border:0; background:transparent; font:inherit; cursor:pointer;
}
.nav__link:hover,
.nav__link--button:hover{ color: var(--fg); background: rgba(255,255,255,.06); }
.nav__link.is-active{
  color: var(--fg); background: rgba(212,175,55,.10);
  outline: 1px solid rgba(212,175,55,.24);
}
.chev{ font-size:.9em; opacity:.8; }

/* Submenú */
.has-submenu .submenu{
  list-style:none; margin:0;
  position:absolute; top:100%; left:0; min-width:210px;
  background: var(--panel);
  border: 1px solid rgba(212,175,55,.18);
  border-radius: .8rem;
  padding: .4rem;
  box-shadow: var(--shadow-soft);
  display:none; z-index:60;
}
.has-submenu:hover .submenu{ display:block; }
.has-submenu:focus-within .submenu{ display:block; }
.submenu__link{
  display:block; color: var(--fg); text-decoration:none;
  padding: .6rem .7rem; border-radius: .55rem;
}
.submenu__link:hover{ background: rgba(212,175,55,.10); }

/* CTA + carrito */
.nav__cta{ display:flex; gap: var(--sp-3); align-items:center; }
.cart-link{ position:relative; }
.cart-badge{
  display:inline-grid; place-items:center;
  min-width:1.35rem; height:1.35rem; padding:0 .25rem;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color:#0B0C0E; font-weight:800; font-size:.75rem;
  border-radius:999px; line-height:1; margin-left:.35rem;
}

/* Toggle móvil */
.nav-toggle{ display:none; }
.nav-toggle-btn{ display:none; cursor:pointer; width:34px; height:28px; position:relative; }
.nav-toggle-btn span{
  position:absolute; left:0; right:0; height:3px; background:var(--fg);
  border-radius:2px; transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle-btn span:nth-child(1){ top:3px; }
.nav-toggle-btn span:nth-child(2){ top:12px; }
.nav-toggle-btn span:nth-child(3){ top:21px; }

@media (max-width:900px){
  .nav-toggle-btn{ display:block; }
  .site-nav{
    position:absolute; inset:70px 0 auto 0; background:var(--panel);
    border-bottom:1px solid rgba(212,175,55,.18);
    padding: var(--sp-4) 1rem; display:grid; gap: var(--sp-4);
    transform-origin: top; transform: scaleY(0); transition: transform var(--transition);
  }
  .nav__list{ flex-direction: column; gap: var(--sp-2); }
  .nav__cta{ flex-direction: column; align-items: stretch; }
  .has-submenu .submenu{ position: static; display:none; margin-top:.25rem; }
  .has-submenu.open .submenu{ display:block; }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(1){ transform: translateY(9px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-toggle-btn span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
  .nav-toggle:checked ~ .site-nav{ transform: scaleY(1); }
}

/* ===== Theme toggle ===== */
.theme-toggle{ min-width:44px; padding:.55rem .75rem; }
.theme-toggle__icon{ font-size:1rem; line-height:1; }

/* ===== Hero ===== */
.hero{
  padding: var(--sp-8) 0;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(212,175,55,.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
.hero__inner{
  display:grid; gap: var(--sp-6);
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
}
@media (max-width:900px){ .hero__inner{ grid-template-columns: 1fr; } }
.hero__title{
  font-family: Cinzel, serif; font-size: var(--fs-hero);
  line-height: 1.2; margin: 0 0 var(--sp-3);
  letter-spacing: .01em; text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.hero__subtitle{ font-size: 1.1rem; color: var(--fg-muted); margin: 0 0 var(--sp-5); }
.hero__actions{ display:flex; gap: var(--sp-3); flex-wrap:wrap; }

/* Enlaces del hero si no llevan .btn */
.hero__actions a:not(.btn){
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:.9rem; border:1px solid rgba(255,255,255,.18);
  padding:.75rem 1.1rem; color:var(--fg); text-decoration:none;
}
.hero__actions a:not(.btn):hover{ background: rgba(255,255,255,.06); }

/* Frame para imágenes por BD */
.media-frame{
  border-radius: var(--radius);
  border: 1px solid rgba(212,175,55,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    radial-gradient(120% 100% at 50% -10%, rgba(233,196,106,.10), transparent 60%),
    linear-gradient(180deg, #13161B, #0E1013);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4/3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.media-frame--hero{ aspect-ratio: 16/10; }
.hero__media{ position: relative; }
.ribbon{
  position:absolute; top:-10px; right:10px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color:#0B0C0E; font-weight:700; padding:.25rem .6rem;
  border-radius: 999px; font-size:.75rem;
}

/* ===== Secciones ===== */
.section__header{ margin-bottom: var(--sp-6); }
.section__header h2{
  font-family: Cinzel, serif; font-size: var(--fs-h2);
  margin: 0 0 var(--sp-2); letter-spacing: .04em;
}

/* ===== Cards / Productos ===== */
.card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card:hover{
  transform: translateY(-2px);
  border-color: rgba(212,175,55,.28);
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.card__title{ margin: 0 0 .5rem; font-weight: 600; }

.product-list{ display:flex; flex-direction:column; gap: var(--sp-4); }
.product-list-item{
  display:flex; align-items:center; gap: var(--sp-5);
  background: var(--panel); border: 1px solid var(--stroke);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  cursor:pointer; transition: border-color var(--transition), box-shadow var(--transition);
}
.product-list-item:hover{ border-color: var(--gold); box-shadow: var(--shadow-soft); }
.product-list-item__info{ flex:1; }
.product-list-item__info h3{ margin:0 0 .25rem; }
.product-list-item__meta{ font-size:.9rem; color: var(--fg-muted); }
.product-list-item__arrow{ font-size:1.4rem; color: var(--stroke); }

.order-item__badges{ display:flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.status-badge{ display:inline-block; padding:.35rem .6rem; border-radius:999px; font-weight:600; font-size:.8rem; }
.status-pendiente{ background: rgba(255,193,7,.15); color:#f1c40f; border:1px solid rgba(241,196,15,.3); }
.status-enviado{ background: rgba(52,152,219,.15); color:#3498db; border:1px solid rgba(52,152,219,.3); }
.status-entregado{ background: rgba(46,204,113,.15); color:#2ecc71; border:1px solid rgba(46,204,113,.3); }
.status-cancelado{ background: rgba(231,76,60,.15); color:#e74c3c; border:1px solid rgba(231,76,60,.3); }
.priority-badge{ display:inline-block; padding:.35rem .6rem; border-radius:999px; font-weight:700; font-size:.75rem; }
.priority-badge--high{ background: rgba(231,76,60,.18); color:#e74c3c; border:1px solid rgba(231,76,60,.3); }
.priority-badge--medium{ background: rgba(241,196,15,.18); color:#f1c40f; border:1px solid rgba(241,196,15,.3); }
.priority-badge--low{ background: rgba(99,110,123,.18); color:#c7cdd6; border:1px solid rgba(99,110,123,.3); }

.summary-box{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-soft);
}
.summary-box + .summary-box{ margin-top: var(--sp-4); }
.summary-box h4{ margin:0 0 var(--sp-3); color: var(--gold); font-family: Cinzel, serif; }
.summary-box p{ display:flex; align-items:baseline; justify-content:space-between; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px solid var(--stroke); }
.summary-box p:last-child{ border-bottom: 0; }
.summary-box p.total{ font-weight:700; }
.summary-actions{ margin-top: var(--sp-4); display:flex; gap: var(--sp-3); align-items:center; }

.form-grid{ gap: var(--sp-4); }
.notice-bar{ display:flex; gap:var(--sp-4); align-items:center; justify-content:space-between; background: var(--panel-2); border:1px solid var(--stroke); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-4); box-shadow: var(--shadow-soft); }
.notice-bar__items{ display:flex; gap: var(--sp-3); align-items:center; }

.product .product__media{ margin-bottom: var(--sp-4); }
.product__name{ margin: 0 0 .35rem; font-weight: 600; letter-spacing: .02em; }
.product__desc{ margin: 0 0 var(--sp-4); }
.product__meta{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); }
.price{ font-size: 1.15rem; font-weight:700; letter-spacing: .02em; }

.product--featured{
  border-color: rgba(212,175,55,.45);
  box-shadow: 0 12px 34px rgba(212,175,55,.14);
}
.badge{
  position:absolute; top:-10px; right:16px;
  background: var(--gold); color:#0B0C0E; font-weight:700;
  padding:.25rem .6rem; border-radius:999px; font-size:.75rem;
}
.badge--gold{ background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.badge--new{ background: #3498db; color: white; }

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; text-decoration:none; cursor:pointer; user-select:none;
  border-radius:.9rem; border:1px solid transparent; font-weight:700;
  padding:.85rem 1.2rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), filter var(--transition);
}
.btn:active{ transform: translateY(1px); }
.btn--gold{
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color:#0B0C0E; border-color: rgba(212,175,55,.35);
}
.btn--gold:hover{ filter: brightness(.95); }
.btn--ghost{ background: transparent; color: var(--fg); border-color: rgba(255,255,255,.18); }
.btn--ghost:hover{ background: rgba(255,255,255,.06); }
.btn--outline{ background: transparent; color: var(--fg); border-color: rgba(212,175,55,.35); }
.btn--outline:hover{ background: rgba(212,175,55,.08); }

/* ===== Formularios ===== */
.form__row {
  margin-bottom: var(--sp-4);
}
.form__row label {
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 700;
  color: var(--fg);
  font-family: Cinzel, Inter, system-ui, Arial, sans-serif;
  letter-spacing: .03em;
}
.form__row input,
.form__row select,
.form__row textarea {
  width: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  background: var(--panel-2);
  color: var(--fg);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.form__row input:focus,
.form__row select:focus,
.form__row textarea:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,55,.22);
}
.form__row textarea {
  height: 80px;
  resize: vertical;
}

/* ===== MODALES Y FORMULARIOS (MERGE modelo.css) ===== */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg);
    backdrop-filter: blur(8px);
    transition: opacity var(--transition);
    opacity: 0;
}
.modal.hidden {
    display: none;
    opacity: 0;
}
.modal[style*="flex"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1;
}
.modal__content {
    background-color: var(--panel);
    color: var(--fg);
    padding: var(--sp-5);
    border-radius: var(--radius);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
    border: 1px solid var(--stroke);
}
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sp-5);
}
.modal__close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--fg-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.modal__close:hover {
    color: var(--gold);
}

/* ===== Galería de Imágenes (Colaboradores y Productos) ===== */
.gallery-manager {
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--panel-2);
    padding: var(--sp-4);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
    margin-bottom: var(--sp-4);
}

.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--panel);
    border: 1px solid var(--stroke);
    transition: border-color var(--transition);
}

.gallery-item:hover {
    border-color: var(--gold);
}

.gallery-item img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.gallery-item__delete {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-item__delete:hover {
    background: rgba(212, 175, 55, 0.8);
}

.gallery-upload {
    border-top: 1px solid var(--stroke);
    padding-top: var(--sp-4);
}

.gallery-upload__form {
    display: flex;
    gap: var(--sp-3);
    align-items: end;
}

.gallery-upload__form .form-group {
    margin-bottom: 0;
    flex: 1;
}

.gallery-upload__form .btn {
    margin-bottom: 0;
}
.form-group {
    margin-bottom: var(--sp-4);
}
.form-group label {
    display: block;
    margin-bottom: var(--sp-2);
    font-weight: 700;
    color: var(--fg);
    font-family: Cinzel, Inter, system-ui, Arial, sans-serif;
    letter-spacing: .03em;
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: var(--sp-2);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--fg);
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);
    outline: none;
}
.form-group textarea {
    height: 80px;
    resize: vertical;
}
.form-actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: flex-end;
    margin-top: var(--sp-4);
}
@media (max-width: 600px) {
    .modal__content {
        max-width: 98vw;
        padding: var(--sp-3);
    }
    .form-actions {
        flex-direction: column;
        gap: var(--sp-2);
        align-items: stretch;
    }
}
.form-group input, textarea, select{
  width:100%; color: var(--fg); background: var(--panel-2);
  border:1px solid var(--stroke); border-radius:.8rem;
  padding:.8rem .95rem; outline:none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
input::placeholder, textarea::placeholder{ color:#8b94a3; }
input:focus, textarea:focus, select:focus{
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,.22);
}

/* ===== Footer ===== */
.site-footer{
  border-top: 1px solid rgba(212,175,55,.18);
  background: #0a0c0f;
  padding: var(--sp-6) 0;
}
.footer__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.footer__links{ display:flex; gap: var(--sp-3); list-style:none; margin:0; padding:0; }
.footer__links a{ color: var(--fg-muted); text-decoration:none; }
.footer__links a:hover{ color: var(--fg); }

/* ===== Estilos para productos dinámicos ===== */
.loading {
  text-align: center;
  padding: 2rem;
  color: var(--fg-muted);
}

.loading p {
  margin: 0;
  font-size: 1.1rem;
}

.error {
  color: #e74c3c;
  text-align: center;
  padding: 2rem;
}

.badge--new {
  background: #3498db;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-weight: 600;
}

.product__media {
  width: 100%;
  aspect-ratio: 1/1;
  background: var(--panel-2);
  overflow: hidden; 
  position: relative;
}

.product__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  position: absolute;
  top: 0;
  left: 0;
}

.product__media:hover img {
  transform: scale(1.05);
}

/* ===== Sistema de rotación de imágenes ===== */
.product__media[data-multiple-images="true"] {
  cursor: pointer;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.product__media img {
  transition: transform 0.3s ease, opacity 0.2s ease;
}

/* ===== Colaboradores ===== */
.partners-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:768px){.partners-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.partners-grid{grid-template-columns:repeat(3,1fr)}}
.partner{position:relative;display:flex;align-items:center;gap:1rem;background:var(--panel);border:1px solid var(--stroke);border-radius:var(--radius);padding:1rem;transition:border-color var(--transition),box-shadow var(--transition)}
.partner:hover{border-color:var(--gold);box-shadow:var(--shadow-soft)}
.partner__media{width:80px;height:80px;object-fit:cover;border-radius:calc(var(--radius)/2);background:var(--panel-2);border:1px solid var(--stroke);flex-shrink:0}
.partner__body{display:flex;flex-direction:column;gap:.5rem;flex:1}
.pill{border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:.15rem .6rem;font-size:.8rem}
.socials{display:flex;gap:.5rem}
.socials a{display:inline-flex;align-items:center;gap:.3rem}
.filters{display:grid;gap:.75rem}
@media(min-width:900px){.filters{grid-template-columns:1fr 1fr 1fr auto}}
.faq details{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:1rem}
.faq details+details{margin-top:.75rem}

.product__name {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--fg);
}

.product__desc {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 1rem;
}

.product__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}

.price {
  font-weight: 600;
  color: var(--gold);
  font-size: 1rem;
}

.product--featured .price {
  color: var(--gold);
}

/* ===== Accesibilidad / motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ===== Panel de Administración - Dashboard ===== */
.admin-dashboard{ margin: var(--sp-6) 0; }
.dashboard-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.dashboard-card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--sp-5);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}

.dashboard-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.card__icon{
  font-size: 2.5rem;
  margin-bottom: var(--sp-3);
  display: block;
}

.dashboard-card h3{
  font-family: Cinzel, serif;
  font-size: 1.3rem;
  margin-bottom: var(--sp-2);
  color: var(--gold);
}

.dashboard-card p{
  color: var(--fg-muted);
  margin-bottom: var(--sp-4);
  flex-grow: 1;
}

.card__actions{
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.card__actions .btn{
  flex: 1;
  min-width: 120px;
}

/* Estadísticas rápidas */
.quick-stats{
  background: var(--panel-2);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--sp-5);
  margin-top: var(--sp-6);
}

.quick-stats h3{
  font-family: Cinzel, serif;
  margin-bottom: var(--sp-4);
  color: var(--gold);
}

.stats-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-4);
}

.stat-item{
  text-align: center;
  padding: var(--sp-3);
  background: var(--panel);
  border-radius: calc(var(--radius) / 2);
  border: 1px solid var(--stroke);
}

.stat-number{
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--sp-1);
}

.stat-label{
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* Botones deshabilitados */
.btn.disabled,
.btn:disabled{
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Responsive dashboard */
@media (max-width: 768px){
  .dashboard-grid{
    grid-template-columns: 1fr;
  }
  
  .card__actions{
    flex-direction: column;
  }
  
  .card__actions .btn{
    width: 100%;
  }
  
  .stats-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== Tablas de administración ===== */
.admin-table{
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-4) 0;
  background: var(--panel);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.admin-table th,
.admin-table td{
  padding: var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--stroke);
}

.admin-table th{
  background: var(--panel-2);
  font-weight: 600;
  color: var(--gold);
  font-family: Cinzel, serif;
}

.admin-table tr:hover{
  background: rgba(212, 175, 55, 0.05);
}

.admin-table .actions{
  display: flex;
  gap: var(--sp-2);
}

/* ===== Utilidades para administración ===== */
.admin-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.admin-header h2{
  font-family: Cinzel, serif;
  color: var(--gold);
  margin: 0;
}

.admin-actions{
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.breadcrumb{
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-bottom: var(--sp-4);
  color: var(--fg-muted);
}

.breadcrumb a{
  color: var(--gold);
  text-decoration: none;
}

.breadcrumb a:hover{
  text-decoration: underline;
}

.breadcrumb .separator{
  color: var(--fg-muted);
}

/* ===== Navbar de Administración ===== */
.admin-navbar{
  background: var(--panel);
  border-bottom: 2px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 100;
}

.admin-navbar__container{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3) 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin-navbar__logo{
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.admin-navbar__logo img{
  height: 40px;
  width: auto;
}

.admin-navbar__logo span{
  font-family: Cinzel, serif;
  font-size: 1.1rem;
  color: var(--gold);
  font-weight: 600;
}

.admin-navbar__menu{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.admin-navbar__link{
  color: var(--fg-muted);
  text-decoration: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  transition: all var(--transition);
  font-weight: 500;
}

.admin-navbar__link:hover{
  color: var(--fg);
  background: rgba(212, 175, 55, 0.1);
}

.admin-navbar__link--active{
  color: var(--gold) !important;
  background: rgba(212, 175, 55, 0.15) !important;
}

.admin-navbar__logout{
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color: var(--bg);
  border: none;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.admin-navbar__logout:hover{
  filter: brightness(1.1);
}

/* ===== Contenedor de Administración ===== */
.admin-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-6) 1rem;
}

.admin-container__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.admin-container__title{
  font-family: Cinzel, serif;
  color: var(--gold);
  margin: 0;
  font-size: 2rem;
}

/* ===== Filtros de Administración ===== */
.admin-filters{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: end;
}

.admin-filters__group{
  flex: 1;
  min-width: 200px;
}

/* ===== Tabla de Administración Mejorada ===== */
.admin-table-container{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  margin-bottom: var(--sp-6);
}

.admin-table__empty{
  text-align: center;
  color: var(--fg-muted);
  font-style: italic;
  padding: var(--sp-8) !important;
}

/* ===== Botones Mejorados ===== */
.btn--small{
  padding: var(--sp-1) var(--sp-2);
  font-size: 0.85rem;
}

.btn--primary{
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color: var(--bg);
  border: none;
}

.btn--secondary{
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--stroke);
}

.btn--danger{
  background: linear-gradient(90deg, #dc3545, #c82333);
  color: white;
  border: none;
}

.btn--primary:hover,
.btn--secondary:hover,
.btn--danger:hover{
  filter: brightness(1.1);
}

/* ===== Formularios Mejorados ===== */
.form__grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.form__group{
  margin-bottom: var(--sp-4);
}

.form__label{
  display: block;
  margin-bottom: var(--sp-2);
  font-weight: 600;
  color: var(--fg);
}

.form__input,
.form__select,
.form__textarea{
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) / 2);
  background: var(--panel);
  color: var(--fg);
  font-size: 1rem;
  transition: border-color var(--transition);
}

.form__input:focus,
.form__select:focus,
.form__textarea:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form__textarea{
  resize: vertical;
  min-height: 100px;
}

.form__file{
  width: 100%;
  padding: var(--sp-3);
  border: 2px dashed var(--stroke);
  border-radius: calc(var(--radius) / 2);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
}

.form__file:hover{
  border-color: var(--gold);
}

.form__help{
  display: block;
  margin-top: var(--sp-1);
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.form__actions{
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-top: var(--sp-6);
}

/* ===== Modal Mejorado ===== */
.modal__content--large{
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

/* ===== Badges y Etiquetas ===== */
.badge{
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge--admin{ background: linear-gradient(90deg, #dc3545, #c82333); color: white; }
.badge--moderador{ background: linear-gradient(90deg, #fd7e14, #e55a00); color: white; }
.badge--usuario{ background: linear-gradient(90deg, #6c757d, #545b62); color: white; }
.badge--activo{ background: linear-gradient(90deg, #28a745, #218838); color: white; }
.badge--inactivo{ background: linear-gradient(90deg, #6c757d, #545b62); color: white; }
.badge--suspendido{ background: linear-gradient(90deg, #dc3545, #c82333); color: white; }
.badge--categoria{ background: linear-gradient(90deg, var(--gold), var(--gold-2)); color: var(--bg); }

/* ===== Pedidos: estados y prioridades ===== */
.status-badge{ display:inline-block; padding:.35rem .6rem; border-radius:999px; font-weight:600; font-size:.8rem; }
.status-pendiente{ background: linear-gradient(90deg, #ffc107, #e0a800); color:#000; }
.status-enviado{ background: linear-gradient(90deg, #17a2b8, #138496); color:#fff; }
.status-entregado{ background: linear-gradient(90deg, #28a745, #218838); color:#fff; }
.status-cancelado{ background: linear-gradient(90deg, #dc3545, #c82333); color:#fff; }

.priority-badge{ display:inline-block; padding:.25rem .5rem; border-radius:6px; font-size:.75rem; font-weight:700; }
.priority-badge--high{ background: rgba(220,53,69,.18); color:#dc3545; animation: pulse 1.2s infinite; }
.priority-badge--medium{ background: rgba(255,193,7,.18); color:#ffc107; }
.priority-badge--low{ background: rgba(40,167,69,.18); color:#28a745; }

.order-item--priority-high{ border-color: #dc3545 !important; box-shadow: 0 0 0 2px rgba(220,53,69,.25); }
.order-item--priority-medium{ border-color: #ffc107 !important; }
.order-item--priority-low{ border-color: #28a745 !important; }
.order-item__badges{ display:flex; gap:.5rem; align-items:center; }

.notice-bar{ display:flex; gap:var(--sp-4); align-items:center; justify-content:space-between; background: var(--panel-2); border:1px solid var(--stroke); border-radius: var(--radius); padding: var(--sp-3); margin-bottom: var(--sp-4); box-shadow: var(--shadow-soft); }
.notice-bar__items{ display:flex; gap: var(--sp-3); align-items:center; }
.notice-item{ display:flex; gap:.5rem; align-items:center; padding:.4rem .6rem; border-radius:8px; }
.notice-item--warning{ background: rgba(255,193,7,.12); color:#ffc107; }
.notice-item--danger{ background: rgba(220,53,69,.12); color:#dc3545; }
.notice-item--info{ background: rgba(23,162,184,.12); color:#17a2b8; }
.filter-chips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.chip{ padding:.4rem .7rem; border:1px solid var(--stroke); background: var(--panel); border-radius:999px; cursor:pointer; font-weight:600; color: var(--fg-muted); }
.chip.is-active{ color: var(--fg); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.10); }

@keyframes pulse{ 0%{ transform: scale(1); } 50%{ transform: scale(1.04); } 100%{ transform: scale(1); } }

/* ===== Pedidos: tarjetas tipo esquema ===== */
.order-card{
  background: var(--panel);
  border: 2px solid var(--stroke);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  transition: all var(--transition);
  cursor: pointer;
}
.order-card:hover{
  border-color: var(--gold);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.table-title{
  font-family: Cinzel, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: var(--sp-3);
  text-align: left;
  border-bottom: 2px solid var(--stroke);
  padding-bottom: var(--sp-2);
  display:flex;
  align-items:center;
  justify-content: space-between;
}

/* ===== Stock Indicador ===== */
.stock{
  font-weight: 700;
  padding: var(--sp-1) var(--sp-2);
  border-radius: calc(var(--radius) / 2);
}

.stock--alto{ background: rgba(40, 167, 69, 0.2); color: #28a745; }
.stock--medio{ background: rgba(255, 193, 7, 0.2); color: #ffc107; }
.stock--bajo{ background: rgba(220, 53, 69, 0.2); color: #dc3545; }

/* ===== Acciones de Tabla ===== */
.acciones{
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

/* ===== Imagen de Producto ===== */
.producto-imagen img{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: calc(var(--radius) / 2);
  border: 1px solid var(--stroke);
}

.producto-info strong{
  display: block;
  margin-bottom: var(--sp-1);
}

.producto-info small{
  color: var(--fg-muted);
  font-size: 0.85rem;
}

/* ===== Preview de Imagen ===== */
.imagen-preview{
  margin-top: var(--sp-3);
  text-align: center;
}

.imagen-preview img{
  max-width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: calc(var(--radius) / 2);
  border: 1px solid var(--stroke);
}

.imagen-preview p{
  margin-top: var(--sp-2);
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* ===== Mensajes Flotantes ===== */
.mensaje-flotante{
  position: fixed;
  top: 20px;
  right: 20px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  color: white;
  font-weight: 600;
  z-index: 1000;
  animation: slideIn 0.3s ease-out;
}

.mensaje-flotante--success{
  background: linear-gradient(90deg, #28a745, #218838);
}

.mensaje-flotante--error{
  background: linear-gradient(90deg, #dc3545, #c82333);
}

@keyframes slideIn{
  from{
    transform: translateX(100%);
    opacity: 0;
  }
  to{
    transform: translateX(0);
    opacity: 1;
  }
}