:root{
  --verde:#22c55e;--verde-oscuro:#16a34a;--verde-neon:#4ade80;
  --verde-dim:rgba(34,197,94,0.12);--verde-border:rgba(34,197,94,0.3);
  --verde-glow:rgba(34,197,94,0.6);
  --bg-base:#060a06;--bg-card:#0d130d;--bg-panel:#111811;--bg-input:#0a100a;
  --text-primary:#f0faf0;--text-secondary:#86efac;--text-muted:#4b7a4b;
  --border:rgba(34,197,94,0.15);--danger:#ef4444;--danger-bg:rgba(239,68,68,0.1);
  --sidebar-w:248px;
  /* Radios modernos */
  --radius-xs:8px; --radius:12px; --radius-lg:18px; --radius-xl:24px; --radius-2xl:32px;
  /* Sombras */
  --shadow-sm:0 2px 8px rgba(0,0,0,.25);
  --shadow-md:0 4px 20px rgba(0,0,0,.35);
  --shadow-lg:0 8px 40px rgba(0,0,0,.45);
  --shadow-verde:0 4px 20px rgba(34,197,94,.2);
  /* Transición estándar */
  --ease:cubic-bezier(.25,.46,.45,.94);
}
/* Misma familia que usa el generador de tarjetas (php/lib/tarjeta_generador.php)
   — se carga aquí solo para que el editor visual pueda medir el ancho real
   de cada texto al calcular su caja de selección/manija de tamaño. */
@font-face { font-family: 'PoppinsTarjeta'; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'PoppinsTarjeta'; src: url('../fonts/Poppins-Medium.ttf')  format('truetype'); font-weight: 500; }
@font-face { font-family: 'PoppinsTarjeta'; src: url('../fonts/Poppins-Bold.ttf')    format('truetype'); font-weight: 700; }
/* Mismo criterio para las 3 tipografías nuevas del editor de tarjeta
   (ver tarjetaPropFamilia en app.js y _fuenteArchivo() en
   tarjeta_generador.php) — solo existen en Regular/Bold, igual que en
   el generador PHP; sin este @font-face, _medirTextoTarjeta() mediría
   el texto con la fuente de reemplazo del navegador en vez de la real,
   y la caja de selección/manija quedaría desalineada con el PNG final. */
@font-face { font-family: 'PlayfairTarjeta';   src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype'); font-weight: 400; }
@font-face { font-family: 'PlayfairTarjeta';   src: url('../fonts/PlayfairDisplay-Bold.ttf')    format('truetype'); font-weight: 700; }
@font-face { font-family: 'MontserratTarjeta'; src: url('../fonts/Montserrat-Regular.ttf')      format('truetype'); font-weight: 400; }
@font-face { font-family: 'MontserratTarjeta'; src: url('../fonts/Montserrat-Bold.ttf')         format('truetype'); font-weight: 700; }
@font-face { font-family: 'OswaldTarjeta';     src: url('../fonts/Oswald-Regular.ttf')          format('truetype'); font-weight: 400; }
@font-face { font-family: 'OswaldTarjeta';     src: url('../fonts/Oswald-Bold.ttf')             format('truetype'); font-weight: 700; }

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg-base);color:var(--text-primary);min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;}::-webkit-scrollbar-track{background:var(--bg-base);}::-webkit-scrollbar-thumb{background:var(--verde-border);border-radius:2px;}
.pantalla{display:none;}.pantalla.activa{display:flex;}
/* LOGIN — diseño galaxia */
#login{
  min-height:100vh;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  position:relative;
  background:#020402;
  overflow:hidden;
}
.login-particles{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
/* Spotlight blanco en la parte superior central */
.login-spotlight{
  position:absolute;
  top:-120px;
  left:50%;
  transform:translateX(-50%);
  width:700px;
  height:520px;
  background:radial-gradient(ellipse at 50% 0%,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.04) 30%,
    transparent 70%);
  pointer-events:none;
  z-index:1;
}
.login-logo{text-align:center;margin-bottom:1.75rem;position:relative;z-index:2;}
.login-logo .logo-icon{
  background: transparent;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .5rem;
  position: relative;
  width: auto;
  height: auto;
  overflow: visible;
}
.login-logo .logo-icon::before{
  content:'';
  display:none;
}
.login-logo .logo-icon img{
  width: 520px;
  max-width: 98vw;
  height: auto;
  border-radius: 0;
  object-fit: contain;
  position: relative;
  z-index: 1;
  filter: none;
}
.logo-emoji-grande{
  font-size:3.2rem;
  line-height:1;
  position:relative;z-index:1;
  filter: none;
}
@keyframes logoGlow{
  0%,100%{opacity:.7;transform:scale(1);}
  50%{opacity:1;transform:scale(1.06);}
}
.login-logo h1{font-size:1.85rem;font-weight:800;color:#fff;letter-spacing:-.01em;}
.login-logo p{font-size:.85rem;color:rgba(255,255,255,.45);margin-top:3px;}
.login-tagline{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:1.75rem;
  position:relative;z-index:2;
}
.login-tagline span{color:var(--verde);text-shadow:0 0 10px rgba(34,197,94,.5);}
.login-card{
  background:rgba(10,18,10,.82);
  border:1px solid rgba(34,197,94,.22);
  border-radius:16px;
  padding:2rem 2rem 1.75rem;
  width:100%;max-width:420px;
  position:relative;z-index:2;
  backdrop-filter:blur(12px);
  box-shadow:0 8px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(34,197,94,.1);
}
.login-tabs{display:flex;gap:4px;margin-bottom:1.5rem;background:var(--bg-input);border-radius:8px;padding:4px;}
.login-tab{flex:1;padding:.5rem;border:none;background:none;border-radius:6px;color:var(--text-muted);font-size:.83rem;cursor:pointer;transition:all .2s;}
.login-tab.activo{background:var(--verde-dim);color:var(--verde);font-weight:600;border:1px solid var(--verde-border);}
.campo{position:relative;margin-bottom:1rem;}
.campo-icono{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none;}
.campo input{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:#fff;font-size:.95rem;
  padding:.78rem 1rem .78rem 2.6rem;
  outline:none;
  transition:border-color .2s, background .2s;
}
.campo input::placeholder{color:rgba(255,255,255,.3);}
.campo input:focus{border-color:var(--verde);background:rgba(34,197,94,.06);}
.campo-ojo{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);cursor:pointer;}
.btn-ingresar{
  width:100%;padding:.85rem;
  background:linear-gradient(135deg,#16a34a 0%,#22c55e 60%,#4ade80 100%);
  border:none;border-radius:10px;
  color:#000;font-size:.97rem;font-weight:800;
  cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 20px rgba(34,197,94,.35);
  letter-spacing:.02em;
}
.btn-ingresar:hover{
  box-shadow:0 6px 28px rgba(34,197,94,.55);
  transform:translateY(-1px);
}
.btn-ingresar:active{transform:translateY(0);}
.acceso-exclusivo{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;justify-content:center;gap:6px;}
.error-login{background:var(--danger-bg);border:1px solid rgba(239,68,68,.3);border-radius:var(--radius);padding:.6rem .9rem;font-size:.83rem;color:#fca5a5;margin-bottom:1rem;display:none;}
.token-info{background:rgba(250,204,21,.08);border:1px solid rgba(250,204,21,.2);border-radius:8px;padding:.75rem;margin-top:.75rem;font-size:.78rem;color:#fde047;}
/* LAYOUT */
#app{min-height:100vh;}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--bg-card);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;padding:0 0 1.5rem;}
.sidebar-logo{padding:1.25rem 1.25rem 1rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.sidebar-logo-icono{width:36px;height:36px;border-radius:50%;background:var(--verde-dim);border:1px solid var(--verde-border);display:flex;align-items:center;justify-content:center;color:var(--verde);flex-shrink:0;font-weight:900;letter-spacing:-2px;}
.sidebar-logo-texto h2{font-size:.95rem;font-weight:700;}.sidebar-logo-texto p{font-size:.7rem;color:var(--text-muted);}
.sidebar-nav{flex:1;padding:1rem .75rem;overflow-y:auto;}
.nav-grupo{margin-bottom:1.5rem;}
.nav-grupo-titulo{font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);padding:0 .5rem;margin-bottom:.4rem;}
.nav-item{display:flex;align-items:center;gap:10px;padding:.55rem .75rem;border-radius:8px;cursor:pointer;transition:all .15s;font-size:.88rem;color:var(--text-primary);margin-bottom:2px;border:1px solid transparent;}
.nav-item:hover{background:var(--verde-dim);color:var(--verde-neon);}
.nav-item.activo{background:var(--verde-dim);color:var(--verde);border-color:var(--verde-border);font-weight:600;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;}
.nav-badge{margin-left:auto;background:var(--verde);color:#000;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:10px;}
.sidebar-footer{padding:0 .75rem;}
.nav-item-danger{color:#fca5a5!important;}.nav-item-danger:hover{background:var(--danger-bg)!important;}
.topbar{position:fixed;top:0;left:var(--sidebar-w);right:0;height:56px;background:var(--bg-card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;z-index:90;}
.topbar-buscar{display:flex;align-items:center;gap:8px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);padding:0 .75rem;flex:1;max-width:420px;}
.topbar-buscar input{background:none;border:none;outline:none;color:var(--text-primary);font-size:.88rem;width:100%;padding:.55rem 0;}
.topbar-buscar input::placeholder{color:var(--text-muted);}
.topbar-bienvenida span{display:block;font-size:.72rem;color:var(--text-muted);}
.topbar-bienvenida strong{font-size:.88rem;color:var(--verde);}
.topbar-avatar{width:32px;height:32px;border-radius:50%;background:var(--verde-dim);border:1px solid var(--verde-border);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--verde);}
.carrito-btn{position:relative;padding:.4rem .7rem;background:var(--verde-dim);border:1px solid var(--verde-border);border-radius:8px;color:var(--verde);cursor:pointer;display:flex;align-items:center;gap:5px;font-size:.82rem;font-weight:600;transition:all .15s;}
.carrito-btn:hover{background:rgba(34,197,94,.2);}
.carrito-count{position:absolute;top:-6px;right:-6px;background:var(--verde);color:#000;font-size:.62rem;font-weight:800;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.contenido{
  margin-left:var(--sidebar-w);
  padding-top:56px;
  min-height:100vh;
  width:calc(100% - var(--sidebar-w));
  box-sizing:border-box;
  overflow-x:hidden;
  transition:margin-left .28s cubic-bezier(.4,0,.2,1);
}
.pagina{display:none;padding:1.5rem 2rem;}.pagina.activa{display:block;box-sizing:border-box;width:100%;overflow-x:hidden;}
.pag-titulo{font-size:1.35rem;font-weight:700;margin-bottom:4px;}
.pag-subtitulo{font-size:.83rem;color:var(--text-muted);margin-bottom:1.5rem;}
/* METRICAS */
.metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:1.75rem;}
.metrica-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.1rem 1.25rem;}
.metrica-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:6px;}
.metrica-valor{font-size:1.6rem;font-weight:700;}
.metrica-sub{font-size:.75rem;color:var(--verde);margin-top:2px;}
/* BANNER */
.banner{background:var(--bg-card);border:1px solid var(--verde-border);border-radius:var(--radius-lg);padding:2rem 2.5rem;margin-bottom:1.75rem;position:relative;overflow:hidden;}
.banner::before{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.08) 0%,transparent 70%);pointer-events:none;}
.banner-texto h2{font-size:1.5rem;font-weight:800;line-height:1.3;max-width:420px;}
.banner-texto h2 em{color:var(--verde);font-style:normal;}
.banner-badges{display:flex;gap:1.5rem;margin-top:1rem;}
.banner-badge{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-secondary);}
.banner-badge svg{color:var(--verde);}
/* CATEGORIAS CON EFECTO LED + ZOOM */
.seccion-titulo-fila{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;}
.seccion-titulo{font-size:1rem;font-weight:600;}
.seccion-sub{font-size:.78rem;color:var(--text-muted);}
.btn-ver-todos{display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--border);border-radius:6px;padding:.4rem .8rem;color:var(--verde);font-size:.8rem;cursor:pointer;transition:all .15s;}
.btn-ver-todos:hover{background:var(--verde-dim);border-color:var(--verde-border);}
.grid-categorias{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(110px,1fr));
  gap:10px;
  margin-bottom:1.5rem;
}
.cat-card{background:var(--bg-card);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.1rem .75rem;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden;transition:transform .28s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .3s;}
.cat-card:hover{transform:scale(1.09) translateY(-4px);border-color:var(--verde);box-shadow:0 0 0 1.5px var(--verde),0 0 14px rgba(34,197,94,.7),0 0 35px rgba(34,197,94,.25),inset 0 0 18px rgba(34,197,94,.06);}
.cat-card:hover .cat-icon{filter:drop-shadow(0 0 7px var(--verde)) drop-shadow(0 0 14px rgba(34,197,94,.5));}
.cat-card:hover .cat-label{color:var(--verde-neon);}
.cat-icon{font-size:1.9rem;transition:filter .3s;}
.cat-label{font-size:.78rem;color:var(--text-secondary);font-weight:500;transition:color .2s;}
@keyframes ledPulse{0%,100%{box-shadow:0 0 0 1.5px var(--verde),0 0 14px rgba(34,197,94,.7),0 0 35px rgba(34,197,94,.25);}55%{box-shadow:0 0 0 1.5px var(--verde),0 0 22px rgba(34,197,94,.9),0 0 50px rgba(34,197,94,.4);}}
.cat-card:hover{animation:ledPulse 1.4s ease-in-out infinite;}
/* SUBCATS */
.subcats-wrap{margin-bottom:1rem;}
.subcats-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:.5rem;}
.subcat-chip{padding:.28rem .75rem;border-radius:20px;font-size:.75rem;cursor:pointer;border:1px solid var(--border);color:var(--text-muted);background:none;transition:all .15s;}
.subcat-chip.activo{background:var(--verde-dim);color:var(--verde);border-color:var(--verde-border);}
.subcat-chip:hover:not(.activo){border-color:var(--verde-border);color:var(--text-secondary);}
/* GRID PRODUCTOS CATÁLOGO */
.grid-productos-pub{
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:12px;
  margin-bottom:1.5rem;
  width:100%;
  box-sizing:border-box;
}
.prod-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:all .2s;}
.prod-card:hover{border-color:var(--verde-border);transform:translateY(-2px);box-shadow:0 4px 20px rgba(34,197,94,.1);}
.prod-card-img-wrap{width:100%;height:140px;background:var(--bg-panel);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.prod-card-img-wrap img{width:100%;height:100%;object-fit:contain;background:var(--bg-card);}
.prod-card-img-wrap .sin-img{font-size:2.5rem;opacity:.3;}
.prod-card-body{padding:.85rem;}
.prod-card-cat{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin-bottom:2px;}
.prod-card-subcat{font-size:.67rem;color:var(--text-muted);margin-bottom:3px;}
.prod-card-nombre{font-size:.88rem;font-weight:600;margin-bottom:2px;}
.prod-card-codigo{font-size:.72rem;color:var(--verde);margin-bottom:6px;font-family:monospace;}
.prod-card-precio{font-size:1rem;font-weight:700;color:var(--verde);}
.btn-agregar{width:100%;margin-top:.65rem;padding:.45rem;background:var(--verde-dim);border:1px solid var(--verde-border);border-radius:7px;color:var(--verde);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s;}
.btn-agregar:hover{background:rgba(34,197,94,.22);}
/* DETALLE */
.prod-detalle-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.75rem;max-width:780px;}
.prod-detalle-img{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-card);border:1px solid var(--border);aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--text-muted);}
.prod-detalle-img img{width:100%;height:100%;object-fit:contain;}
.prod-detalle-info{display:flex;flex-direction:column;gap:.75rem;}
.prod-detalle-cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);}
.prod-detalle-nombre{font-size:1.4rem;font-weight:800;line-height:1.2;}
.prod-detalle-codigo{font-size:.85rem;font-family:monospace;color:var(--verde);background:var(--verde-dim);border:1px solid var(--verde-border);display:inline-block;padding:3px 10px;border-radius:6px;}
.prod-detalle-precio{font-size:1.8rem;font-weight:800;color:var(--verde);}
.prod-detalle-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.6;}
.prod-detalle-prov{font-size:.8rem;color:var(--text-muted);padding:.6rem .9rem;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;}
.qty-ctrl{display:flex;align-items:center;gap:10px;}
.qty-btn{border-radius:6px;background:var(--verde-dim);border:1px solid var(--verde-border);color:var(--verde);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.qty-btn-sm{width:24px;height:24px;font-size:.85rem;}
.qty-btn-lg{width:32px;height:32px;font-size:1.1rem;}
.qty-num{font-weight:700;min-width:24px;text-align:center;}
.btn-agregar-detalle{flex:1;padding:.7rem 1.2rem;background:var(--verde);border:none;border-radius:10px;color:#000;font-size:.9rem;font-weight:800;cursor:pointer;transition:opacity .15s;}
.btn-agregar-detalle:hover{opacity:.88;}
.btn-wa-detalle{padding:.65rem 1rem;background:rgba(34,197,94,.1);border:1px solid var(--verde-border);border-radius:10px;color:var(--verde);font-size:.82rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;}
/* CARRITO */
.carrito-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;justify-content:flex-end;}
.carrito-overlay.visible{display:flex;}
.carrito-panel{background:var(--bg-panel);width:400px;max-width:95vw;height:100%;display:flex;flex-direction:column;border-left:1px solid var(--verde-border);}
.carrito-header{padding:1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.carrito-header h2{font-size:1rem;font-weight:700;}
.carrito-cerrar{background:none;border:none;color:var(--text-muted);font-size:1.3rem;cursor:pointer;}
.carrito-items{flex:1;overflow-y:auto;padding:1rem;}
.carrito-item{display:flex;gap:10px;padding:.75rem;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;margin-bottom:.65rem;align-items:flex-start;}
.carrito-item-thumb{width:52px;height:52px;border-radius:7px;background:var(--bg-input);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--text-muted);}
.carrito-item-thumb img{width:100%;height:100%;object-fit:cover;}
.carrito-item-info{flex:1;}
.carrito-item-nombre{font-size:.85rem;font-weight:600;margin-bottom:2px;}
.carrito-item-codigo{font-size:.7rem;color:var(--verde);font-family:monospace;}
.carrito-item-precio{font-size:.83rem;color:var(--verde);font-weight:700;}
.carrito-item-ctrl{display:flex;align-items:center;gap:6px;margin-top:5px;}
.carrito-item-del{background:var(--danger-bg);border:1px solid rgba(239,68,68,.2);color:#fca5a5;border-radius:5px;width:22px;height:22px;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;margin-left:auto;}
.carrito-footer{padding:1.25rem;border-top:1px solid var(--border);}
.carrito-total{display:flex;justify-content:space-between;font-size:1rem;font-weight:700;margin-bottom:1rem;}
.carrito-total span:last-child{color:var(--verde);}
.btn-checkout{width:100%;padding:.8rem;background:linear-gradient(135deg,var(--verde-oscuro),var(--verde));border:none;border-radius:10px;color:#000;font-size:.93rem;font-weight:800;cursor:pointer;margin-bottom:.5rem;transition:opacity .15s;}
.btn-checkout:hover{opacity:.9;}
.btn-wa-checkout{width:100%;padding:.7rem;background:rgba(34,197,94,.1);border:1px solid var(--verde-border);border-radius:10px;color:var(--verde);font-size:.85rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:all .15s;}
.btn-wa-checkout:hover{background:rgba(34,197,94,.2);}
.carrito-vacio{padding:3rem 1rem;text-align:center;color:var(--text-muted);}
.carrito-vacio p{font-size:.88rem;margin-top:.75rem;}
/* MODALES */
.modal-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:400;
  align-items:center;
  justify-content:center;
  padding:1rem 1rem calc(1rem + 70px); /* margen en mobile; +70px para barra de audio */
}
.modal-overlay.visible{display:flex;}
.modal{
  background:var(--bg-panel);
  border:1px solid var(--verde-border);
  border-radius:var(--radius-lg);
  width:100%;
  max-width:500px;
  /* Altura máxima con margen para respirar */
  max-height:calc(92vh - 70px); /* -70px por barra de audio fija */
  /* Flex column para que botones queden fijos abajo */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}
/* El contenido interior scrollea, los botones NO */
.modal-body {
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:1.75rem 1.75rem 0;
  /* Scroll suave */
  scroll-behavior:smooth;
  overscroll-behavior:contain;
}
.modal-body::-webkit-scrollbar{width:4px;}
.modal-body::-webkit-scrollbar-track{background:transparent;}
.modal-body::-webkit-scrollbar-thumb{background:var(--verde-border);border-radius:2px;}
/* Padding directo si no usa .modal-body */
.modal > h2:first-child,
.modal > .form-grid:first-child,
.modal > div:not(.modal-body):not(.modal-botones) {
  /* fallback — el padding viene del propio elemento */
}
.modal h2{font-size:1.05rem;font-weight:700;margin-bottom:1.25rem;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;}
.form-grupo{display:flex;flex-direction:column;gap:6px;}
.form-grupo.col-2{grid-column:span 2;}
.form-grupo label{font-size:.78rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;}
.form-grupo input,.form-grupo select,.form-grupo textarea{background:var(--bg-input);border:1px solid var(--border);border-radius:8px;padding:.6rem .8rem;color:var(--text-primary);font-size:.88rem;outline:none;transition:border-color .15s;font-family:inherit;}
.form-grupo input:focus,.form-grupo select:focus,.form-grupo textarea:focus{border-color:var(--verde);}
.form-grupo select option{
  background: var(--bg-panel);
  color: var(--text-primary);
}
select option {
  background: #0d130d;
  color: #f0faf0;
}
.slide-mini-input option,
.form-grupo select option {
  background: #0d130d !important;
  color: #f0faf0 !important;
}
.modal-botones{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  /* Fijo al fondo del modal */
  flex-shrink:0;
  padding:1rem 1.75rem 1.5rem;
  border-top:1px solid var(--border);
  background:var(--bg-panel);
  position:relative;
  z-index:1;
}
.metodos-pago{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem;}
.metodo-btn{padding:.65rem;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:.82rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:7px;}
.metodo-btn.activo{border-color:var(--verde);background:var(--verde-dim);color:var(--verde);}
.resumen-pedido{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:.9rem;margin-bottom:1rem;font-size:.82rem;}
.resumen-pedido .linea{display:flex;justify-content:space-between;padding:3px 0;color:var(--text-secondary);}
.resumen-pedido .linea.total{font-weight:700;color:var(--verde);font-size:.95rem;border-top:1px solid var(--border);margin-top:.4rem;padding-top:.4rem;}
/* TABLAS */
.tabla-wrap{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden;width:100%;}
table{width:100%;border-collapse:collapse;}
thead th{padding:.65rem 1rem;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);background:var(--bg-panel);border-bottom:1px solid var(--border);}
tbody td{padding:.75rem 1rem;font-size:.87rem;border-bottom:1px solid var(--border);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(34,197,94,.03);}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;}
.badge-verde{background:rgba(34,197,94,.15);color:var(--verde);}
.badge-rojo{background:var(--danger-bg);color:#fca5a5;}
.badge-gris{background:rgba(255,255,255,.05);color:var(--text-muted);}
.badge-gold{background:rgba(250,204,21,.12);color:#fde047;}
.acciones{display:flex;gap:6px;flex-wrap:wrap;}
.btn-accion{padding:.3rem .7rem;border-radius:6px;font-size:.75rem;cursor:pointer;border:1px solid;transition:all .15s;font-weight:600;}
.btn-editar{background:var(--verde-dim);color:var(--verde);border-color:var(--verde-border);}
.btn-editar:hover{background:rgba(34,197,94,.2);}
.btn-eliminar{background:var(--danger-bg);color:#fca5a5;border-color:rgba(239,68,68,.3);}
.btn-eliminar:hover{background:rgba(239,68,68,.2);}
/* BOTONES */
.btn-nuevo{display:inline-flex;align-items:center;gap:6px;background:var(--verde);color:#000;border:none;border-radius:8px;padding:.55rem 1rem;font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity .15s;}
.btn-nuevo:hover{opacity:.88;}
.btn-cancelar{padding:.55rem 1rem;border-radius:8px;background:none;border:1px solid var(--border);color:var(--text-muted);font-size:.85rem;cursor:pointer;transition:all .15s;}
.btn-cancelar:hover{border-color:var(--text-muted);color:var(--text-primary);}
.btn-guardar{padding:.55rem 1.2rem;border-radius:8px;background:var(--verde);border:none;color:#000;font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity .15s;}
.btn-guardar:hover{opacity:.88;}
/* UPLOAD */
.upload-area{border:2px dashed var(--border);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg-input);}
.upload-area:hover,.upload-area.drag{border-color:var(--verde);background:var(--verde-dim);}
.upload-area input[type=file]{display:none;}
.upload-preview{width:100%;height:120px;object-fit:cover;border-radius:8px;margin-top:.75rem;display:none;}
/* TOKENS */
.token-card{background:linear-gradient(135deg,rgba(133,77,14,.2),rgba(202,138,4,.1));border:1px solid rgba(250,204,21,.25);border-radius:var(--radius-lg);padding:1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.65rem;}
.token-code{font-family:monospace;font-size:.95rem;color:#fde047;letter-spacing:.05em;}
.token-vence{font-size:.72rem;color:#ca8a04;}
.token-estado-ok{color:#4ade80;font-size:.72rem;}
.token-estado-exp{color:#f87171;font-size:.72rem;}
.progreso-token{height:4px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;overflow:hidden;}
.progreso-token-fill{height:100%;background:linear-gradient(90deg,#ca8a04,#fde047);border-radius:2px;}
/* FILTROS */
.filtros{display:flex;gap:8px;flex-wrap:wrap;}
.filtro-chip{padding:.3rem .85rem;border-radius:20px;font-size:.78rem;cursor:pointer;border:1px solid var(--border);color:var(--text-muted);background:none;transition:all .15s;}
.filtro-chip.activo{background:var(--verde-dim);color:var(--verde);border-color:var(--verde-border);}
.filtro-chip:hover:not(.activo){border-color:var(--verde-border);color:var(--text-secondary);}
/* MISC */
.banner-wa{display:flex;align-items:center;justify-content:center;gap:10px;padding:.9rem 1.5rem;background:var(--bg-card);border:1px solid var(--verde-border);border-radius:var(--radius-lg);font-size:.85rem;color:var(--text-secondary);cursor:pointer;transition:background .15s;margin-top:1rem;}
.banner-wa:hover{background:var(--verde-dim);}
.banner-wa strong{color:var(--verde);}
.aside-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;}
.aside-card h3{font-size:.9rem;font-weight:600;margin-bottom:6px;}
.aside-card p{font-size:.78rem;color:var(--text-muted);margin-bottom:10px;}
.aside-link{font-size:.8rem;color:var(--verde);display:flex;align-items:center;gap:4px;cursor:pointer;}
.aside-icon{font-size:1.8rem;margin-bottom:8px;}
.dashboard-layout{display:grid;grid-template-columns:1fr 300px;gap:1.25rem;align-items:start;}
.dashboard-aside{display:flex;flex-direction:column;gap:12px;}
.btn-whatsapp{display:flex;align-items:center;gap:6px;width:100%;padding:.6rem .9rem;background:rgba(34,197,94,.15);border:1px solid var(--verde-border);border-radius:8px;color:var(--verde);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;margin-top:6px;}
.btn-whatsapp:hover{background:rgba(34,197,94,.25);}
.estado-vacio{padding:3rem 1rem;text-align:center;color:var(--text-muted);}
.estado-vacio p{font-size:.88rem;margin-top:.5rem;}
.toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg-card);border:1px solid var(--verde-border);border-radius:var(--radius);padding:.75rem 1.25rem;font-size:.85rem;color:var(--verde);display:flex;align-items:center;gap:8px;z-index:600;transform:translateY(80px);transition:transform .3s;box-shadow:0 4px 20px rgba(0,0,0,.4);}
.toast.visible{transform:translateY(0);}
.toast-error{border-color:rgba(239,68,68,.3);color:#fca5a5;}
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-muted);margin-bottom:1.25rem;}
.breadcrumb span{cursor:pointer;}.breadcrumb span:hover{color:var(--verde);}
.breadcrumb .sep{color:var(--border);}.breadcrumb .actual{color:var(--text-primary);}


/* ═══════════════════════════════════════════════
   FONDO GALAXIA — no afecta el layout
   El canvas va en position:fixed detrás de todo
   ═══════════════════════════════════════════════ */

/* Canvas fijo de fondo — siempre detrás, nunca afecta layout */
#galaxiaFondoApp {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Asegurar que todo el contenido visible quede sobre el canvas */
.sidebar   { z-index: 100; }
.topbar    { z-index: 90;  }
.contenido { z-index: 1; position: relative; }
.pagina    { position: relative; z-index: 1; }

/* Carrito — el canvas va absoluto dentro del panel */
.carrito-panel { position: relative; overflow: hidden; }
#galaxiaCarrito {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.carrito-header,
.carrito-items,
.carrito-footer { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    width: 240px;
    z-index: 200;
  }
  .sidebar.abierto { transform: translateX(0); }
  .topbar { left: 0; }
  .contenido { margin-left: 0; }
  .dashboard-layout { grid-template-columns: 1fr; }
  .grid-categorias { grid-template-columns: repeat(auto-fill, minmax(100px,1fr)); }
  .grid-productos-pub { grid-template-columns: repeat(2, 1fr) !important; }
  .prod-detalle-wrap { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grupo.col-2 { grid-column: span 1; }
  .carrito-panel { width: 100%; max-width: 100vw; }
  .metricas { grid-template-columns: repeat(2, 1fr); }
  .banner { padding: 1.25rem; }
  .banner-texto h2 { font-size: 1.15rem; }
  .banner-badges { flex-wrap: wrap; gap: .75rem; }
  .topbar-buscar { max-width: 200px; }
  table { font-size: .78rem; }
  thead th { padding: .5rem .6rem; }
  tbody td { padding: .55rem .6rem; }
}

@media (max-width: 480px) {
  .grid-categorias { grid-template-columns: repeat(3, 1fr); }
  .metricas { grid-template-columns: 1fr; }
  .topbar-buscar { display: none; }
  .banner-badges { display: none; }
}


/* ════════════════════════════════════════════
   MODO CLARO — variables que se sobreescriben
   ════════════════════════════════════════════ */
body.tema-claro {
  --verde:#15803d; --verde-oscuro:#166534; --verde-neon:#16a34a;
  --verde-dim:rgba(21,128,61,0.12); --verde-border:rgba(21,128,61,0.55);
  --verde-glow:rgba(21,128,61,0.35);
  --bg-base:#f0fdf4; --bg-card:#ffffff; --bg-panel:#f7fef9; --bg-input:#e8f5ec;
  --text-primary:#052e16; --text-secondary:#14532d; --text-muted:#4b7a4b;
  --border:rgba(21,128,61,0.45); --border-hover:rgba(21,128,61,0.7);
  --danger:#b91c1c; --danger-bg:rgba(185,28,28,0.08);
}
/* Sidebar claro — bordes y fondo bien definidos */
body.tema-claro .sidebar {
  background:#ffffff;
  border-right:2px solid rgba(21,128,61,0.4);
  box-shadow:3px 0 16px rgba(0,0,0,.1);
}
body.tema-claro .sidebar-logo {
  border-bottom:2px solid rgba(21,128,61,0.35);
}
body.tema-claro .nav-item { color:#14532d; }
body.tema-claro .nav-item:hover { background:rgba(21,128,61,.12); color:#052e16; }
body.tema-claro .nav-item.activo {
  background:rgba(21,128,61,.15);
  color:#052e16;
  border-color:rgba(21,128,61,.6);
  font-weight:700;
}
body.tema-claro .nav-grupo-titulo { color:#4b7a4b; }
body.tema-claro .nav-badge { background:#15803d; color:#fff; }

/* Topbar claro */
body.tema-claro .topbar {
  background:#ffffff;
  border-bottom:2px solid rgba(21,128,61,0.35);
  box-shadow:0 2px 10px rgba(0,0,0,.07);
}
body.tema-claro .topbar-buscar {
  background:#f0fdf4;
  border:1.5px solid rgba(21,128,61,.5);
}
body.tema-claro .topbar-buscar input { color:#052e16; }
body.tema-claro .topbar-buscar input::placeholder { color:#4b7a4b; }
body.tema-claro .topbar-bienvenida span { color:#4b7a4b; }
body.tema-claro .topbar-bienvenida strong { color:#15803d; }
body.tema-claro .topbar-avatar {
  background:rgba(21,128,61,.15);
  border:2px solid rgba(21,128,61,.55);
  color:#052e16;
}
body.tema-claro .carrito-btn {
  background:rgba(21,128,61,.12);
  border:1.5px solid rgba(21,128,61,.55);
  color:#15803d;
}

/* Cards y panels */
body.tema-claro .aside-card {
  background:#ffffff;
  border:1.5px solid rgba(21,128,61,.4);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
body.tema-claro .metrica-card {
  background:#ffffff;
  border:1.5px solid rgba(21,128,61,.4);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
body.tema-claro .metrica-label { color:#4b7a4b; }
body.tema-claro .metrica-valor { color:#052e16; }
body.tema-claro .metrica-sub   { color:#15803d; }

/* Tablas */
body.tema-claro .tabla-wrap {
  background:#ffffff;
  border:1.5px solid rgba(21,128,61,.4);
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
body.tema-claro thead th {
  background:#f0fdf4;
  color:#14532d;
  border-bottom:2px solid rgba(21,128,61,.4);
}
body.tema-claro tbody td { color:#052e16; border-bottom-color:rgba(21,128,61,.2); }
body.tema-claro tbody tr:hover td { background:rgba(21,128,61,.05); }
body.tema-claro .badge-gris { background:rgba(21,128,61,.1); color:#14532d; border:1px solid rgba(21,128,61,.35); }

/* Modales */
body.tema-claro .modal {
  background:#ffffff;
  border:2px solid rgba(21,128,61,.45);
  box-shadow:0 8px 40px rgba(0,0,0,.15);
}
body.tema-claro .modal h2 { color:#052e16; }
body.tema-claro .form-grupo label { color:#14532d; }
body.tema-claro .form-grupo input,
body.tema-claro .form-grupo select,
body.tema-claro .form-grupo textarea {
  background:#f0fdf4;
  border:1.5px solid rgba(21,128,61,.45);
  color:#052e16;
}
body.tema-claro .form-grupo input::placeholder { color:#4b7a4b; }
body.tema-claro .form-grupo input:focus,
body.tema-claro .form-grupo select:focus,
body.tema-claro .form-grupo textarea:focus {
  border-color:rgba(21,128,61,.8);
  background:#e8f5ec;
}

/* Login modo claro */
body.tema-claro #login { background:linear-gradient(135deg,#d1fae5 0%,#ecfdf5 100%); }
body.tema-claro .login-card {
  background:rgba(255,255,255,.97);
  border:2px solid rgba(21,128,61,.45);
  box-shadow:0 8px 40px rgba(0,0,0,.12);
}
body.tema-claro .campo input {
  background:#f0fdf4;
  border:1.5px solid rgba(21,128,61,.5);
  color:#052e16;
}
body.tema-claro .campo input::placeholder { color:#4b7a4b; }
body.tema-claro .campo input:focus { border-color:rgba(21,128,61,.9); background:#e8f5ec; }
body.tema-claro .login-logo h1 { color:#052e16; }
body.tema-claro .login-logo p  { color:#4b7a4b; }
body.tema-claro .login-tagline { color:#4b7a4b; }
body.tema-claro .acceso-exclusivo { color:#4b7a4b; }
body.tema-claro .error-login { background:rgba(185,28,28,.08); border-color:rgba(185,28,28,.3); }
body.tema-claro .login-tabs { background:#e8f5ec; border:1px solid rgba(21,128,61,.35); }
body.tema-claro .login-tab { color:#4b7a4b; }
body.tema-claro .login-tab.activo { background:#ffffff; color:#15803d; border-color:rgba(21,128,61,.55); }

/* Carrito */
body.tema-claro .carrito-panel {
  background:#f7fef9;
  border-left:2px solid rgba(21,128,61,.4);
}
body.tema-claro .carrito-header { border-bottom:2px solid rgba(21,128,61,.3); }
body.tema-claro .carrito-footer { border-top:2px solid rgba(21,128,61,.3); }
body.tema-claro .carrito-item {
  background:#ffffff;
  border:1.5px solid rgba(21,128,61,.35);
}
body.tema-claro .carrito-total span:last-child { color:#15803d; }

/* Upload area */
body.tema-claro .upload-area {
  background:#f0fdf4;
  border-color:rgba(21,128,61,.5);
}
body.tema-claro .upload-area:hover { background:#e8f5ec; border-color:rgba(21,128,61,.8); }

/* Dropdown sesión */
body.tema-claro #dropdownSesion {
  background:#ffffff;
  border:2px solid rgba(21,128,61,.45);
  box-shadow:0 8px 32px rgba(0,0,0,.15);
}

/* Banner wa */
body.tema-claro .banner-wa {
  background:#ffffff;
  border:1.5px solid rgba(21,128,61,.45);
  color:#14532d;
}
body.tema-claro .banner-wa:hover { background:#f0fdf4; }

/* Categorías */
body.tema-claro .cat-card {
  background:#ffffff;
  border:2px solid rgba(21,128,61,.4);
}
body.tema-claro .cat-card:hover {
  border-color:#15803d;
  box-shadow:0 0 0 1.5px #15803d, 0 0 14px rgba(21,128,61,.35);
}
body.tema-claro .cat-label { color:#14532d; }

/* Filtros / chips */
body.tema-claro .filtro-chip,
body.tema-claro .subcat-chip {
  border-color:rgba(21,128,61,.45);
  color:#14532d;
  background:#f0fdf4;
}
body.tema-claro .filtro-chip.activo,
body.tema-claro .subcat-chip.activo {
  background:rgba(21,128,61,.15);
  color:#052e16;
  border-color:rgba(21,128,61,.7);
}

/* Prod cards */
body.tema-claro .prod-card {
  background:#ffffff;
  border:1.5px solid rgba(21,128,61,.4);
}
body.tema-claro .prod-card:hover {
  border-color:rgba(21,128,61,.7);
  box-shadow:0 4px 20px rgba(21,128,61,.15);
}
body.tema-claro .prod-card-nombre { color:#052e16; }
body.tema-claro .prod-card-cat, body.tema-claro .prod-card-subcat { color:#4b7a4b; }
body.tema-claro .prod-card-codigo { color:#15803d; }
body.tema-claro .prod-card-precio { color:#15803d; }

/* Token cards */
body.tema-claro .token-card {
  background:linear-gradient(135deg,rgba(180,120,0,.08),rgba(202,138,4,.05));
  border:1.5px solid rgba(202,138,4,.45);
}

/* Acciones botones */
body.tema-claro .btn-editar { border-color:rgba(21,128,61,.55); }
body.tema-claro .btn-cancelar { border-color:rgba(21,128,61,.45); color:#14532d; }
body.tema-claro .btn-cancelar:hover { background:#f0fdf4; }

/* Texto muted en modo claro */
body.tema-claro .pag-subtitulo { color:#4b7a4b; }
body.tema-claro .seccion-sub   { color:#4b7a4b; }

/* Toggle tema */
.tema-toggle {
  display:flex;align-items:center;gap:6px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:20px;padding:3px 10px 3px 6px;
  cursor:pointer;transition:all .2s;font-size:.8rem;color:var(--text-secondary);
  white-space:nowrap;
}
.tema-toggle:hover { border-color:var(--verde-border);background:var(--verde-dim); }
.tema-toggle-circle {
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;transition:all .3s;flex-shrink:0;
}
body.tema-claro .tema-toggle-circle {
  background:linear-gradient(135deg,#1e3a5f,#374151);
}

/* ════════════════════════════════════════════
   HERO SLIDER
   ════════════════════════════════════════════ */
.hero-slider {
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  margin-bottom:1.5rem;min-height:280px;background:var(--bg-card);
  border:1px solid var(--border);
}
.hero-slide {
  display:none;position:relative;min-height:280px;
  background-size:cover;background-position:center;
  align-items:center;
}
.hero-slide.activo { display:flex; }
.hero-slide-overlay {
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.65) 0%,rgba(0,0,0,.2) 60%,transparent 100%);
}
.hero-slide-content {
  position:relative;z-index:1;padding:2rem 2.5rem;max-width:520px;
}
.hero-slide-badge {
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(34,197,94,.2);border:1px solid rgba(34,197,94,.4);
  border-radius:20px;padding:3px 10px;font-size:.72rem;
  color:var(--verde-neon);font-weight:600;margin-bottom:.75rem;text-transform:uppercase;
  letter-spacing:.06em;
}
.hero-slide-titulo {
  font-size:1.6rem;font-weight:800;color:#fff;line-height:1.25;margin-bottom:.6rem;
}
.hero-slide-titulo em { color:var(--verde-neon);font-style:normal; }
.hero-slide-subtitulo { font-size:.9rem;color:rgba(255,255,255,.75);margin-bottom:1rem;line-height:1.5; }
.hero-slide-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:.6rem 1.25rem;border-radius:8px;font-size:.88rem;
  font-weight:700;cursor:pointer;transition:all .15s;border:none;
  background:var(--verde);color:#000;
}
.hero-slide-btn:hover { opacity:.88;transform:translateY(-1px); }
.hero-slide-btn.outline {
  background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);
}
.hero-slide-btn.outline:hover { background:rgba(255,255,255,.1); }
/* Controles */
.hero-controles {
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;z-index:2;
}
.hero-dot {
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.35);cursor:pointer;transition:all .2s;border:none;padding:0;
}
.hero-dot.activo { background:var(--verde);width:22px;border-radius:4px; }
.hero-nav {
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.15);
  color:#fff;cursor:pointer;display:flex;align-items:center;
  justify-content:center;font-size:1rem;z-index:2;transition:background .15s;
}
.hero-nav:hover { background:rgba(0,0,0,.65); }
.hero-nav-prev { left:12px; }
.hero-nav-next { right:12px; }
/* Sin imagen */
.hero-slide-noimg {
  background:linear-gradient(135deg,var(--bg-card) 0%,rgba(34,197,94,.06) 100%);
}

/* ════════════════════════════════════
   PANEL DE PERFIL DE USUARIO
   ════════════════════════════════════ */
.perfil-avatar-wrap {
  position:relative;width:80px;height:80px;margin:0 auto 1rem;cursor:pointer;
}
.perfil-avatar {
  width:80px;height:80px;border-radius:50%;
  background:var(--verde-dim);border:3px solid var(--verde-border);
  display:flex;align-items:center;justify-content:center;
  font-size:2rem;font-weight:700;color:var(--verde);
  overflow:hidden;transition:border-color .2s;
}
.perfil-avatar img { width:100%;height:100%;object-fit:cover; }
.perfil-avatar-btn {
  position:absolute;bottom:0;right:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--verde);border:2px solid var(--bg-panel);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;cursor:pointer;color:#000;font-weight:700;
}
.opcion-idioma {
  display:flex;align-items:center;gap:10px;
  padding:.65rem .9rem;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);background:none;transition:all .15s;
  color:var(--text-secondary);font-size:.88rem;width:100%;
}
.opcion-idioma.activo {
  border-color:var(--verde-border);background:var(--verde-dim);
  color:var(--verde);font-weight:600;
}
.opcion-idioma:hover:not(.activo) { border-color:var(--verde-border); }
.bandiera { font-size:1.2rem; }

/* ════════════════════════════════════
   EDITOR DE SLIDES (admin)
   ════════════════════════════════════ */
.slide-editor-card {
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.1rem;margin-bottom:.75rem;
  display:flex;gap:12px;align-items:flex-start;
}
.slide-editor-num {
  min-width:28px;height:28px;border-radius:50%;
  background:var(--verde-dim);border:1px solid var(--verde-border);
  color:var(--verde);font-size:.8rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;
}
.slide-editor-body { flex:1;display:flex;flex-direction:column;gap:.6rem; }
.slide-mini-input {
  background:var(--bg-input);border:1px solid var(--border);border-radius:7px;
  padding:.45rem .7rem;color:var(--text-primary);font-size:.83rem;
  outline:none;width:100%;font-family:inherit;transition:border-color .15s;
}
.slide-mini-input:focus { border-color:var(--verde); }
.slide-img-prev {
  width:56px;height:56px;border-radius:8px;object-fit:cover;
  background:var(--bg-input);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;flex-shrink:0;overflow:hidden;
}

/* ════════════════════════════════════════════════════════
   DISEÑO MODERNO — override de componentes
   Bordes redondeados, sombras suaves, glassmorphism
   ════════════════════════════════════════════════════════ */

/* ── MODALES ── */
.modal-overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,.65) !important;
}
.modal {
  border-radius: var(--radius-xl) !important;
  border: 1.5px solid rgba(34,197,94,.35) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(34,197,94,.12),
    0 0 20px rgba(34,197,94,.18),
    0 0 40px rgba(34,197,94,.08) !important;
  animation: modalEntrar .3s cubic-bezier(.34,1.56,.64,1), modalNeonEntrar .3s ease-out;
  background: var(--bg-panel) !important;
}

/* Línea superior con degradado neon */
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34,197,94,.3) 20%,
    rgba(34,197,94,.9) 50%,
    rgba(34,197,94,.3) 80%,
    transparent 100%);
  border-radius: 0 0 2px 2px;
  pointer-events: none;
  animation: neonLineModal .4s ease-out;
}

/* Brillo neon continuo (sutil) */
.modal::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl);
  background: transparent;
  box-shadow:
    0 0 15px rgba(34,197,94,.1),
    0 0 30px rgba(34,197,94,.05);
  animation: modalNeonPulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* Animación de entrada con zoom elástico */
@keyframes modalEntrar {
  0%   { opacity:0; transform:scale(.85) translateY(20px); }
  60%  { opacity:1; transform:scale(1.02) translateY(-3px); }
  80%  { transform:scale(.99) translateY(1px); }
  100% { transform:scale(1) translateY(0); }
}
/* Neon que aparece con el modal */
@keyframes modalNeonEntrar {
  0%   { box-shadow: var(--shadow-lg), 0 0 0 rgba(34,197,94,0); }
  100% { box-shadow: var(--shadow-lg), 0 0 20px rgba(34,197,94,.18), 0 0 40px rgba(34,197,94,.08); }
}
/* Línea superior que se expande */
@keyframes neonLineModal {
  0%   { left:50%; right:50%; opacity:0; }
  100% { left:10%; right:10%; opacity:1; }
}
/* Pulso neon suave continuo */
@keyframes modalNeonPulse {
  0%,100% { box-shadow: 0 0 15px rgba(34,197,94,.08), 0 0 30px rgba(34,197,94,.04); }
  50%      { box-shadow: 0 0 22px rgba(34,197,94,.16), 0 0 45px rgba(34,197,94,.08); }
}
.modal h2 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── INPUTS MODERNOS ── */
.form-grupo input,
.form-grupo select,
.form-grupo textarea,
.slide-mini-input {
  border-radius: var(--radius) !important;
  border: 1.5px solid var(--border) !important;
  background: var(--bg-input) !important;
  padding: .7rem 1rem !important;
  transition: border-color .2s, box-shadow .2s, background .2s !important;
  font-size: .88rem !important;
}
.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
  border-color: var(--verde) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.12) !important;
  background: rgba(34,197,94,.04) !important;
  outline: none !important;
}
.form-grupo label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 5px;
  display: block;
}

/* ── BOTONES MODERNOS ── */
.btn-guardar {
  border-radius: var(--radius) !important;
  padding: .6rem 1.4rem !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  background: linear-gradient(135deg, var(--verde-oscuro), var(--verde)) !important;
  color: #000 !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(34,197,94,.3) !important;
  transition: all .2s var(--ease) !important;
  letter-spacing: .01em !important;
}
.btn-guardar:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(34,197,94,.45) !important;
}
.btn-guardar:active { transform: translateY(0) !important; }

.btn-cancelar {
  border-radius: var(--radius) !important;
  padding: .6rem 1.2rem !important;
  font-size: .88rem !important;
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-muted) !important;
  transition: all .2s !important;
}
.btn-cancelar:hover {
  border-color: var(--text-muted) !important;
  color: var(--text-primary) !important;
  background: rgba(255,255,255,.05) !important;
}

.btn-nuevo {
  border-radius: var(--radius) !important;
  padding: .55rem 1.1rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--verde-oscuro), var(--verde)) !important;
  box-shadow: 0 2px 10px rgba(34,197,94,.25) !important;
  transition: all .2s var(--ease) !important;
  border: none !important;
}
.btn-nuevo:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(34,197,94,.4) !important;
  opacity: 1 !important;
}

.btn-accion {
  border-radius: var(--radius-xs) !important;
  font-size: .73rem !important;
  font-weight: 600 !important;
  padding: .32rem .75rem !important;
  transition: all .15s !important;
}
.btn-editar { border-radius: var(--radius-xs) !important; }
.btn-eliminar { border-radius: var(--radius-xs) !important; }

/* ── CARDS MODERNAS ── */
.aside-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  padding: 1.35rem !important;
  transition: border-color .2s, box-shadow .2s !important;
  background: var(--bg-card) !important;
}
.aside-card:hover {
  border-color: var(--verde-border) !important;
  box-shadow: var(--shadow-verde) !important;
}

.metrica-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  padding: 1.2rem 1.4rem !important;
  background: var(--bg-card) !important;
  position: relative;
  overflow: hidden;
  transition: all .2s !important;
}
.metrica-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--verde-oscuro), var(--verde));
  opacity: .7;
}
.metrica-card:hover {
  border-color: var(--verde-border) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-verde) !important;
}

/* ── TABLA MODERNA ── */
.tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
thead th {
  padding: .75rem 1rem !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  background: rgba(34,197,94,.05) !important;
}
tbody td {
  padding: .8rem 1rem !important;
  font-size: .86rem !important;
}
tbody tr { transition: background .12s !important; }
tbody tr:hover td { background: rgba(34,197,94,.04) !important; }

/* ── BADGES MODERNOS ── */
.badge {
  border-radius: 20px !important;
  padding: 3px 10px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}
.badge-verde { background: rgba(34,197,94,.15) !important; color: var(--verde) !important; border:1px solid rgba(34,197,94,.25) !important; }
.badge-rojo  { background: var(--danger-bg) !important; color:#fca5a5 !important; border:1px solid rgba(239,68,68,.25) !important; }
.badge-gris  { background: rgba(255,255,255,.06) !important; color:var(--text-muted) !important; border:1px solid rgba(255,255,255,.1) !important; }
.badge-gold  { background: rgba(250,204,21,.12) !important; color:#fde047 !important; border:1px solid rgba(250,204,21,.25) !important; }

/* ── NAV ITEMS ── */
.nav-item {
  border-radius: var(--radius) !important;
  padding: .6rem .85rem !important;
  margin-bottom: 3px !important;
  transition: all .18s var(--ease) !important;
  font-size: .85rem !important;
}
.nav-item:hover {
  background: var(--verde-dim) !important;
  padding-left: 1.1rem !important;
}
.nav-item.activo {
  background: linear-gradient(90deg, rgba(34,197,94,.15), rgba(34,197,94,.06)) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  box-shadow: inset 3px 0 0 var(--verde) !important;
}

/* ── SIDEBAR ── */
.sidebar-logo {
  padding: 1.35rem 1.25rem 1rem !important;
}
/* Logo del club más grande, sin texto al lado (solo el ícono/imagen del
   logo) y sin efecto neon — según referencia de diseño de David. Cuando
   hay una imagen subida, el ancho se ajusta a su forma real (no se fuerza
   a un cuadrado) para que se vea completa y centrada, sin recortarla ni
   dejarla "atrapada" dentro de una caja con su propio fondo/borde — esa
   caja de color solo se usa como respaldo cuando NO hay imagen (el
   símbolo ∞ por defecto). Solo aplica al sidebar expandido; el modo
   "mini" (64px de ancho) conserva un tamaño fijo compacto, ver más abajo. */
.sidebar-logo-icono {
  border-radius: var(--radius) !important;
  width: auto !important; min-width: 54px !important; height: 64px !important;
  padding: 0 4px;
  font-size: 1.55rem !important;
  /* Ocupa el espacio libre de la fila (entre el borde izquierdo y el
     botón de colapsar) y centra la imagen dentro de ese espacio — así
     el logo queda centrado en la barra en vez de pegado a la izquierda. */
  flex: 1 1 auto !important;
}
.sidebar-logo-icono:has(img) {
  background: transparent !important;
  border-color: transparent !important;
}
.sidebar-logo-icono img {
  display: block;
  width: auto !important; height: 100% !important; max-width: 180px;
  object-fit: contain !important;
  border-radius: 0 !important;
}
/* En modo claro se asume que el logo subido es la versión clara (para
   fondo oscuro); se invierte para que quede oscura sobre el fondo claro.
   Funciona bien si el logo es blanco/negro; si tiene colores propios de
   marca, mejor subir una segunda versión pensada para fondo claro. */
body.tema-claro .sidebar-logo-icono img {
  filter: invert(1);
}
/* Línea neon vertical en el borde del sidebar, en juego con el resto del
   lenguaje visual (modales, paneles del editor de tarjeta). */
.sidebar::after {
  content: '';
  position: absolute; top: 0; right: -1px; bottom: 0; width: 1px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(34,197,94,.35) 15%, rgba(34,197,94,.55) 50%, rgba(34,197,94,.35) 85%, transparent 100%);
  box-shadow: 0 0 12px rgba(34,197,94,.28);
  pointer-events: none;
}
.nav-item:hover {
  box-shadow: 0 0 12px rgba(34,197,94,.16) !important;
}

/* ── TOPBAR ── */
.topbar-buscar {
  border-radius: var(--radius-xl) !important;
  padding: 0 1rem !important;
  border: 1.5px solid var(--border) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.topbar-buscar:focus-within {
  border-color: var(--verde-border) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.1) !important;
}
.topbar-avatar {
  border-radius: var(--radius) !important;
  width: 34px !important; height: 34px !important;
  transition: all .15s !important;
}
.topbar-avatar:hover {
  box-shadow: 0 0 0 2px var(--verde) !important;
}
.carrito-btn {
  border-radius: var(--radius) !important;
  padding: .45rem .9rem !important;
  transition: all .15s var(--ease) !important;
}
.carrito-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-verde) !important;
}

/* ── CARRITO PANEL ── */
.carrito-panel {
  border-radius: var(--radius-xl) 0 0 var(--radius-xl) !important;
  border-left: 1px solid rgba(34,197,94,.2) !important;
}
.carrito-item {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .15s !important;
  padding: .85rem !important;
}
.carrito-item:hover { border-color: var(--verde-border) !important; }
.carrito-item-thumb { border-radius: var(--radius) !important; }
.qty-btn { border-radius: 8px !important; }
.btn-checkout {
  border-radius: var(--radius) !important;
  box-shadow: 0 4px 16px rgba(34,197,94,.3) !important;
  transition: all .2s !important;
  font-size: .9rem !important;
}
.btn-checkout:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 22px rgba(34,197,94,.45) !important;
  opacity: 1 !important;
}
.btn-wa-checkout { border-radius: var(--radius) !important; }

/* ── PROD CARDS ── */
.prod-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  transition: all .22s var(--ease) !important;
  overflow: hidden !important;
}
.prod-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: 0 8px 30px rgba(34,197,94,.12), var(--shadow-md) !important;
}
.btn-agregar {
  border-radius: var(--radius) !important;
  padding: .5rem !important;
  font-size: .8rem !important;
  transition: all .15s !important;
}
.btn-agregar:hover {
  background: rgba(34,197,94,.22) !important;
  transform: translateY(-1px) !important;
}

/* ── CAT CARDS ── */
.cat-card {
  border-radius: var(--radius-lg) !important;
  padding: 1.25rem .85rem !important;
}

/* ── UPLOAD AREA ── */
.upload-area {
  border-radius: var(--radius-lg) !important;
  border: 2px dashed var(--border) !important;
  transition: all .2s !important;
}
.upload-area:hover, .upload-area.drag {
  border-color: var(--verde) !important;
  background: var(--verde-dim) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.08) !important;
}

/* ── TOKEN CARDS ── */
.token-card {
  border-radius: var(--radius-lg) !important;
  padding: 1.15rem 1.35rem !important;
  transition: box-shadow .2s !important;
}
.token-card:hover {
  box-shadow: 0 4px 20px rgba(250,204,21,.15) !important;
}

/* ── CHECKOUT MODAL ── */
.resumen-pedido {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  padding: 1rem !important;
}
.metodo-btn {
  border-radius: var(--radius) !important;
  padding: .75rem !important;
  transition: all .2s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative;
}
.metodo-btn:hover:not(.activo) {
  transform: scale(1.02) !important;
  border-color: rgba(34,197,94,.4) !important;
}
.metodo-btn.activo {
  border-color: var(--verde) !important;
  background: rgba(34,197,94,.08) !important;
  color: var(--verde) !important;
  transform: scale(1.03) !important;
  box-shadow:
    0 0 0 1.5px var(--verde),
    0 0 12px rgba(34,197,94,.4),
    0 0 25px rgba(34,197,94,.2),
    inset 0 0 8px rgba(34,197,94,.06) !important;
  animation: metodoNeonPulse 2s ease-in-out infinite !important;
}
@keyframes metodoNeonPulse {
  0%,100% {
    box-shadow:
      0 0 0 1.5px var(--verde),
      0 0 10px rgba(34,197,94,.35),
      0 0 22px rgba(34,197,94,.15);
  }
  50% {
    box-shadow:
      0 0 0 2px var(--verde),
      0 0 18px rgba(34,197,94,.6),
      0 0 36px rgba(34,197,94,.3),
      0 0 55px rgba(34,197,94,.12);
  }
}
/* Línea superior neon en activo */
.metodo-btn.activo::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; right: 15%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(34,197,94,.8) 50%,
    transparent);
  border-radius: 0 0 2px 2px;
}

/* ── MODAL BOTONES ── */
.modal-botones {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── DROPDOWN SESIÓN ── */
#dropdownSesion {
  border-radius: var(--radius-xl) !important;
  border: 1.5px solid rgba(34,197,94,.3) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(34,197,94,.1),
    0 0 18px rgba(34,197,94,.15) !important;
  animation: modalEntrar .25s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}

/* ── FILTRO CHIPS ── */
.filtro-chip, .subcat-chip {
  border-radius: 20px !important;
  padding: .35rem 1rem !important;
  font-size: .78rem !important;
  transition: all .15s !important;
}
.filtro-chip:hover:not(.activo),
.subcat-chip:hover:not(.activo) {
  transform: translateY(-1px) !important;
}
.filtro-chip.activo, .subcat-chip.activo {
  box-shadow: 0 2px 8px rgba(34,197,94,.2) !important;
}

/* ── TEMA TOGGLE ── */
.tema-toggle {
  border-radius: 20px !important;
  padding: .35rem 1rem .35rem .5rem !important;
  transition: all .2s !important;
}
.tema-toggle:hover {
  box-shadow: 0 2px 10px rgba(34,197,94,.2) !important;
  transform: translateY(-1px) !important;
}

/* ── HERO SLIDER ── */
.hero-slider {
  border-radius: var(--radius-xl) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-md) !important;
}
.hero-slide-btn {
  border-radius: var(--radius) !important;
  padding: .65rem 1.4rem !important;
  font-size: .9rem !important;
  transition: all .2s var(--ease) !important;
}
.hero-slide-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(34,197,94,.35) !important;
  opacity: 1 !important;
}
.hero-dot { transition: all .25s var(--ease) !important; }
.hero-nav {
  border-radius: 50% !important;
  backdrop-filter: blur(8px) !important;
  transition: all .15s !important;
}

/* ── PROD DETALLE ── */
.prod-detalle-img {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-md) !important;
}
.prod-detalle-codigo {
  border-radius: var(--radius-xs) !important;
  padding: 4px 12px !important;
}
.prod-detalle-prov {
  border-radius: var(--radius) !important;
  padding: .7rem 1rem !important;
}

/* ── SLIDE EDITOR CARDS ── */
.slide-editor-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  transition: border-color .15s !important;
}
.slide-editor-card:hover { border-color: var(--verde-border) !important; }
.slide-mini-input { border-radius: var(--radius-xs) !important; }

/* ── PERFIL ── */
.perfil-avatar { border-radius: 50% !important; }
.opcion-idioma { border-radius: var(--radius) !important; }

/* ── TOAST ── */
.toast {
  border-radius: var(--radius-lg) !important;
  padding: .85rem 1.4rem !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(10px) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
}

/* ── BREADCRUMB ── */
.breadcrumb {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: .45rem 1rem;
  display: flex;           /* flex en vez de inline-flex — no colapsa el ancho */
  width: fit-content;      /* solo ocupa lo que necesita */
  font-size: .78rem;
  margin-bottom: 1.25rem;
}

/* ── CAMPO LOGIN ── */
.campo input {
  border-radius: var(--radius) !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  transition: all .2s !important;
}
.campo input:focus {
  border-color: var(--verde) !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15) !important;
}
.login-tabs {
  border-radius: var(--radius) !important;
  padding: 5px !important;
}
.login-tab { border-radius: var(--radius-xs) !important; }
.login-tab.activo {
  box-shadow: 0 2px 8px rgba(34,197,94,.2) !important;
}

/* ── MODO CLARO — ajustar sombras ── */
body.tema-claro .modal {
  border-color: rgba(21,128,61,.45) !important;
  box-shadow:
    0 8px 40px rgba(0,0,0,.1),
    0 0 0 1px rgba(21,128,61,.15),
    0 0 20px rgba(21,128,61,.1) !important;
}
body.tema-claro .modal::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(21,128,61,.3) 20%,
    rgba(21,128,61,.8) 50%,
    rgba(21,128,61,.3) 80%,
    transparent 100%);
}
body.tema-claro .metrica-card:hover,
body.tema-claro .aside-card:hover {
  box-shadow: 0 4px 20px rgba(21,128,61,.12) !important;
}
body.tema-claro .prod-card:hover {
  box-shadow: 0 8px 30px rgba(21,128,61,.1), 0 2px 8px rgba(0,0,0,.06) !important;
}
body.tema-claro .btn-guardar,
body.tema-claro .btn-nuevo {
  background: linear-gradient(135deg,#15803d,#22c55e) !important;
}
body.tema-claro .nav-item.activo {
  box-shadow: inset 3px 0 0 #15803d !important;
}
body.tema-claro .topbar-buscar:focus-within {
  box-shadow: 0 0 0 3px rgba(21,128,61,.15) !important;
}

/* ════════════════════════════════════════════════════
   DROPDOWN SESIÓN MODERNO
   ════════════════════════════════════════════════════ */
.dropdown-sesion-wrap {
  display: none;
  position: fixed;
  top: 62px;
  right: 1.25rem;
  background: var(--bg-panel);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: var(--radius-xl);
  padding: .5rem;
  z-index: 500;
  min-width: 260px;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(34,197,94,.1), 0 0 24px rgba(34,197,94,.12);
  animation: modalEntrar .2s var(--ease), neonLineModal .35s ease-out;
  overflow: hidden;
}
.dropdown-sesion-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(34,197,94,.3) 20%, rgba(34,197,94,.9) 50%, rgba(34,197,94,.3) 80%, transparent 100%);
  pointer-events: none;
}
.dropdown-sesion-wrap.visible { display: block; }

.dd-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .75rem .9rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .35rem;
}
.dd-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--verde-dim);
  border: 2px solid var(--verde-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 700; color: var(--verde);
  flex-shrink: 0; overflow: hidden;
}
.dd-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.dd-nombre { font-size: .88rem; font-weight: 700; color: var(--text-primary); }
.dd-rol    { font-size: .7rem;  color: var(--verde); margin-top: 1px; }

.dd-seccion {
  padding: .25rem 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: .25rem;
}
.dd-label {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  padding: .3rem .9rem .1rem;
  font-weight: 700;
}
.dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .55rem .9rem;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s;
  margin: 2px .35rem;
}
.dd-item:hover { background: var(--verde-dim); }
.dd-item-icono {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; flex-shrink: 0;
}
.dd-item-texto { display: flex; flex-direction: column; }
.dd-item-texto span { font-size: .84rem; font-weight: 500; color: var(--text-primary); }
.dd-item-texto small { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
.dd-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .4rem .9rem;
  margin: 2px .35rem;
}
.dd-toggle-btns { display: flex; gap: 4px; }
.dd-tog {
  width: 30px; height: 26px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-size: .9rem;
  transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.dd-tog:hover { background: var(--verde-dim); border-color: var(--verde-border); }
.dd-tog.activo { background: var(--verde-dim); border-color: var(--verde-border); box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.dd-danger:hover { background: var(--danger-bg) !important; }
.dd-danger .dd-item-texto span { color: #fca5a5; }
.dd-divider { height: 1px; background: var(--border); margin: .35rem .5rem; }

/* Modo claro */
body.tema-claro .dropdown-sesion-wrap {
  background: #ffffff;
  border-color: rgba(21,128,61,.25);
  box-shadow: 0 8px 40px rgba(0,0,0,.12);
}
body.tema-claro .dd-item:hover { background: rgba(21,128,61,.08); }

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
.app-footer {
  margin-top: 2.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--verde);
  font-size: .88rem;
}
.footer-links {
  display: flex;
  gap: 1.25rem;
  font-size: .78rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.footer-links span:hover { color: var(--verde); }
.footer-copy {
  font-size: .72rem;
  color: var(--text-muted);
  text-align: right;
  width: 100%;
}

/* ════════════════════════════════════════════════════
   MODAL PRIVACIDAD
   ════════════════════════════════════════════════════ */
.privacidad-seccion {
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.privacidad-seccion:last-of-type { border-bottom: none; }
.privacidad-seccion h3 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--verde);
  margin-bottom: .5rem;
}

/* ════════════════════════════════════════════════════
   LOGIN — Checkbox política de privacidad
   ════════════════════════════════════════════════════ */
.politica-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .78rem;
  color: var(--text-muted);
  margin-top: .75rem;
  line-height: 1.4;
}
.politica-check input[type=checkbox] {
  accent-color: var(--verde);
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.politica-check a {
  color: var(--verde);
  cursor: pointer;
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════
   DASHBOARD ADMIN — KPIs y alertas
   ════════════════════════════════════════════════════ */
.kpi-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.35rem;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all .25s cubic-bezier(.34,1.2,.64,1);
  position: relative;
  overflow: hidden;
}
/* Barra lateral de color */
.kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  border-radius: 4px 0 0 4px;
  transition: width .25s ease;
}
.kpi-card.verde::before  { background: var(--verde); }
.kpi-card.azul::before   { background: #3b82f6; }
.kpi-card.gold::before   { background: #f59e0b; }
.kpi-card.rojo::before   { background: #ef4444; }

/* Clickable — cursor y neon mejorado */
.kpi-clickable { cursor: pointer; }
.kpi-card.verde.kpi-clickable:hover {
  border-color: var(--verde) !important;
  border-width: 2px !important;
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 0 0 3px rgba(34,197,94,.2),
    0 6px 24px rgba(34,197,94,.3),
    0 0 40px rgba(34,197,94,.12) !important;
}
.kpi-card.verde.kpi-clickable:hover::before { width: 6px; }
.kpi-card.azul.kpi-clickable:hover {
  border-color: #3b82f6 !important;
  border-width: 2px !important;
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.2),
    0 6px 24px rgba(59,130,246,.3) !important;
}
.kpi-card.azul.kpi-clickable:hover::before { width: 6px; }
.kpi-card.gold.kpi-clickable:hover {
  border-color: #f59e0b !important;
  border-width: 2px !important;
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 0 0 3px rgba(245,158,11,.2),
    0 6px 24px rgba(245,158,11,.28) !important;
}
.kpi-card.gold.kpi-clickable:hover::before { width: 6px; }
.kpi-card.rojo.kpi-clickable:hover {
  border-color: #ef4444 !important;
  border-width: 2px !important;
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 0 0 3px rgba(239,68,68,.2),
    0 6px 24px rgba(239,68,68,.28) !important;
}
.kpi-card.rojo.kpi-clickable:hover::before { width: 6px; }

/* Sub-texto con flecha */
.kpi-sub { font-size: .72rem; color: var(--verde); margin-top: 3px; opacity: .7; transition: opacity .15s; }
.kpi-clickable:hover .kpi-sub { opacity: 1; }
.kpi-icono {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0;
}
.kpi-icono.verde  { background: rgba(34,197,94,.15); }
.kpi-icono.azul   { background: rgba(59,130,246,.15); }
.kpi-icono.gold   { background: rgba(245,158,11,.15); }
.kpi-icono.rojo   { background: rgba(239,68,68,.15); }
.kpi-body { flex: 1; }
.kpi-valor { font-size: 1.65rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.kpi-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-top: 3px; }
.kpi-sub   { font-size: .75rem; color: var(--verde); margin-top: 2px; }

.alerta-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  font-size: .84rem;
  margin-bottom: .5rem;
}
.alerta-card.info    { background: rgba(59,130,246,.1);  border: 1px solid rgba(59,130,246,.25);  color: #93c5fd; }
.alerta-card.warning { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.25);  color: #fcd34d; }
.alerta-card.success { background: rgba(34,197,94,.1);   border: 1px solid rgba(34,197,94,.25);   color: var(--verde); }
.alerta-card.danger  { background: var(--danger-bg);     border: 1px solid rgba(239,68,68,.25);   color: #fca5a5; }

.dash-pedido-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.dash-pedido-item:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════
   SIDEBAR COLAPSABLE — 3 estados:
   - Expandido (default): 248px, texto + íconos
   - Mini: 64px, solo íconos con tooltip
   - Oculto (mobile): 0px, fuera de pantalla
   ════════════════════════════════════════════════════ */

/* Botón toggle dentro del sidebar-logo */
.sidebar-toggle-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: all .2s;
  flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
  background: var(--verde-dim);
  border-color: var(--verde-border);
  color: var(--verde);
}

/* Botón colapsar en footer del sidebar */
.sidebar-collapse-btn { color: var(--text-muted) !important; margin: 0 !important; }
.sidebar-collapse-btn:hover { color: var(--verde) !important; }
.sidebar-collapse-texto { font-size: .82rem; }

/* ── ESTADO MINI (sidebar colapsado a solo íconos) ── */
body.sidebar-mini {
  --sidebar-w: 64px;
}
body.sidebar-mini .sidebar {
  width: 64px;
  overflow: visible;
}
body.sidebar-mini .topbar {
  left: 64px;
  width: calc(100% - 64px);
}
body.sidebar-mini .contenido {
  margin-left: 64px;
  width: calc(100% - 64px);
}
/* Ocultar textos */
body.sidebar-mini .sidebar-logo-texto,
body.sidebar-mini .nav-grupo-titulo,
body.sidebar-mini .nav-badge,
body.sidebar-mini .sidebar-collapse-texto,
body.sidebar-mini .sidebar-toggle-btn {
  display: none !important;
}
/* Ocultar TODOS los span de texto en nav (data-i18n y normales) */
body.sidebar-mini .nav-item span,
body.sidebar-mini .nav-item > span {
  display: none !important;
}
/* Logo centrado */
body.sidebar-mini .sidebar-logo {
  justify-content: center;
  padding: 1rem .5rem;
}
body.sidebar-mini .sidebar-logo-icono {
  margin: 0 auto;
  width: 38px !important; min-width: 38px !important; height: 38px !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  flex: none !important;
}
body.sidebar-mini .sidebar-logo-icono img {
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}

/* Nav items centrados, cuadrados */
body.sidebar-mini .sidebar-nav {
  padding: .5rem .4rem;
  gap: 2px;
  display: flex;
  flex-direction: column;
}
body.sidebar-mini .nav-grupo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
body.sidebar-mini .nav-item {
  justify-content: center !important;
  padding: .6rem !important;
  border-radius: 10px !important;
  position: relative;
  min-height: 40px;
  width: 100%;
}
body.sidebar-mini .nav-item svg {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}
/* Botón colapsar centrado */
body.sidebar-mini .sidebar-collapse-btn {
  justify-content: center !important;
  padding: .6rem !important;
}

/* Tooltip flotante al hover */
body.sidebar-mini .nav-item[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--bg-panel);
  border: 1px solid var(--verde-border);
  color: var(--text-primary);
  font-size: .75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 300;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  transition: opacity .15s, transform .15s;
}
body.sidebar-mini .nav-item[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
body.sidebar-mini .topbar { left: 64px; }
body.sidebar-mini .contenido { margin-left: 64px; }
body.sidebar-mini .sidebar-collapse-btn { justify-content: center; }
body.sidebar-mini #btnSidebarDesktop { display: flex !important; }
body.sidebar-mini .sidebar-footer { padding: 0 .5rem; }

/* ── ESTADO OCULTO (sidebar totalmente escondido) ── */
body.sidebar-oculto .sidebar {
  transform: translateX(-100%);
}
body.sidebar-oculto .topbar { left: 0; }
body.sidebar-oculto .contenido { margin-left: 0; }
body.sidebar-oculto #btnSidebarDesktop { display: flex !important; }

/* Transición suave para todos los estados */
.sidebar {
  transition: width .28s cubic-bezier(.4,0,.2,1), transform .28s cubic-bezier(.4,0,.2,1) !important;
}
.topbar {
  transition: left .28s cubic-bezier(.4,0,.2,1) !important;
}
.contenido {
  transition: margin-left .28s cubic-bezier(.4,0,.2,1) !important;
}

/* Icono de flecha en el botón colapsar del footer — rota en mini */
.sidebar-collapse-btn svg {
  transition: transform .3s !important;
}
body.sidebar-mini .sidebar-collapse-btn svg {
  transform: rotate(180deg);
}

/* Modo claro */
body.tema-claro .sidebar-toggle-btn {
  border-color: rgba(21,128,61,.25);
  color: #6b7280;
}
body.tema-claro .sidebar-toggle-btn:hover {
  background: rgba(21,128,61,.08);
  color: #15803d;
}
body.tema-claro body.sidebar-mini .nav-item::after {
  background: #ffffff;
  border-color: rgba(21,128,61,.3);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

/* Responsive — en mobile siempre oculto por defecto */
@media (max-width: 768px) {
  body.sidebar-mini .sidebar { width: 248px !important; }
  body.sidebar-mini .topbar  { left: 0 !important; }
  body.sidebar-mini .contenido { margin-left: 0 !important; }
}

/* ════════════════════════════════════════════
   MODALES — responsive y botones siempre visibles
   ════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 640px) {
  .modal-overlay { padding:.5rem; align-items:flex-end; }
  .modal {
    max-width:100% !important;
    max-height:88vh !important;
    border-radius:var(--radius-xl) var(--radius-xl) 0 0 !important;
    animation: modalSubir .28s cubic-bezier(.4,0,.2,1);
  }
  @keyframes modalSubir {
    from { transform:translateY(60px); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
  }
  .form-grid { grid-template-columns:1fr !important; }
  .form-grupo.col-2 { grid-column:span 1 !important; }
  .metodos-pago { grid-template-columns:1fr !important; }
  .modal-botones {
    flex-direction:column-reverse !important;
    gap:6px !important;
  }
  .modal-botones button { width:100% !important; }
}

/* El h2 del modal va dentro del modal-body normalmente,
   pero si está directo en .modal necesita padding top */
.modal > h2 { padding:1.75rem 1.75rem 0; flex-shrink:0; }

/* Ajustes finales para max-width específicos de cada modal */
#modalSlides    .modal, #modalPrivacidad .modal { max-height:88vh !important; }
#modalProducto  .modal { max-height:90vh !important; }
#modalPerfil    .modal { max-height:88vh !important; }

/* Asegurar que modal-body tenga padding uniforme */
.modal-body {
  padding:1.25rem 1.75rem 0.5rem !important;
}
.modal > h2:first-child {
  padding:1.5rem 1.75rem 0 !important;
  margin-bottom:1.1rem !important;
}

/* Sombra sutil al hacer scroll en el body del modal */
.modal-body::after {
  content:'';
  display:block;
  height:1px;
}

/* Modal en modo claro */
body.tema-claro .modal-botones {
  background:#ffffff;
  border-top-color:rgba(21,128,61,.2);
}

/* ════════════════════════════════════════════════════
   CATÁLOGO 3 NIVELES
   ════════════════════════════════════════════════════ */

/* ── Nivel 1: Grid de categorías tipo lista ancha ── */
.grid-cats-nivel1 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px;
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.cat-card-nivel1 {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.cat-card-nivel1::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--verde);
  opacity: 0;
  transition: opacity .2s;
}
.cat-card-nivel1:hover {
  border-color: var(--verde-border);
  transform: translateX(4px);
  box-shadow: var(--shadow-verde);
}
.cat-card-nivel1:hover::before { opacity: 1; }

.cat-card-nivel1-ico {
  width: 60px; height: 60px;
  border-radius: var(--radius);
  background: var(--verde-dim);
  border: 1px solid var(--verde-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform .2s;
}
.cat-card-nivel1:hover .cat-card-nivel1-ico { transform: scale(1.08); }

.cat-card-nivel1-info { flex: 1; }
.cat-card-nivel1-nombre {
  font-size: 1rem; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.cat-card-nivel1-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: .75rem; color: var(--text-muted);
}
.cat-card-nivel1-arrow {
  font-size: 1.5rem;
  color: var(--verde);
  font-weight: 700;
  opacity: .5;
  transition: opacity .2s, transform .2s;
}
.cat-card-nivel1:hover .cat-card-nivel1-arrow {
  opacity: 1;
  transform: translateX(4px);
}

/* ── Nivel 2: Subcategorías como carpetas con imagen ── */
.grid-subcats-nivel2 {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px;
  margin-bottom: 1.5rem;
  width: 100%;
  box-sizing: border-box;
}
.subcat-card-nivel2 {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.subcat-card-nivel2:hover {
  border-color: var(--verde-border);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(34,197,94,.14);
}
.subcat-card-nivel2-img {
  height: 120px;
  background: var(--bg-panel);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.subcat-card-nivel2-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45) 0%, transparent 60%);
}
.subcat-card-nivel2-body {
  padding: .9rem 1rem;
}
.subcat-card-nivel2-nombre {
  font-size: .95rem; font-weight: 700;
  color: var(--text-primary); margin-bottom: 3px;
}
.subcat-card-nivel2-meta {
  font-size: .75rem; color: var(--text-muted); margin-bottom: .6rem;
}
.subcat-card-nivel2-btn {
  font-size: .78rem; color: var(--verde); font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  opacity: 0; transform: translateX(-4px);
  transition: all .18s;
}
.subcat-card-nivel2:hover .subcat-card-nivel2-btn {
  opacity: 1; transform: translateX(0);
}

/* Modo claro */
body.tema-claro .cat-card-nivel1 {
  background: #ffffff;
  border-color: rgba(21,128,61,.25);
}
body.tema-claro .cat-card-nivel1:hover {
  box-shadow: 0 4px 20px rgba(21,128,61,.1);
}
body.tema-claro .subcat-card-nivel2 {
  background: #ffffff;
  border-color: rgba(21,128,61,.2);
}

/* Responsive mobile cards */
@media (max-width: 640px) {
  .cat-card-nivel1 { padding: .85rem 1rem; }
  .cat-card-nivel1-ico { width: 48px; height: 48px; }
}

/* ── Prod card mejorada (tipo MercadoLibre) ── */
.prod-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all .22s var(--ease);
  position: relative;
}
.prod-card:hover {
  border-color: rgba(34,197,94,.4) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(34,197,94,.13), 0 2px 8px rgba(0,0,0,.2) !important;
}
.prod-card-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;   /* cuadrado siempre */
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.prod-card-img-wrap img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform .3s var(--ease);
}
.prod-card:hover .prod-card-img-wrap img { transform: scale(1.04); }
.sin-img { font-size: 2.8rem; opacity: .2; }
.prod-card-body {
  padding: .85rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 3px;
}
.prod-card-cat {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.prod-card-subcat {
  font-size: .67rem;
  color: var(--verde);
  font-weight: 600;
}
.prod-card-nombre {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  /* Máximo 2 líneas */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-card-codigo {
  font-size: .7rem;
  color: var(--text-muted);
  font-family: monospace;
}
.prod-card-precio {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--verde);
  margin-top: 4px;
}
.btn-agregar {
  margin-top: auto !important;
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* ── Cat cards dashboard (inicio) — más pequeñas y densas ── */
.cat-card {
  border-radius: var(--radius) !important;
  padding: .9rem .6rem !important;
}

/* ── Toolbar de filtros y orden (tipo ML) ── */
.catalogo-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.catalogo-toolbar-izq { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.catalogo-toolbar-der { display: flex; gap: 6px; align-items: center; }
.orden-select {
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: .8rem;
  padding: .35rem .75rem;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.orden-select:focus { border-color: var(--verde); }
.vista-toggle {
  display: flex;
  gap: 3px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}
.vista-btn {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  font-size: .85rem;
}
.vista-btn.activo {
  background: var(--verde-dim);
  color: var(--verde);
}
/* Vista lista (alternativa) */
.grid-productos-pub.vista-lista {
  grid-template-columns: 1fr !important;
}
.grid-productos-pub.vista-lista .prod-card {
  flex-direction: row;
  max-height: 120px;
}
.grid-productos-pub.vista-lista .prod-card-img-wrap {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  aspect-ratio: auto;
}
.grid-productos-pub.vista-lista .prod-card-body {
  padding: .75rem 1rem;
}
.grid-productos-pub.vista-lista .prod-card-nombre {
  font-size: .92rem;
  -webkit-line-clamp: 2;
}
.grid-productos-pub.vista-lista .btn-agregar {
  width: auto !important;
  padding: .35rem .85rem !important;
  font-size: .75rem !important;
}

/* ── Responsive grids por columnas fijas ── */
/* Desktop grande (>1400px): sidebar expandido */
@media (min-width: 1400px) {
  .grid-cats-nivel1    { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-subcats-nivel2 { grid-template-columns: repeat(6, 1fr) !important; }
  .grid-productos-pub  { grid-template-columns: repeat(6, 1fr) !important; }
}
/* Desktop normal (1024-1400px) */
@media (max-width: 1399px) and (min-width: 1024px) {
  .grid-cats-nivel1    { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-subcats-nivel2 { grid-template-columns: repeat(4, 1fr) !important; }
  .grid-productos-pub  { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Tablet (768-1023px) */
@media (max-width: 1023px) and (min-width: 769px) {
  .grid-cats-nivel1    { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-subcats-nivel2 { grid-template-columns: repeat(3, 1fr) !important; }
  .grid-productos-pub  { grid-template-columns: repeat(3, 1fr) !important; }
  #pag-catalogo { padding: 1rem; }
}
/* Mobile (<=768px) */
@media (max-width: 768px) {
  #pag-catalogo { padding: .75rem; }
  .pagina       { padding: .75rem; }
  .grid-cats-nivel1    { grid-template-columns: 1fr !important; }
  .grid-subcats-nivel2 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-productos-pub  { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .grid-categorias     { grid-template-columns: repeat(4, 1fr) !important; }
  .vista-toggle { display: none; }
}
/* Mobile pequeño (<=480px) */
@media (max-width: 480px) {
  .grid-subcats-nivel2 { grid-template-columns: repeat(2, 1fr) !important; }
  .grid-productos-pub  { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════
   VISTA CUADRÍCULA / LISTA — toggle mejorado
   ═══════════════════════════════════════════════════════ */

/* Toolbar catálogo */
.catalogo-toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-base);
  padding: .5rem 0 .75rem;
  margin-bottom: .5rem !important;
  border-bottom: 1px solid var(--border);
}
body.tema-claro .catalogo-toolbar { background: #f0faf2; }

.orden-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2322c55e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  padding-right: 1.75rem !important;
}

/* Vista lista — mejorada */
.grid-productos-pub.vista-lista {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.grid-productos-pub.vista-lista .prod-card {
  flex-direction: row !important;
  height: 110px !important;
  max-height: 110px !important;
}
.grid-productos-pub.vista-lista .prod-card-img-wrap {
  width: 110px !important;
  height: 110px !important;
  flex-shrink: 0 !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}
.grid-productos-pub.vista-lista .prod-card-body {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  padding: .65rem 1rem !important;
  gap: .35rem 1rem !important;
}
.grid-productos-pub.vista-lista .prod-card-nombre {
  width: 100%;
  font-size: .9rem !important;
  -webkit-line-clamp: 1 !important;
}
.grid-productos-pub.vista-lista .prod-card-precio {
  font-size: 1rem !important;
  margin-top: 0 !important;
  flex: 1;
}
.grid-productos-pub.vista-lista .prod-card-cat,
.grid-productos-pub.vista-lista .prod-card-subcat { display: none; }
.grid-productos-pub.vista-lista .prod-card-codigo {
  color: var(--verde);
  font-size: .72rem;
}
.grid-productos-pub.vista-lista .btn-agregar {
  width: auto !important;
  margin-top: 0 !important;
  padding: .35rem .85rem !important;
  font-size: .75rem !important;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   FILTROS TIPO MERCADO LIBRE
   ═══════════════════════════════════════════════════════ */
.catalogo-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.25rem;
  align-items: start;
}
.filtros-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  position: sticky;
  top: 56px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.filtro-seccion { margin-bottom: 1.25rem; }
.filtro-seccion-titulo {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.filtro-seccion-titulo:hover { color: var(--verde); }
.filtro-seccion-body { display: flex; flex-direction: column; gap: 4px; }
.filtro-opcion {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: .4rem .5rem;
  border-radius: 7px;
  cursor: pointer;
  font-size: .82rem;
  color: var(--text-secondary);
  transition: all .12s;
  border: 1px solid transparent;
}
.filtro-opcion:hover { background: var(--verde-dim); color: var(--verde); }
.filtro-opcion.activo {
  background: var(--verde-dim);
  color: var(--verde);
  border-color: var(--verde-border);
  font-weight: 600;
}
.filtro-opcion-count {
  font-size: .7rem;
  background: var(--bg-input);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--text-muted);
}
.filtros-activos {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.filtro-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--verde-dim);
  border: 1px solid var(--verde-border);
  color: var(--verde);
  font-size: .75rem;
  padding: 3px 8px;
  border-radius: 20px;
  cursor: pointer;
}
.filtro-tag:hover { background: rgba(34,197,94,.22); }
.rango-precio {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: .5rem;
}
.rango-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: .35rem .5rem;
  color: var(--text-primary);
  font-size: .8rem;
  outline: none;
  width: 100%;
}
.rango-input:focus { border-color: var(--verde); }
.btn-filtrar {
  width: 100%;
  padding: .5rem;
  background: var(--verde);
  border: none;
  border-radius: 8px;
  color: #000;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .5rem;
  transition: opacity .15s;
}
.btn-filtrar:hover { opacity: .88; }
.btn-limpiar-filtros {
  width: 100%;
  padding: .4rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: .78rem;
  cursor: pointer;
  margin-top: .35rem;
}

/* Modo claro */
body.tema-claro .filtros-panel {
  background: #ffffff;
  border-color: rgba(21,128,61,.25);
}
body.tema-claro .filtro-opcion:hover { background: rgba(21,128,61,.08); }

/* Responsive — panel de filtros colapsable en mobile */
@media (max-width: 900px) {
  .catalogo-layout { grid-template-columns: 1fr; }
  .filtros-panel {
    position: static;
    max-height: none;
  }
  .filtros-panel.colapsado .filtro-seccion-body,
  .filtros-panel.colapsado .rango-precio,
  .filtros-panel.colapsado .btn-filtrar,
  .filtros-panel.colapsado .btn-limpiar-filtros { display: none !important; }
}

/* ═══════════════════════════════════════════════════════
   GALAXIA DE FONDO MÁS INTENSA
   ═══════════════════════════════════════════════════════ */
/* El canvas ya está en CSS de galaxia, solo ajustamos opacidad */
#galaxiaFondoApp canvas {
  opacity: .85;
}

/* ════════════════════════════════════════════════════
   INVENTARIO — badges y estados de stock
   ════════════════════════════════════════════════════ */
.stock-badge {
  display: inline-flex;
  align-items: center;
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.stock-ok     { background:rgba(34,197,94,.15); color:var(--verde); border:1px solid rgba(34,197,94,.3); }
.stock-medio  { background:rgba(245,158,11,.12); color:#fcd34d;     border:1px solid rgba(245,158,11,.3); }
.stock-bajo   { background:rgba(239,68,68,.12);  color:#fca5a5;     border:1px solid rgba(239,68,68,.3); }
.stock-agotado{ background:rgba(239,68,68,.18);  color:#f87171;     border:1px solid rgba(239,68,68,.4); font-weight:800; }

/* Prod card agotada */
.prod-agotado { opacity: .65; cursor: not-allowed !important; }
.prod-agotado:hover { transform: none !important; box-shadow: none !important; }
.prod-agotado-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.7);
  color: #f87171;
  font-size: .8rem;
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid rgba(239,68,68,.5);
  pointer-events: none;
  letter-spacing: .04em;
  text-transform: uppercase;
  z-index: 2;
}
.prod-stock-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: rgba(245,158,11,.9);
  color: #000;
  font-size: .68rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 20px;
  pointer-events: none;
  z-index: 2;
}

/* Alertas de stock bajo en dashboard */
.alerta-stock {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .6rem .9rem;
  background: rgba(245,158,11,.1);
  border: 1px solid rgba(245,158,11,.3);
  border-radius: var(--radius);
  font-size: .82rem;
  color: #fcd34d;
  margin-bottom: 6px;
}
.alerta-stock.agotado {
  background: rgba(239,68,68,.1);
  border-color: rgba(239,68,68,.3);
  color: #fca5a5;
}

/* ════════════════════════════════════════════════
   UPLOAD PREVIEW — tarjeta en tiempo real
   ════════════════════════════════════════════════ */
.upload-area {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.upload-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: var(--radius);
  object-fit: contain;
  margin: 0 auto;
  display: block;
}
#prodPreviewCard {
  animation: fadeIn .25s ease;
}
@keyframes fadeIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ════════════════════════════════════════════════
   ESPECIFICACIONES TÉCNICAS — detalle de producto
   ════════════════════════════════════════════════ */
.prod-specs-wrap {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin: .85rem 0;
}
.prod-specs-titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .75rem;
}
.prod-specs-lista {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.prod-spec-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: .42rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.prod-spec-item:last-child { border-bottom: none; }
.prod-spec-ico {
  color: var(--verde);
  flex-shrink: 0;
  font-size: .8rem;
}
/* Modo claro */
body.tema-claro .prod-specs-wrap {
  background: #ffffff;
  border-color: rgba(21,128,61,.2);
}
body.tema-claro .prod-spec-item { color: #14532d; }

/* ════════════════════════════════════════════════════
   SELECTOR DE ENVÍO — tarjetas con logo + neon verde
   ════════════════════════════════════════════════════ */
.envio-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: .75rem 0;
  justify-content: center;
  align-items: flex-start;
}

/* Sin recuadro — solo logo circular + nombre */
.envio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 4px;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform .2s var(--ease);
  text-align: center;
  position: relative;
  width: 88px;
}
.envio-card:hover {
  transform: translateY(-3px) scale(1.05);
}

/* Logo circular */
.envio-card-logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  transition: box-shadow .25s;
  /* Sombra sutil siempre visible */
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.envio-card-logo-wrap svg,
.envio-card-logo-wrap img {
  border-radius: 50%;
  display: block;
}

/* Hover — pre-neon suave */
.envio-card:hover .envio-card-logo-wrap {
  box-shadow:
    0 4px 14px rgba(0,0,0,.2),
    0 0 0 2px rgba(34,197,94,.3),
    0 0 12px rgba(34,197,94,.2);
}

/* ACTIVO — neon pulsante alrededor del círculo */
.envio-card.activo .envio-card-logo-wrap {
  animation: neonLogoEnvio 1.8s ease-in-out infinite alternate;
}
@keyframes neonLogoEnvio {
  from {
    box-shadow:
      0 0 0 2.5px var(--verde),
      0 0 10px rgba(34,197,94,.55),
      0 0 22px rgba(34,197,94,.28);
  }
  to {
    box-shadow:
      0 0 0 3.5px var(--verde),
      0 0 20px rgba(34,197,94,.8),
      0 0 40px rgba(34,197,94,.45),
      0 0 60px rgba(34,197,94,.2);
  }
}

/* Nombre */
.envio-card-nombre {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-muted);
  line-height: 1.3;
  transition: color .15s;
  max-width: 84px;
}
.envio-card:hover .envio-card-nombre { color: var(--text-primary); }
.envio-card.activo .envio-card-nombre {
  color: var(--verde);
  font-weight: 800;
}

/* Check pequeño sobre el logo cuando activo */
.envio-card.activo::after {
  content: '✓';
  position: absolute;
  top: 0; right: 0;
  font-size: .65rem;
  font-weight: 900;
  color: #fff;
  background: var(--verde);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* Ocultar precio y tiempo */
.envio-card-tiempo,
.envio-card-costo { display: none; }

/* Modo claro */
body.tema-claro .envio-card-nombre { color: #374151; }
body.tema-claro .envio-card.activo .envio-card-nombre { color: #15803d; }

/* ════════════════════════════════════════════════════
   CHECKOUT — secciones y campos estilo ML
   ════════════════════════════════════════════════════ */
.chk-seccion-titulo {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--verde);
  margin-bottom: .65rem;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.req {
  color: #ef4444;
  font-size: .8rem;
}
.chk-toggle-recibe {
  display: flex;
  gap: 1.5rem;
  padding: .5rem 0;
}
.chk-radio-lbl {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .86rem;
  color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
}
.chk-radio-lbl input[type=radio] {
  accent-color: var(--verde);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
#camposOtroReceptor {
  background: var(--verde-dim);
  border: 1px solid var(--verde-border);
  border-radius: var(--radius);
  padding: .85rem;
  margin-top: .5rem;
  animation: modalEntrar .2s var(--ease);
}
body.tema-claro .chk-seccion-titulo { color: #15803d; }
body.tema-claro #camposOtroReceptor { background: rgba(21,128,61,.06); }

/* ════════════════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP
   ════════════════════════════════════════════════════ */
.wa-flotante {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 800;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #25D366;
  color: #fff;
  border-radius: 50px;
  padding: .75rem 1.1rem .75rem .9rem;
  text-decoration: none;
  box-shadow:
    0 4px 18px rgba(37,211,102,.45),
    0 0 0 0 rgba(37,211,102,.4);
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
  animation: waPulso 2.5s ease-in-out infinite;
  cursor: pointer;
  max-width: 210px;
  overflow: hidden;
  white-space: nowrap;
}
.wa-flotante:hover {
  transform: scale(1.06) translateY(-2px);
  box-shadow:
    0 6px 28px rgba(37,211,102,.6),
    0 0 0 4px rgba(37,211,102,.15);
  background: #20BA5A;
  max-width: 220px;
}
.wa-flotante:active {
  transform: scale(.97);
}
/* Texto que aparece al hacer hover */
.wa-flotante-texto {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 0;
  max-width: 0;
  transition: all .3s ease;
  overflow: hidden;
}
.wa-flotante:hover .wa-flotante-texto {
  opacity: 1;
  max-width: 140px;
}
/* Pulso neon verde de WhatsApp */
@keyframes waPulso {
  0%   { box-shadow: 0 4px 18px rgba(37,211,102,.45), 0 0 0 0   rgba(37,211,102,.4); }
  50%  { box-shadow: 0 4px 22px rgba(37,211,102,.55), 0 0 0 10px rgba(37,211,102,0); }
  100% { box-shadow: 0 4px 18px rgba(37,211,102,.45), 0 0 0 0   rgba(37,211,102,0); }
}

/* Ocultar en login */
#login ~ .wa-flotante,
#login.activa ~ .wa-flotante { display: none; }

/* Responsive — más pequeño en mobile */
@media (max-width: 768px) {
  .wa-flotante {
    bottom: 1.25rem;
    right: 1.25rem;
    padding: .7rem;
    border-radius: 50%;
  }
  .wa-flotante-texto { display: none; }
}

/* ════════════════════════════════════════════════════
   MIS PEDIDOS — tarjetas del socio
   ════════════════════════════════════════════════════ */
.mis-pedidos-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem;
  margin-bottom: .75rem;
  transition: all .2s;
}
.mis-pedidos-card:hover {
  border-color: var(--verde-border);
  box-shadow: var(--shadow-verde);
}
.mis-pedidos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .65rem;
}
.mis-pedidos-num {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text-primary);
  font-family: monospace;
}
.mis-pedidos-fecha {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.mis-pedidos-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.mis-pedido-item-tag {
  background: var(--verde-dim);
  border: 1px solid var(--verde-border);
  color: var(--verde);
  font-size: .72rem;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════
   KPI ÍCONOS SVG limpios
   ════════════════════════════════════════════════════ */
.kpi-icono svg {
  stroke-width: 1.8;
}
.kpi-icono.verde svg { stroke: var(--verde); }
.kpi-icono.azul  svg { stroke: #60a5fa; }
.kpi-icono.gold  svg { stroke: #fbbf24; }
.kpi-icono.rojo  svg { stroke: #f87171; }

/* Sidebar nav-item SVG más fino y limpio */
.nav-item svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.nav-item.activo svg { stroke: var(--verde); }

/* sidebar mini — ocultar texto limpiamente */
body.sidebar-mini .nav-item > span[data-i18n] { display: none !important; }

/* admin-only y cliente-only controlados por JS en entrarApp */

/* ════════════════════════════════════════════════════
   ESTILO WORDPRESS — Productos y Categorías admin
   ════════════════════════════════════════════════════ */

/* Cabecera de página WP */
.wp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.wp-page-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wp-page-title { font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.wp-btn-add { font-size: .82rem !important; }

/* Quick stats */
.wp-quick-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.wp-stat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem .85rem;
  text-align: center;
  min-width: 60px;
}
.wp-stat-num { display: block; font-size: 1.1rem; font-weight: 800; color: var(--text-primary); line-height: 1; }
.wp-stat-lbl { display: block; font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.wp-stat-green .wp-stat-num { color: var(--verde); }
.wp-stat-red   .wp-stat-num { color: #f87171; }
.wp-stat-gold  .wp-stat-num { color: #fbbf24; }

/* Toolbar WP */
.wp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.wp-toolbar-left  {
  display: flex;
  gap: 6px;
  flex: 1;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--verde-border) transparent;
  min-width: 0;
}
.wp-toolbar-left::-webkit-scrollbar { height: 3px; }
.wp-toolbar-left::-webkit-scrollbar-thumb { background: var(--verde-border); border-radius: 3px; }
.wp-toolbar-right { display: flex; gap: 8px; align-items: center; flex-shrink: 0; flex-wrap: wrap; }
.wp-search-box {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .35rem .75rem;
  transition: border-color .15s;
}
.wp-search-box:focus-within { border-color: var(--verde); }
.wp-search-box input { background: none; border: none; outline: none; color: var(--text-primary); font-size: .82rem; width: clamp(120px, 15vw, 220px); }
.wp-view-tabs { display: flex; gap: 4px; }

/* Grid de cards WP */
.wp-prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.wp-prod-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all .2s var(--ease);
}
.wp-prod-card:hover {
  border-color: var(--verde-border);
  box-shadow: 0 4px 20px rgba(34,197,94,.12);
  transform: translateY(-2px);
}
.wp-prod-card-img {
  aspect-ratio: 1/1;
  background: var(--bg-panel);
  overflow: hidden;
  position: relative;
  cursor: pointer;
}
.wp-prod-card-img img { width: 100%; height: 100%; object-fit: contain; background:var(--bg-card); transition: transform .3s; }
.wp-prod-card:hover .wp-prod-card-img img { transform: scale(1.04); }
.wp-prod-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.wp-prod-card-badges { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 3px; }
.wp-badge { font-size: .65rem; font-weight: 700; padding: 2px 7px; border-radius: 10px; }
.wp-badge-grey { background: rgba(255,255,255,.12); color: var(--text-muted); }
.wp-badge-red  { background: rgba(239,68,68,.2);   color: #fca5a5; }
.wp-badge-gold { background: rgba(245,158,11,.2);  color: #fcd34d; }
.wp-prod-card-body { padding: .75rem; }
.wp-prod-card-cat   { font-size: .65rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.wp-prod-card-nombre{ font-size: .88rem; font-weight: 700; color: var(--text-primary); cursor: pointer; line-height: 1.3; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wp-prod-card-nombre:hover { color: var(--verde); }
.wp-prod-card-sku  { font-size: .68rem; color: var(--verde); font-family: monospace; display: block; margin-bottom: 4px; }
.wp-prod-card-precio{ font-size: .95rem; font-weight: 800; color: var(--verde); margin-bottom: .6rem; }
.wp-prod-card-acciones { display: flex; gap: 4px; flex-wrap: wrap; }

/* Acciones inline WP */
.wp-inline-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .72rem; font-weight: 600;
  padding: .28rem .6rem;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s;
  background: none;
}
.wp-inline-edit  { color: var(--verde);  border-color: var(--verde-border); background: var(--verde-dim); }
.wp-inline-edit:hover  { background: rgba(34,197,94,.18); }
.wp-inline-stock { color: #60a5fa; border-color: rgba(96,165,250,.3); background: rgba(59,130,246,.08); }
.wp-inline-stock:hover { background: rgba(59,130,246,.16); }
.wp-inline-add   { color: #a78bfa; border-color: rgba(167,139,250,.3); background: rgba(139,92,246,.08); }
.wp-inline-add:hover   { background: rgba(139,92,246,.15); }
.wp-inline-del   { color: #f87171; border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.06); padding: .28rem .45rem; }
.wp-inline-del:hover   { background: rgba(239,68,68,.15); }

/* Tabla mejorada WP */
.wp-table-row:hover { background: rgba(34,197,94,.03) !important; }
.wp-table-img {
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--bg-panel); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.wp-table-img img { width: 100%; height: 100%; object-fit: cover; }
.wp-table-nombre { font-weight: 700; font-size: .88rem; color: var(--text-primary); }
.wp-table-nombre:hover { color: var(--verde); cursor: pointer; }
.wp-table-sku  { font-size: .7rem; color: var(--verde); font-family: monospace; margin-top: 2px; }
.wp-table-prov { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
/* Acciones de fila visibles solo en hover */
.wp-row-actions { font-size: .72rem; margin-top: 4px; opacity: 0; transition: opacity .15s; }
tr:hover .wp-row-actions { opacity: 1; }
.wp-ra-edit  { color: var(--verde); cursor: pointer; }
.wp-ra-edit:hover { text-decoration: underline; }
.wp-ra-stock { color: #60a5fa; cursor: pointer; }
.wp-ra-stock:hover { text-decoration: underline; }
.wp-ra-del   { color: #f87171; cursor: pointer; }
.wp-ra-del:hover { text-decoration: underline; }

/* Árbol de categorías */
.wp-cat-layout {
  display: grid;
  grid-template-columns: 1.2fr 6px 1fr;
  gap: 0;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* Espaciado en columnas */
.wp-cat-layout > div:first-child {
  padding-right: 1.25rem;
  min-width: 0;
  overflow: hidden;
}
.wp-cat-layout > div:last-child {
  padding-left: 1.25rem;
  min-width: 0;
  overflow: hidden;
}
/* Tabla de subcategorías — scroll horizontal cuando no cabe */
.wp-cat-layout > div:last-child .tabla-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}
.wp-cat-layout > div:last-child table {
  min-width: 320px;
}
/* Nombres de categoría en el árbol — no desbordar */
.wp-cat-layout > div:first-child .wp-cat-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.wp-cat-layout > div:first-child .wp-cat-item {
  min-width: 0;
}
.wp-cat-layout > div:first-child .wp-cat-row {
  min-width: 0;
  overflow: hidden;
}
/* Label de subcategorías — no desbordar */
.wp-cat-layout > div:last-child .wp-section-label {
  overflow: hidden;
  flex-wrap: wrap;
  gap: 4px;
}
/* Columna derecha — tabla subcats con scroll */
.wp-cat-layout > div:last-child {
  min-width: 0;
  overflow: hidden;
}
.wp-cat-layout > div:last-child .tabla-wrap {
  overflow-x: auto;
}
/* Columna izquierda — árbol */
.wp-cat-tree-wrap {
  min-width: 0;
  overflow: hidden;
}
/* Cada ítem del árbol no desborda */
.wp-cat-item {
  min-width: 0;
  box-sizing: border-box;
}
.wp-cat-row {
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.wp-cat-info {
  min-width: 0;
  overflow: hidden;
}
.wp-cat-nombre {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Botones de acción no crecen */
.wp-cat-acciones {
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.wp-section-label {
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  margin-bottom: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  min-width: 0;
}
.wp-cat-tree-wrap { display: flex; flex-direction: column; gap: 8px; }
.wp-cat-item {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .2s;
}
.wp-cat-item:hover { border-color: var(--verde-border); }
.wp-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .85rem 1rem;
}
.wp-cat-icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  background: var(--verde-dim);
  border: 1px solid var(--verde-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  overflow: hidden;
}
.wp-cat-icon img { width: 100%; height: 100%; object-fit: contain; }
.wp-cat-info { flex: 1; }
.wp-cat-nombre { font-weight: 700; font-size: .92rem; color: var(--text-primary); }
.wp-cat-meta { font-size: .72rem; color: var(--text-muted); margin-top: 2px; display: flex; gap: 10px; }
.wp-cat-acciones { display: flex; gap: 4px; }
/* Subcategorías en árbol */
.wp-subcat-list {
  border-top: 1px solid var(--border);
  background: rgba(34,197,94,.02);
  padding: .4rem .75rem .4rem 1rem;
  display: flex; flex-direction: column; gap: 4px;
}
.wp-subcat-item {
  display: flex; align-items: center; gap: 8px;
  padding: .3rem 0;
}
.wp-subcat-connector { color: var(--verde); font-size: .9rem; flex-shrink: 0; opacity: .5; }
.wp-subcat-nombre { flex: 1; font-size: .82rem; color: var(--text-secondary); font-weight: 500; }
.wp-subcat-meta { font-size: .7rem; color: var(--text-muted); }

/* Responsive */
@media (max-width: 900px) {
  .wp-cat-layout { grid-template-columns: 1fr; }
  .wp-cat-acciones { gap: 3px; }
  .wp-inline-btn span { display: none; } /* Solo ícono en mobile */
  .wp-prod-grid  { grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); }
}

/* ════════════════════════════════════════════════════
   GALERÍA DE IMÁGENES — producto
   ════════════════════════════════════════════════════ */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
  margin-bottom: .5rem;
}
.galeria-thumb {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  transition: border-color .15s;
}
.galeria-thumb:hover { border-color: var(--verde-border); }
.galeria-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.galeria-del {
  position: absolute;
  top: 3px; right: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .65rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .15s;
}
.galeria-thumb:hover .galeria-del { opacity: 1; }
.galeria-portada {
  position: absolute;
  bottom: 3px; left: 3px;
  background: var(--verde);
  color: #000;
  font-size: .6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════
   GALERÍA VERTICAL — detalle de producto (ML style)
   ══════════════════════════════════════════════════ */
.prod-detalle-galeria {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

/* Columna de miniaturas verticales */
.prod-galeria-thumbs-v {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 72px;
  flex-shrink: 0;
  max-height: 480px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--verde-border) transparent;
}
.prod-galeria-thumbs-v::-webkit-scrollbar { width: 3px; }
.prod-galeria-thumbs-v::-webkit-scrollbar-thumb { background: var(--verde-border); border-radius: 3px; }

.prod-thumb-v {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .18s var(--ease);
  background: var(--bg-panel);
}
.prod-thumb-v img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-card); }
.prod-thumb-v:hover {
  border-color: rgba(34,197,94,.5);
  transform: scale(1.04);
}
.prod-thumb-v.activo {
  border-color: var(--verde) !important;
  border-width: 2.5px;
  box-shadow: 0 0 0 2px rgba(34,197,94,.25),
              0 0 12px rgba(34,197,94,.2);
}

/* Imagen principal grande */
.prod-detalle-img-wrap {
  flex: 1;
  position: relative;
  aspect-ratio: 1/1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  cursor: zoom-in;
  min-height: 320px;
}
.prod-detalle-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .15s ease, transform .3s ease;
}
.prod-detalle-img-wrap:hover img { transform: scale(1.02); }

/* Flechas de navegación */
.galeria-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s, background .15s;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.prod-detalle-img-wrap:hover .galeria-nav { opacity: 1; }
.galeria-nav:hover { background: rgba(34,197,94,.5); }
.galeria-prev { left: 8px; }
.galeria-next { right: 8px; }

/* Contador de fotos */
.galeria-counter {
  position: absolute;
  bottom: 10px; right: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Sin imagen */
.prod-sin-img {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  opacity: .2;
}

/* Responsive — en mobile las miniaturas van arriba horizontales */
@media (max-width: 640px) {
  .prod-detalle-galeria { flex-direction: column-reverse; }
  .prod-galeria-thumbs-v {
    flex-direction: row;
    width: 100%;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
  }
  .prod-thumb-v { width: 60px; height: 60px; }
}

/* ════════════════════════════════════════════════════
   CATEGORÍAS ADMIN — filtro por clic en recuadro
   ════════════════════════════════════════════════════ */

/* Todo el recuadro es clickeable */
.wp-cat-item {
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, background .18s, transform .15s;
}
.wp-cat-item:hover {
  border-color: rgba(34,197,94,.5) !important;
  background: rgba(34,197,94,.03);
  transform: translateX(3px);
}

/* Categoría activa (filtrada) — neon verde */
.wp-cat-activa {
  border-color: var(--verde) !important;
  background: rgba(34,197,94,.06) !important;
  transform: translateX(4px) !important;
  box-shadow:
    0 0 0 1.5px var(--verde),
    0 0 16px rgba(34,197,94,.22),
    4px 0 0 var(--verde) !important;
}
.wp-cat-activa .wp-cat-nombre { color: var(--verde); }
.wp-cat-activa .wp-cat-icon {
  box-shadow: 0 0 0 2px var(--verde), 0 0 10px rgba(34,197,94,.3);
}

/* Hover en nombre cuando el recuadro no está activo */
.wp-cat-item:not(.wp-cat-activa):hover .wp-cat-nombre {
  color: var(--verde);
}

/* Ícono — efecto zoom en hover del recuadro */
.wp-cat-item:hover .wp-cat-icon {
  transform: scale(1.08);
}
.wp-cat-icon { transition: transform .2s, box-shadow .2s; }

/* Los botones no propagan el clic — cursor normal */
.wp-cat-acciones button { cursor: pointer; }

.wp-cat-row { position: relative; }

/* ════════════════════════════════════════════════════
   RESPONSIVE — Pantallas grandes (1920x1080 y más)
   ════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  .wp-prod-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .wp-search-box input { width: 260px; }
  .pagina { padding: 1.75rem 2.5rem; }
}

/* Pantalla media (1280-1599px) */
@media (max-width: 1599px) and (min-width: 1280px) {
  .wp-prod-grid { grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); }
}

/* Pantalla pequeña (< 1280px) */
@media (max-width: 1279px) {
  .wp-quick-stats { display: none; } /* Ocultar stats en pantallas chicas */
  .wp-toolbar { flex-direction: column; align-items: flex-start; }
  .wp-toolbar-right { width: 100%; justify-content: flex-end; }
  .pagina { padding: 1.25rem 1.25rem; }
}

/* Tablet (< 1024px) */
@media (max-width: 1023px) {
  .wp-page-header { flex-direction: column; align-items: flex-start; }
  .wp-prod-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* Tabla productos — siempre scrollable en horizontal */
.tabla-wrap table { min-width: 600px; }

/* ════════════════════════════════════════════════════
   CATEGORÍAS — fix desbordamiento derecha
   ════════════════════════════════════════════════════ */
#pag-categorias {
  overflow-x: hidden;
  box-sizing: border-box;
}
/* Subcategories section label con "Ver todas" no se desborde */
#subcatSeccionLabel {
  min-width: 0;
  overflow: hidden;
  flex: 1;
}
/* Botón + Nueva en la sección subcats */
.wp-cat-layout > div:last-child .wp-section-label {
  gap: 6px;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════
   BENEFICIOS — tarjetas editables
   ════════════════════════════════════════════════════ */
.beneficio-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all .2s var(--ease);
  position: relative;
  overflow: hidden;
}
.beneficio-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--b-color, var(--verde));
  border-radius: 3px 0 0 3px;
}
.beneficio-card:hover {
  border-color: var(--b-color, var(--verde));
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
  transform: translateY(-2px);
}
.beneficio-icono { font-size: 2rem; line-height: 1; }
.beneficio-titulo {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.beneficio-desc {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  flex: 1;
}
.beneficio-admin-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════
   CUPONES — tarjetas del socio
   ════════════════════════════════════════════════════ */
.cupon-card {
  background: var(--bg-card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  cursor: pointer;
  transition: all .2s var(--ease);
  min-width: 160px;
  position: relative;
}
.cupon-card:hover {
  border-color: var(--verde);
  border-style: solid;
  background: rgba(34,197,94,.04);
  transform: translateY(-2px);
}
.cupon-card.activo {
  border-color: var(--verde);
  border-style: solid;
  background: rgba(34,197,94,.08);
  box-shadow: 0 0 16px rgba(34,197,94,.2);
}
.cupon-descuento {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--verde);
  line-height: 1;
  margin-bottom: 4px;
}
.cupon-codigo {
  display: block;
  font-size: .78rem;
  background: var(--verde-dim);
  color: var(--verde);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  width: fit-content;
  margin-bottom: 4px;
}
.cupon-desc {
  font-size: .72rem;
  color: var(--text-muted);
}
.cupon-check {
  font-size: .72rem;
  color: var(--verde);
  font-weight: 700;
  margin-top: 4px;
}

/* ════════════════════════════════════════════════════
   CHIPS SUBCATEGORÍAS — filtro horizontal en catálogo
   ════════════════════════════════════════════════════ */
.subcat-chips-wrap { display: none; } /* ya no se usa arriba */
.subcat-chips-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: .5rem;
}
.subcat-chip {
  display: inline-flex;
  align-items: center;
  padding: .45rem 1rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-secondary);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.subcat-chip:hover {
  border-color: rgba(34,197,94,.5);
  color: var(--verde);
  background: var(--verde-dim);
}
.subcat-chip.activo {
  border-color: var(--verde);
  background: var(--verde-dim);
  color: var(--verde);
  box-shadow: 0 0 0 1px var(--verde), 0 0 10px rgba(34,197,94,.2);
}
body.tema-claro .subcat-chip { background: #fff; border-color: #d1d5db; color: #374151; }
body.tema-claro .subcat-chip.activo { border-color: #15803d; background: #f0fdf4; color: #15803d; }

/* Chips en toolbar — misma línea que Relevancia */
.subcat-chip-tb {
  display: inline-flex;
  align-items: center;
  padding: .32rem .85rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}
.subcat-chip-tb:hover {
  border-color: rgba(34,197,94,.5);
  color: var(--verde);
  background: var(--verde-dim);
}
.subcat-chip-tb.activo {
  border-color: var(--verde);
  background: var(--verde-dim);
  color: var(--verde);
  box-shadow: 0 0 0 1px var(--verde), 0 0 8px rgba(34,197,94,.2);
}

/* Select de subcategorías en toolbar */
.subcat-select {
  border-color: var(--verde-border) !important;
  color: var(--verde) !important;
  font-weight: 600 !important;
}
.subcat-select:focus { border-color: var(--verde) !important; }

/* ════════════════════════════════════════════════════
   MODAL PRODUCTO — sección de fotos ML-style
   ════════════════════════════════════════════════════ */
.modal-img-header {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--verde);
  margin-bottom: .85rem;
  padding-bottom: .5rem;
  border-bottom: 1.5px solid var(--verde-border);
}
.modal-img-layout {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 1.25rem;
  align-items: start;
}
.modal-img-galeria-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .45rem;
}

/* Zona foto principal */
.upload-area-principal {
  aspect-ratio: 1/1;
  max-height: 200px;
}

/* Grid de fotos adicionales — miniaturas pequeñas */
.galeria-grid-modal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: .5rem;
  min-height: 30px;
}
.galeria-thumb-modal {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 6px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  cursor: pointer;
  transition: border-color .15s;
}
.galeria-thumb-modal:hover { border-color: var(--verde-border); }
.galeria-thumb-modal img { width: 100%; height: 100%; object-fit: contain; background: var(--bg-card); }
.galeria-thumb-modal .galeria-del {
  position: absolute; top: 2px; right: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0,0,0,.7);
  border: none; color: #fff;
  font-size: .55rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.galeria-thumb-modal:hover .galeria-del { opacity: 1; }

.galeria-vacia {
  font-size: .72rem;
  color: var(--text-muted);
  padding: .5rem;
  text-align: center;
  border: 1.5px dashed var(--border);
  border-radius: 6px;
  margin-bottom: .5rem;
}

/* Botón agregar fotos */
.galeria-add-btn-modal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: .4rem .85rem;
  background: var(--verde-dim);
  border: 1.5px solid var(--verde-border);
  color: var(--verde);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  transition: all .15s;
  width: 100%;
  justify-content: center;
}
.galeria-add-btn-modal:hover { background: rgba(34,197,94,.16); border-color: var(--verde); }

/* Preview lateral */
.modal-img-preview { position: sticky; top: 0; }
.modal-preview-card {
  border: 1.5px solid var(--verde-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  display: none;
}
.modal-preview-principal {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-panel);
}
.modal-preview-principal img { width: 100%; height: 100%; object-fit: contain; }
.modal-preview-thumbs {
  display: flex;
  gap: 4px;
  padding: 5px;
  background: var(--bg-panel);
  overflow-x: auto;
}
.prev-thumb {
  width: 36px; height: 36px;
  border-radius: 4px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color .15s;
}
.prev-thumb.activo { border-color: var(--verde); }
.prev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.modal-preview-info {
  padding: .5rem .65rem;
  font-size: .75rem;
  font-weight: 600;
}
.modal-preview-empty {
  aspect-ratio: 1/1;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
}

/* ════════════════════════════════════════════════════
   MODAL PRODUCTO — franjas de imágenes
   ════════════════════════════════════════════════════ */
.img-franja {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.img-franja-titulo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: .65rem 1rem;
  background: var(--bg-panel);
  border-bottom: 1.5px solid var(--border);
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.img-franja-hint {
  font-size: .7rem;
  font-weight: 400;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
/* ── Editor de mensaje de bienvenida: botones para insertar datos/emojis
   sin tener que escribir código, y vista previa tipo WhatsApp. Pensado
   para un administrador sin conocimientos técnicos: nada se "rompe" al
   hacer clic, solo se agrega texto donde estaba el cursor. ── */
.bienvenida-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bienvenida-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--verde-dim); border: 1.5px solid var(--verde-border);
  color: var(--verde); font-size: .74rem; font-weight: 700;
  padding: .4rem .65rem; border-radius: 20px; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.bienvenida-chip:hover { background: var(--verde); color: #06231a; }
.bienvenida-emojis {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.bienvenida-emoji-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 8px;
  font-size: 1.05rem; cursor: pointer; transition: all .15s;
}
.bienvenida-emoji-btn:hover { border-color: var(--verde-border); background: var(--verde-dim); transform: scale(1.08); }
.bienvenida-preview-wrap {
  background: var(--bg-input); border: 1.5px solid var(--border); border-radius: 10px;
  padding: .75rem .85rem;
}
.bienvenida-preview {
  color: var(--text-primary); font-size: .84rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; max-width: 100%;
}
.bienvenida-preview a { color: var(--verde); }

/* ── Selector de emojis completo (tipo Windows/WhatsApp): categorías +
   buscador, para que el administrador tenga muchas opciones sin
   depender de los emojis del teclado de su computador. ── */
.emoji-picker {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 320px; max-width: 90vw;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding: .6rem; display: flex; flex-direction: column; gap: .5rem;
}
.emoji-picker-buscar input {
  width: 100%; background: var(--bg-input); border: 1.5px solid var(--border);
  border-radius: 8px; padding: .45rem .6rem; color: var(--text-primary);
  font-size: .8rem; outline: none;
}
.emoji-picker-buscar input:focus { border-color: var(--verde); }
.emoji-picker-tabs {
  display: flex; gap: 3px; overflow-x: auto; padding-bottom: 2px;
}
.emoji-picker-tab {
  flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid transparent; border-radius: 8px;
  font-size: 1.05rem; cursor: pointer; transition: all .15s;
}
.emoji-picker-tab:hover { background: var(--bg-input); }
.emoji-picker-tab.activo { background: var(--verde-dim); border-color: var(--verde-border); }
.emoji-picker-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  max-height: 220px; overflow-y: auto; padding-right: 2px;
}
.emoji-picker-btn {
  width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 7px;
  font-size: 1.25rem; cursor: pointer; transition: background .1s;
}
.emoji-picker-btn:hover { background: var(--bg-input); }
.emoji-picker-vacio {
  grid-column: 1 / -1; text-align: center; color: var(--text-muted);
  font-size: .78rem; padding: 1rem 0;
}
.img-franja-contador {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  color: var(--verde);
  background: var(--verde-dim);
  padding: 2px 8px;
  border-radius: 10px;
}
.img-franja-body {
  padding: .85rem 1rem;
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 1rem;
  align-items: start;
}

/* Zona de carga foto principal */
.img-upload-principal {
  min-height: 150px;
  aspect-ratio: auto;
}

/* Preview mini en modal */
.img-preview-mini-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .4rem;
}
.img-preview-mini-card {
  border: 1.5px solid var(--verde-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.img-preview-mini-img {
  aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--bg-panel);
}
.img-preview-mini-img img { width:100%;height:100%;object-fit:cover; }

/* Grid fotos adicionales dentro de franja */
#galeriaGrid.galeria-grid-modal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
  padding: .75rem 1rem;
  min-height: 50px;
}
.galeria-add-btn-modal {
  margin: 0 1rem .85rem;
  width: calc(100% - 2rem);
}

/* ════════════════════════════════════════════════════
   LUPA — efecto zoom en detalle del producto
   ════════════════════════════════════════════════════ */
.prod-detalle-img-wrap {
  cursor: crosshair !important;
}
.prod-lupa {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px solid var(--verde);
  box-shadow:
    0 0 0 1px rgba(34,197,94,.25),
    0 0 14px rgba(34,197,94,.3),
    0 6px 20px rgba(0,0,0,.4);
  overflow: hidden;
  pointer-events: none;
  z-index: 10;
}
#prodLupaInner {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ════════════════════════════════════════════════════
   ENVÍO — logo PNG sin borde + neon al seleccionar
   ════════════════════════════════════════════════════ */

/* Wrap PNG — mismo tamaño que círculo, sin fondo */
.envio-logo-png-wrap {
  width: 76px !important;
  height: 76px !important;
  border-radius: 12px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-shadow: none !important;
  transition: box-shadow .25s !important;
}
.envio-logo-png-wrap img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  display: block !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* ══ NEON ESTILO LOGIN — luz desde atrás ══ */

/* Wrap PNG — posición relativa para el pseudo glow */
.envio-logo-png-wrap {
  position: relative !important;
}

/* Glow radial detrás del logo (igual que login ::before) */
.envio-logo-png-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 14px;
  background: radial-gradient(circle,
    rgba(255,255,255,.15) 0%,
    rgba(34,197,94,.1) 45%,
    transparent 72%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.envio-card-png.activo .envio-logo-png-wrap::before,
.envio-card-png:hover .envio-logo-png-wrap::before {
  opacity: 1;
  animation: logoGlowEnvio 2.4s ease-in-out infinite;
}
@keyframes logoGlowEnvio {
  0%,100% { opacity:.7; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.08); }
}

/* drop-shadow en la imagen = luz desde atrás */
.envio-logo-png-wrap img {
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35))
          drop-shadow(0 0 18px rgba(34,197,94,.3)) !important;
  transition: filter .3s !important;
}
.envio-card-png.activo .envio-logo-png-wrap img {
  filter: drop-shadow(0 0 12px rgba(255,255,255,.55))
          drop-shadow(0 0 28px rgba(34,197,94,.6))
          drop-shadow(0 0 48px rgba(34,197,94,.3)) !important;
  animation: imgGlowPulse 2.4s ease-in-out infinite;
}
@keyframes imgGlowPulse {
  0%,100% {
    filter: drop-shadow(0 0 10px rgba(255,255,255,.5))
            drop-shadow(0 0 24px rgba(34,197,94,.55));
  }
  50% {
    filter: drop-shadow(0 0 16px rgba(255,255,255,.75))
            drop-shadow(0 0 36px rgba(34,197,94,.8))
            drop-shadow(0 0 56px rgba(34,197,94,.4));
  }
}

/* Círculo normal — mismo efecto */
.envio-card-logo-wrap {
  position: relative;
}
.envio-card-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,255,.1) 0%,
    rgba(34,197,94,.08) 45%,
    transparent 72%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.envio-card.activo .envio-card-logo-wrap::before,
.envio-card:hover .envio-card-logo-wrap::before {
  opacity: 1;
  animation: logoGlowEnvio 2.4s ease-in-out infinite;
}
.envio-card.activo .envio-card-logo-wrap {
  box-shadow:
    0 0 0 3px var(--verde),
    0 0 20px rgba(34,197,94,.6),
    0 0 40px rgba(34,197,94,.3) !important;
  animation: neonLogoEnvio 2.4s ease-in-out infinite;
}
@keyframes neonLogoEnvio {
  0%,100% {
    box-shadow:
      0 0 0 2.5px var(--verde),
      0 0 14px rgba(34,197,94,.55),
      0 0 28px rgba(34,197,94,.25);
  }
  50% {
    box-shadow:
      0 0 0 3.5px var(--verde),
      0 0 24px rgba(34,197,94,.8),
      0 0 48px rgba(34,197,94,.45);
  }
}

/* ── MODO CLARO — fondo adaptativo ── */
/* Por defecto fondo oscuro para logos con texto blanco */
body.tema-claro .envio-logo-png-wrap {
  background: #1e293b !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
}
/* Si el logo tiene fondo propio (data-fondo="claro"), usar fondo blanco */
body.tema-claro .envio-logo-png-wrap[data-fondo="claro"] {
  background: #ffffff !important;
}
body.tema-claro .envio-logo-png-wrap img {
  filter: drop-shadow(0 0 3px rgba(255,255,255,.15)) !important;
}
body.tema-claro .envio-card-png.activo .envio-logo-png-wrap {
  background: #1e293b !important;
  box-shadow:
    0 0 0 3px #16a34a,
    0 0 12px rgba(22,163,74,.8),
    0 0 28px rgba(22,163,74,.5),
    0 0 48px rgba(22,163,74,.25) !important;
  animation: neonClaroEnvio 2s ease-in-out infinite !important;
}
@keyframes neonClaroEnvio {
  0%,100% {
    box-shadow:
      0 0 0 3px #16a34a,
      0 0 10px rgba(22,163,74,.7),
      0 0 24px rgba(22,163,74,.4);
  }
  50% {
    box-shadow:
      0 0 0 4px #16a34a,
      0 0 18px rgba(22,163,74,.95),
      0 0 40px rgba(22,163,74,.65),
      0 0 60px rgba(22,163,74,.3);
  }
}
body.tema-claro .envio-card-png.activo .envio-logo-png-wrap img {
  filter: drop-shadow(0 0 8px rgba(22,163,74,.7))
          drop-shadow(0 0 20px rgba(22,163,74,.45)) !important;
  animation: imgGlowPulseClaro 2s ease-in-out infinite !important;
}
@keyframes imgGlowPulseClaro {
  0%,100% { filter: drop-shadow(0 0 6px rgba(22,163,74,.6)) drop-shadow(0 0 16px rgba(22,163,74,.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(22,163,74,.9)) drop-shadow(0 0 32px rgba(22,163,74,.6)); }
}
body.tema-claro .envio-logo-png-wrap::before {
  background: radial-gradient(circle,
    rgba(22,163,74,.2) 0%,
    rgba(22,163,74,.08) 50%,
    transparent 75%) !important;
}
/* Círculo normal en modo claro */
body.tema-claro .envio-card.activo .envio-card-logo-wrap {
  box-shadow:
    0 0 0 3px #16a34a,
    0 0 14px rgba(22,163,74,.8),
    0 0 30px rgba(22,163,74,.45) !important;
  animation: neonClaroEnvio 2s ease-in-out infinite !important;
}

/* Preview del logo en el modal */
.envio-logo-upload-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .75rem;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
}
.envio-logo-preview {
  width: 90px;
  height: 72px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.envio-logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ════════════════════════════════════════════════════
   NEON CLICK GLOBAL — efecto al pulsar cualquier elemento
   ════════════════════════════════════════════════════ */

/* Ripple neon que aparece en el punto de clic */
.neon-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle,
    rgba(34,197,94,.45) 0%,
    rgba(34,197,94,.2) 40%,
    transparent 70%);
  animation: neonRippleAnim .55s ease-out forwards;
}
@keyframes neonRippleAnim {
  0%   { transform: translate(-50%,-50%) scale(0);   opacity: 1; }
  60%  { transform: translate(-50%,-50%) scale(1);   opacity: .7; }
  100% { transform: translate(-50%,-50%) scale(1.4); opacity: 0; }
}

/* Glow en el elemento pulsado — medio, SIN overflow */
.neon-click-active {
  overflow: hidden !important;
  box-shadow:
    0 0 0 2px rgba(34,197,94,.75),
    0 0 10px rgba(34,197,94,.45),
    0 0 20px rgba(34,197,94,.2) !important;
  transition: box-shadow .15s ease !important;
}

/* Modo claro */
body.tema-claro .neon-ripple {
  background: radial-gradient(circle,
    rgba(22,163,74,.5) 0%,
    rgba(22,163,74,.2) 40%,
    transparent 70%);
}
body.tema-claro .neon-click-active {
  box-shadow:
    0 0 0 2px rgba(22,163,74,.85),
    0 0 10px rgba(22,163,74,.5),
    0 0 20px rgba(22,163,74,.22) !important;
}

/* ════════════════════════════════════════════════════
   DIVISOR REDIMENSIONABLE — layout de 2 columnas
   ════════════════════════════════════════════════════ */
.wp-cat-layout {
  position: relative;
}
.resizer-handle {
  width: 6px;
  cursor: col-resize;
  user-select: none;
  display: flex;
  align-items: stretch;
  justify-content: center;
  z-index: 10;
  position: relative;
  transition: background .15s;
}
.resizer-handle:hover,
.resizer-handle.dragging {
  background: rgba(34,197,94,.08);
}
.resizer-line {
  width: 2px;
  background: var(--border);
  border-radius: 2px;
  margin: 8px 0;
  transition: background .15s, box-shadow .15s, width .15s;
  min-height: 40px;
}
.resizer-handle:hover .resizer-line,
.resizer-handle.dragging .resizer-line {
  background: var(--verde);
  width: 3px;
  box-shadow: 0 0 8px rgba(34,197,94,.6), 0 0 16px rgba(34,197,94,.3);
}
/* Triángulo/grip visual en el centro */
.resizer-handle::before {
  content: '⋮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--border);
  font-size: .75rem;
  line-height: 1;
  transition: color .15s;
  pointer-events: none;
}
.resizer-handle:hover::before,
.resizer-handle.dragging::before {
  color: var(--verde);
  text-shadow: 0 0 6px rgba(34,197,94,.6);
}

/* ════════════════════════════════════════════════════
   COLUMNAS REDIMENSIONABLES — estilo Windows
   ════════════════════════════════════════════════════ */
.col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.col-resizer::after {
  content: '';
  width: 2px;
  height: 50%;
  background: var(--border);
  border-radius: 2px;
  transition: background .15s, height .15s, box-shadow .15s;
}
.col-resizer:hover::after,
.col-resizer.dragging::after {
  background: var(--verde);
  height: 70%;
  box-shadow: 0 0 6px rgba(34,197,94,.6), 0 0 12px rgba(34,197,94,.3);
}
/* Cursor col-resize en toda la fila del thead mientras arrastra */
table thead th {
  overflow: visible !important;
  white-space: nowrap;
}
/* Asegurar que las tablas usen layout fijo */
.tabla-wrap table {
  table-layout: auto;
}

/* ════════════════════════════════════════════════════
   MÓDULO GESTIÓN DE CONTENIDO
   ════════════════════════════════════════════════════ */
.contenido-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 1.25rem;
  background: var(--bg-input);
  padding: 4px;
  border-radius: var(--radius-lg);
  width: fit-content;
}
.contenido-tab {
  padding: .45rem 1.1rem;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 600;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .18s;
  white-space: nowrap;
}
.contenido-tab:hover { color: var(--verde); background: var(--verde-dim); }
.contenido-tab.activo {
  background: var(--verde-dim);
  color: var(--verde);
  border: 1px solid var(--verde-border);
}
.contenido-panel { display: none; }
.contenido-panel.activo { display: block; }

/* ════════════════════════════════════════════════════
   PÁGINA DE CONFIGURACIÓN — menú de categorías a la
   izquierda + contenido a la derecha, estilo Slack/Notion,
   embebida como sección fija del panel (no es un modal:
   se abre con irA('configuracion') como cualquier otra
   página del sidebar).
   ════════════════════════════════════════════════════ */
.config-layout {
  display: flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  min-height: 560px;
}
.config-nav {
  width: 220px; flex-shrink: 0; border-right: 1px solid var(--border);
  padding: .85rem; overflow-y: auto; display: flex; flex-direction: column; gap: 3px;
  background: var(--bg-card);
}
.config-nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; border-radius: var(--radius);
  padding: .6rem .75rem; font-size: .84rem; color: var(--text-secondary);
  cursor: pointer; transition: all .15s; font-family: inherit;
}
.config-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.config-nav-item:hover { background: var(--verde-dim); color: var(--verde-neon); }
.config-nav-item.activo {
  background: linear-gradient(90deg, rgba(34,197,94,.15), rgba(34,197,94,.06));
  border-color: rgba(34,197,94,.25); color: var(--verde); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--verde);
}
.config-nav-item.activo svg { stroke: var(--verde); }
.config-contenido { flex: 1; overflow-y: auto; padding: 1.4rem 1.6rem; min-width: 0; }
.config-panel { display: none; }
.config-panel.activo { display: block; animation: tarjetaPanelEntrar .28s cubic-bezier(.34,1.56,.64,1); }
.config-panel-titulo {
  font-size: .95rem; font-weight: 700; margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: 8px;
}
@media (max-width: 768px) {
  .config-layout { flex-direction: column; min-height: 0; }
  .config-nav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .config-nav-item { white-space: nowrap; }
}

/* Editor visual de la tarjeta de socio (pág. Tokens VIP) */
.tema-btn.activo-tema { background: var(--verde-dim); color: var(--verde); border-color: var(--verde-border); }
.tarjeta-handle {
  position: absolute; width: 22px; height: 22px; cursor: grab; user-select: none;
  border: 1.5px solid rgba(74,222,128,.9); border-radius: 50%;
  background: rgba(6,10,6,.75); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; font-size: .78rem;
  transition: box-shadow .15s, transform .1s; z-index: 3;
}
.tarjeta-handle:hover { box-shadow: 0 0 0 4px rgba(74,222,128,.25); transform: scale(1.1); }
.tarjeta-handle.arrastrando { cursor: grabbing; box-shadow: 0 0 0 4px rgba(74,222,128,.45); z-index: 5; }
/* Cian bien saturado — se eligió a propósito porque NO se parece ni al
   verde ni al dorado de las tarjetas, así que la selección se ve clara
   sin importar el tema que se esté editando (el amarillo de antes se
   perdía contra el fondo dorado, que es prácticamente del mismo color). */
.tarjeta-handle.seleccionado { border-color: #22d3ee; box-shadow: 0 0 0 4px rgba(34,211,238,.35); }
/* Elemento oculto de la tarjeta (el admin lo quitó de la vista sin
   borrarlo) — se ve atenuado y punteado en el lienzo del editor para que
   siga siendo posible encontrarlo y restaurarlo con un clic. */
.tarjeta-handle-oculto { opacity: .4; border-style: dashed; }
.tarjeta-handle-oculto:hover { opacity: .85; }

/* Caja de selección tipo Canva — aparece al elegir un elemento y trae su
   manija de esquina para agrandar/achicar arrastrando (ver _dibujarCajaSeleccion). */
.tarjeta-caja-sel {
  position: absolute; border: 2px dashed #22d3ee;
  pointer-events: none; z-index: 2; border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5);
}
.tarjeta-resize-handle {
  position: absolute; width: 16px; height: 16px; transform: translate(-50%,-50%);
  background: #22d3ee; border: 2px solid #072a30; border-radius: 4px;
  z-index: 4; touch-action: none;
}
.tarjeta-resize-handle.tarjeta-resize-se,
.tarjeta-resize-handle.tarjeta-resize-nw { cursor: nwse-resize; }
.tarjeta-resize-handle.tarjeta-resize-s  { cursor: ns-resize; border-radius: 50%; }
.tarjeta-resize-handle:hover { box-shadow: 0 0 0 4px rgba(34,211,238,.35); }

/* ── Estilo neon del resto de la app aplicado a los paneles del editor de
   tarjeta (propiedades, elementos ocultos, imágenes) — mismo lenguaje visual
   que .modal: borde verde tenue, línea superior en degradado que se expande
   al aparecer, y un pulso neon suave y continuo. ── */
.panel-neon {
  position: relative;
  border: 1.5px solid rgba(34,197,94,.35) !important;
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(34,197,94,.12),
    0 0 20px rgba(34,197,94,.16),
    0 0 40px rgba(34,197,94,.07) !important;
  animation: tarjetaPanelEntrar .32s cubic-bezier(.34,1.56,.64,1), tarjetaPanelNeonPulso 3s ease-in-out infinite;
  overflow: visible !important;
}
.panel-neon::before {
  content: ''; position: absolute; top: -1.5px; left: 12%; right: 12%; height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(34,197,94,.3) 20%, rgba(34,197,94,.9) 50%, rgba(34,197,94,.3) 80%, transparent 100%);
  border-radius: 0 0 2px 2px; pointer-events: none;
  animation: tarjetaPanelLinea .4s ease-out;
}
@keyframes tarjetaPanelEntrar {
  0%   { opacity: 0; transform: scale(.94) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.008) translateY(-1px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes tarjetaPanelLinea {
  0%   { left: 50%; right: 50%; opacity: 0; }
  100% { left: 12%; right: 12%; opacity: 1; }
}
@keyframes tarjetaPanelNeonPulso {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(34,197,94,.12), 0 0 15px rgba(34,197,94,.1), 0 0 30px rgba(34,197,94,.04); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(34,197,94,.18), 0 0 22px rgba(34,197,94,.18), 0 0 45px rgba(34,197,94,.08); }
}
/* Botones dentro de los paneles neon del editor: mismo hover con brillo que
   el resto de la app en vez del btn-cancelar plano. */
.panel-neon .btn-cancelar:hover {
  border-color: var(--verde-border); box-shadow: 0 0 12px rgba(34,197,94,.18);
}

/* ── Brillo neon al enfocar campos — antes solo cambiaba el borde de color,
   en toda la app, sin ningún resplandor; ahora hace juego con el resto del
   lenguaje visual (modales, nav, click ripple). ── */
input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(34,197,94,.15), 0 0 10px rgba(34,197,94,.22) !important;
}
body.tema-claro input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,
body.tema-claro select:focus,
body.tema-claro textarea:focus {
  box-shadow: 0 0 0 3px rgba(21,128,61,.15), 0 0 10px rgba(21,128,61,.18) !important;
}

/* ── Biblioteca de imágenes personalizadas de la tarjeta ── */
.tarjeta-img-seccion {
  margin-top: 1rem; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.tarjeta-img-seccion-titulo { margin-bottom: .75rem; display: flex; flex-direction: column; gap: 2px; }
.tarjeta-img-seccion-titulo strong { font-size: .85rem; }
.tarjeta-img-seccion-titulo span { font-size: .72rem; color: var(--text-muted); }
.tarjeta-img-upload { padding: .8rem; margin-bottom: 1rem; }
.tarjeta-img-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 14px 12px;
}
.tarjeta-img-grid:empty::before {
  content: 'Todavía no has subido ninguna imagen.';
  grid-column: 1 / -1; font-size: .78rem; color: var(--text-muted);
  padding: .5rem 0;
}
.tarjeta-img-card { display: flex; flex-direction: column; align-items: center; }
.tarjeta-img-thumb {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 12px;
  overflow: hidden; border: 1px solid var(--border);
  background:
    repeating-conic-gradient(rgba(255,255,255,.06) 0% 25%, transparent 0% 50%) 0 0/16px 16px,
    var(--bg-input);
  transition: border-color .15s, box-shadow .15s;
}
.tarjeta-img-thumb:hover { border-color: var(--verde-border); }
.tarjeta-img-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; display: block; }
.tarjeta-img-nombre {
  font-size: .68rem; color: var(--text-muted); margin-top: 6px; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta-img-acciones { display: flex; gap: 6px; margin-top: 6px; }
.tarjeta-img-btn {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14);
  background: var(--bg-panel); color: var(--text-primary); font-size: .82rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.35);
  transition: transform .12s, background .12s, border-color .12s, box-shadow .12s;
}
.tarjeta-img-btn:hover { transform: translateY(-1px); background: var(--verde-dim); border-color: var(--verde-border); }
.tarjeta-img-btn-danger:hover { background: var(--danger-bg); border-color: rgba(239,68,68,.4); }

/* ── Chips de "Elementos de la tarjeta" (lista completa: texto, QR,
   planeta, imágenes, panel...) — un solo lugar para ver y seleccionar
   cualquier capa del diseño, sin tener que encontrarla en el lienzo. ── */
.tarjeta-elemento-chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--bg-hover);
  border: 1px solid var(--border); border-radius: 24px; padding: 5px 10px 5px 5px;
  font-size: .74rem; cursor: pointer; transition: all .15s;
}
.tarjeta-elemento-chip:hover { border-color: var(--verde-border); background: var(--verde-dim); }
.tarjeta-elemento-chip.activo {
  border-color: var(--verde); background: var(--verde-dim); box-shadow: 0 0 10px rgba(34,197,94,.18);
}
.tarjeta-elemento-chip.oculto { opacity: .5; }
.tarjeta-elemento-chip.oculto:hover { opacity: .85; }
.tarjeta-elemento-icono {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: 1px solid var(--border); font-size: .95rem;
  font-weight: 700;
}
.tarjeta-elemento-icono img { width: 100%; height: 100%; object-fit: contain; }
.tarjeta-elemento-icono span {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border-radius: inherit; font-size: .9rem;
}
.tarjeta-elemento-chip button {
  border: none; background: var(--verde-dim); color: var(--verde); border-radius: 16px;
  padding: 3px 9px; font-size: .68rem; font-weight: 600; cursor: pointer; transition: background .12s;
}
.tarjeta-elemento-chip button:hover { background: rgba(34,197,94,.28); }
.tarjeta-elemento-chip.oculto button { background: rgba(255,255,255,.08); color: var(--text-secondary); }

/* Card editor de slide — antes se perdía contra el fondo de la página (muy
   poco contraste entre --bg-card/--bg-input/--border); ahora usa un fondo
   más claro y una sombra propia para que cada slide se lea como una
   tarjeta real, no como texto suelto en la página. */
.slide-editor-card {
  display: flex;
  gap: 14px;
  background: var(--bg-panel);
  border: 1.5px solid rgba(34,197,94,.22);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
  margin-bottom: 1rem;
  align-items: flex-start;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: border-color .15s, box-shadow .15s;
}
.slide-editor-card:hover { border-color: var(--verde-border); box-shadow: 0 4px 22px rgba(0,0,0,.3), 0 0 0 1px rgba(34,197,94,.08); }
.slide-editor-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--verde-dim);
  color: var(--verde);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  flex-shrink: 0;
}
.slide-editor-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.slide-img-prev {
  width: 80px; height: 56px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; overflow: hidden; flex-shrink: 0;
}
.slide-mini-input {
  width: 100%;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem .7rem;
  color: var(--text-primary);
  font-size: .8rem;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}
.slide-mini-input:focus { border-color: var(--verde); }

/* ════════════════════════════════════════════════════
   EDITOR DE SLIDES — avanzado
   ════════════════════════════════════════════════════ */
.slide-mini-preview-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-secondary);
  margin-bottom: .4rem;
  display: flex;
  align-items: center;
  gap: 5px;
}
.slide-mini-preview {
  width: 100%;
  min-height: 90px;
  border-radius: var(--radius-lg);
  padding: .85rem 1rem;
  margin-bottom: .75rem;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 2px 12px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: all .2s;
}
.slide-mini-badge {
  display: inline-block;
  background: rgba(34,197,94,.15);
  border: 1px solid var(--verde);
  color: var(--verde);
  font-size: .65rem;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: .35rem;
  font-weight: 700;
}
.slide-mini-titulo {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: .25rem;
}
.slide-mini-sub {
  font-size: .72rem;
  line-height: 1.4;
  opacity: .8;
}

/* Secciones del editor — antes casi no se distinguían del fondo de la
   tarjeta del slide (mismo tono oscuro); ahora usan un fondo más oscuro
   que SÍ contrasta contra el nuevo fondo claro de .slide-editor-card,
   como paneles hundidos, y el título tiene una línea debajo para separar
   claramente el encabezado de los campos. */
.slide-seccion {
  background: var(--bg-base);
  border: 1px solid rgba(34,197,94,.14);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  margin-bottom: .65rem;
}
.slide-seccion-titulo {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--verde);
  margin-bottom: .65rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(34,197,94,.12);
}
.slide-field-label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 3px;
  margin-top: 4px;
}

/* Botones de alineación */
.slide-align-btn {
  flex: 1;
  padding: .3rem;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: .8rem;
  transition: all .15s;
  color: var(--text-muted);
}
.slide-align-btn:hover { border-color: var(--verde-border); color: var(--verde); }
.slide-align-btn.activo {
  background: var(--verde-dim);
  border-color: var(--verde);
  color: var(--verde);
}

/* Link fuentes externas */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Montserrat:wght@700&family=Oswald:wght@700&family=Raleway:wght@700&family=Roboto+Slab:wght@700&display=swap');

/* ════════════════════════════════════════════════════
   MÓDULO CONTENIDO — estilo WordPress
   ════════════════════════════════════════════════════ */
.wp-content-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 500px;
}

/* Sidebar izquierdo */
.wp-content-sidebar {
  background: var(--bg-panel);
  border-right: 1.5px solid var(--border);
  display: flex;
  flex-direction: column;
}
.wp-content-section { border-bottom: 1px solid var(--border); }
.wp-content-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem .85rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-primary);
  gap: 8px;
}
.wp-content-nav-item {
  cursor: pointer;
  transition: background .15s, color .15s;
}
.wp-content-nav-item:hover { background: var(--verde-dim); color: var(--verde); }
.wp-content-nav-item.activo { background: var(--verde-dim); color: var(--verde); border-left: 3px solid var(--verde); }

.wp-content-add {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--verde-dim);
  border: 1.5px solid var(--verde-border);
  color: var(--verde);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
}
.wp-content-add:hover { background: var(--verde); color: #000; }
.wp-content-add:disabled { opacity: .35; cursor: not-allowed; }

/* Items de slides en lista */
.wp-slide-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: .55rem .85rem;
  cursor: pointer;
  transition: background .12s;
  border-left: 3px solid transparent;
}
.wp-slide-item:hover { background: var(--bg-card); }
.wp-slide-item.activo {
  background: var(--verde-dim);
  border-left-color: var(--verde);
}
.wp-slide-item-thumb {
  width: 40px; height: 28px;
  border-radius: 4px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.wp-slide-item-info { flex: 1; min-width: 0; }
.wp-slide-item-titulo {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-slide-item-meta { font-size: .65rem; color: var(--text-muted); }
.wp-slide-item-del {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: .65rem;
  opacity: 0;
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.wp-slide-item:hover .wp-slide-item-del { opacity: 1; }
.wp-slide-item-del:hover { color: var(--danger); }
.wp-slide-item-del:disabled { cursor: not-allowed; }

/* Editor derecho */
.wp-content-editor {
  background: var(--bg-card);
  padding: 1.25rem;
  overflow-y: auto;
}
.wp-content-editor-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: .5;
}
.wp-editor-titulo {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  border-bottom: 1.5px solid var(--border);
  color: var(--text-primary);
}
.wp-field-label {
  display: block;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

/* ════════════════════════════════════════════════════
   BARRA DE FORMATO ESTILO WORDPRESS
   ════════════════════════════════════════════════════ */
.wp-format-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.wp-format-select {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: .75rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  outline: none;
  height: 26px;
}
.wp-format-select:hover { background: var(--verde-dim); }
.wp-format-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: .8rem;
  transition: all .12s;
  position: relative;
  padding: 0;
}
.wp-format-btn:hover { background: var(--verde-dim); color: var(--verde); }
.wp-format-btn.activo { background: var(--verde-dim); color: var(--verde); box-shadow: 0 0 0 1px var(--verde-border); }
.wp-format-sep {
  width: 1px; height: 18px;
  background: var(--border);
  margin: 0 3px;
  flex-shrink: 0;
}

/* Botones fit de imagen */
.slide-fit-btn {
  padding: .28rem .75rem;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  transition: all .15s;
}
.slide-fit-btn:hover { border-color: var(--verde-border); color: var(--verde); }
.slide-fit-btn.activo { border-color: var(--verde); background: var(--verde-dim); color: var(--verde); }

/* Nota de tamaño recomendado */
.slide-img-recomendacion {
  font-size: .68rem;
  color: var(--text-muted);
  background: var(--bg-input);
  border-left: 2px solid var(--verde-border);
  padding: .35rem .6rem;
  border-radius: 0 4px 4px 0;
  margin-top: .4rem;
}

/* ════════════════════════════════════════════════════
   MÓDULO INVENTARIO
   ════════════════════════════════════════════════════ */
.inv-panel { display: none; }
.inv-panel.activo { display: block; }

/* KPIs */
.inv-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 1.25rem;
}
.inv-kpi {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-align: center;
  transition: all .2s;
}
.inv-kpi:hover { border-color: var(--verde-border); transform: translateY(-2px); }
.inv-kpi-val { font-size: 1.8rem; font-weight: 900; line-height: 1; }
.inv-kpi-lab { font-size: .72rem; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

/* Filas con color por estado */
.inv-row-agotado td:first-child { border-left: 3px solid #f87171; }
.inv-row-bajo td:first-child { border-left: 3px solid #fbbf24; }
.inv-row-ok td:first-child { border-left: 3px solid var(--verde); }

/* Botones +/- de edición rápida */
.inv-qty-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.inv-qty-btn:hover { border-color: var(--verde); color: var(--verde); background: var(--verde-dim); }

/* Alertas */
.inv-alerta-grupo {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.inv-alerta-titulo {
  padding: .65rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.inv-alerta-rojo  { background: rgba(239,68,68,.08); color: #f87171; border-bottom: 1px solid rgba(239,68,68,.2); }
.inv-alerta-gold  { background: rgba(251,191,36,.08); color: #fbbf24; border-bottom: 1px solid rgba(251,191,36,.2); }
.inv-alerta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: .84rem;
  gap: 10px;
}
.inv-alerta-item:last-child { border-bottom: none; }

/* ════════════════════════════════════════════════════
   MODAL MOVIMIENTO — simplificado
   ════════════════════════════════════════════════════ */
.mov-tipo-btns {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.mov-tipo-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all .18s var(--ease);
  text-align: left;
  width: 100%;
}
.mov-tipo-btn .mov-ico { font-size: 1.4rem; flex-shrink: 0; }
.mov-tipo-btn .mov-txt { display: flex; flex-direction: column; gap: 1px; }
.mov-tipo-btn strong { font-size: .85rem; color: var(--text-primary); font-weight: 700; }
.mov-tipo-btn span:last-child { font-size: .7rem; color: var(--text-muted); font-weight: 400; }
.mov-tipo-btn:hover {
  border-color: rgba(34,197,94,.4);
  background: var(--verde-dim);
  transform: translateX(3px);
}
.mov-tipo-btn[data-tipo="entrada"].activo {
  border-color: var(--verde);
  background: rgba(34,197,94,.1);
  box-shadow: 0 0 0 1px var(--verde), 0 0 12px rgba(34,197,94,.15);
}
.mov-tipo-btn[data-tipo="entrada"].activo strong { color: var(--verde); }
.mov-tipo-btn[data-tipo="salida"].activo {
  border-color: #f87171;
  background: rgba(239,68,68,.08);
  box-shadow: 0 0 0 1px #f87171, 0 0 12px rgba(239,68,68,.12);
}
.mov-tipo-btn[data-tipo="salida"].activo strong { color: #f87171; }
.mov-tipo-btn[data-tipo="ajuste"].activo {
  border-color: #fbbf24;
  background: rgba(251,191,36,.08);
  box-shadow: 0 0 0 1px #fbbf24, 0 0 12px rgba(251,191,36,.12);
}
.mov-tipo-btn[data-tipo="ajuste"].activo strong { color: #fbbf24; }

/* Info stock actual / resultado */
.inv-stock-info {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: .55rem .9rem;
  font-size: .82rem;
}
.inv-stock-info span { color: var(--text-muted); }

/* Inventario responsive */
@media (max-width: 900px) {
  .inv-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .inv-kpis { grid-template-columns: repeat(2, 1fr); }
  .mov-tipo-btns { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════
   TOKENS VIP — rediseño tarjetas
   ════════════════════════════════════════════════════ */
.token-card-v2 {
  display: flex;
  align-items: stretch;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: .75rem;
  overflow: hidden;
  transition: all .2s var(--ease);
}
.token-card-v2:hover { border-color: rgba(251,191,36,.3); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.token-card-v2.token-vencido { opacity: .55; filter: grayscale(.4); }

.token-franja { width: 4px; flex-shrink: 0; }
.token-franja-gold  { background: linear-gradient(180deg,#fbbf24,#ca8a04); }
.token-franja-verde { background: linear-gradient(180deg,var(--verde),#16a34a); }

.token-info {
  flex: 1;
  padding: .85rem 1rem;
  min-width: 0;
}
.token-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.token-code-v2 {
  font-family: monospace;
  font-size: 1rem;
  font-weight: 800;
  color: #fde047;
  letter-spacing: .12em;
}
.token-chip {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
}
.token-chip-ok  { background: rgba(34,197,94,.12); color: var(--verde); }
.token-chip-exp { background: rgba(239,68,68,.12); color: #f87171; }

.token-beneficiario {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  color: var(--text-secondary);
  margin-bottom: .25rem;
}
.token-fechas {
  display: flex;
  gap: 6px;
  font-size: .7rem;
  color: var(--text-muted);
  margin-bottom: .5rem;
}

.token-barra-wrap {
  height: 3px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.token-barra-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s;
}

.token-acciones {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: .75rem;
  justify-content: center;
  flex-shrink: 0;
}
.token-btn-copy, .token-btn-email, .token-btn-wa, .token-btn-rev {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .32rem .7rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  transition: all .15s;
  white-space: nowrap;
}
.token-btn-copy { border-color: var(--border); background: var(--bg-input); color: var(--text-secondary); }
.token-btn-copy:hover { border-color: var(--verde); color: var(--verde); }
.token-btn-email { border-color: rgba(96,165,250,.4); background: rgba(96,165,250,.08); color: #60a5fa; }
.token-btn-email:hover { background: rgba(96,165,250,.15); }
.token-btn-wa { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); color: var(--verde); }
.token-btn-wa:hover { background: var(--verde-dim); }
.token-btn-rev { border-color: rgba(239,68,68,.3); background: none; color: #f87171; }
.token-btn-rev:hover { background: rgba(239,68,68,.08); }

/* ════ LOGIN VIP — mejorado ════ */
.vip-instrucciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1rem;
  padding: .75rem;
  background: rgba(251,191,36,.05);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: var(--radius-lg);
}
.vip-paso {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  color: var(--text-secondary);
}
.vip-paso-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(251,191,36,.15);
  border: 1.5px solid rgba(251,191,36,.4);
  color: #fbbf24;
  font-size: .72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.vip-token-field {
  border-color: rgba(251,191,36,.4) !important;
  background: rgba(251,191,36,.04) !important;
}
.vip-token-field:focus-within {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 0 2px rgba(251,191,36,.2) !important;
}
.btn-ingresar-vip {
  background: linear-gradient(135deg, #92400e, #d97706) !important;
  color: #fff !important;
}
.btn-ingresar-vip:hover {
  background: linear-gradient(135deg, #b45309, #f59e0b) !important;
  box-shadow: 0 0 20px rgba(251,191,36,.3) !important;
}

/* ════════════════════════════════════════════════════
   SLIDES — drag & drop
   ════════════════════════════════════════════════════ */
.slide-drag-handle {
  cursor: grab !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.slide-drag-handle:active { cursor: grabbing !important; }

.slide-editor-card.slide-dragging {
  opacity: .4;
  border-style: dashed;
  border-color: var(--verde-border);
}
.slide-editor-card.slide-drag-over {
  border-color: var(--verde) !important;
  background: rgba(34,197,94,.06);
  box-shadow: 0 0 0 2px var(--verde), 0 0 16px rgba(34,197,94,.2);
  transform: scale(1.01);
}

/* Token tipo edit button */
.token-btn-edit {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .32rem .7rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid rgba(251,191,36,.4);
  background: rgba(251,191,36,.08);
  color: #fbbf24;
  transition: all .15s;
  white-space: nowrap;
}
.token-btn-edit:hover { background: rgba(251,191,36,.16); }
.badge-azul { background: rgba(96,165,250,.15); color: #60a5fa; border: 1px solid rgba(96,165,250,.3); }

/* ════ Modal tipo token — opciones radio visuales ════ */
.tipo-token-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tipo-token-opcion {
  cursor: pointer;
}
.tipo-token-opcion input[type="radio"] {
  display: none;
}
.tipo-token-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: .75rem 1rem;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all .18s;
}
.tipo-token-card > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tipo-token-card strong {
  font-size: .88rem;
  color: var(--text-primary);
}
.tipo-token-card span {
  font-size: .72rem;
  color: var(--text-muted);
}
.tipo-token-opcion:hover .tipo-token-card {
  border-color: rgba(34,197,94,.4);
  background: var(--verde-dim);
}
.tipo-token-opcion.activo .tipo-token-card {
  border-color: var(--verde);
  background: rgba(34,197,94,.08);
  box-shadow: 0 0 0 1px var(--verde);
}
.tipo-token-opcion.activo .tipo-token-card strong {
  color: var(--verde);
}

/* ════ Panel Login — preview mini ════ */
.login-preview-mini {
  border-radius: var(--radius-lg);
  padding: 1rem .75rem;
  background: #060a06;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-height: 220px;
  transition: background .2s;
}
.login-prev-emoji { font-size: 1.8rem; margin-bottom: 2px; }
.login-prev-nombre {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}
.login-prev-slogan { font-size: .65rem; color: rgba(255,255,255,.5); }
.login-prev-tag {
  font-size: .55rem;
  color: rgba(255,255,255,.4);
  letter-spacing: .15em;
  margin: 4px 0;
}
.login-prev-tag span { color: #22c55e; }
.login-prev-card {
  width: 100%;
  background: rgba(255,255,255,.05);
  border-radius: 8px;
  padding: .6rem .5rem;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.login-prev-campo {
  height: 18px;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
}
.login-prev-btn {
  height: 22px;
  background: #22c55e;
  border-radius: 4px;
  font-size: .6rem;
  font-weight: 800;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: background .2s, color .2s;
}

/* ════════════════════════════════════════════════════
   SELECTOR WHATSAPP — estilo sistema
   ════════════════════════════════════════════════════ */
.wa-numero-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-input);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.wa-numero-wrap:focus-within {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(34,197,94,.12);
}

/* Botón selector de país */
.wa-pais-selector { position: relative; flex-shrink: 0; }
.wa-pais-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: .65rem 1rem;
  background: rgba(255,255,255,.04);
  border: none;
  border-right: 1.5px solid var(--border);
  cursor: pointer;
  color: var(--text-primary);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  height: 100%;
  transition: background .15s;
}
.wa-pais-btn:hover { background: rgba(34,197,94,.07); }
.wa-pais-btn svg { color: var(--text-muted); flex-shrink:0; }

/* Campo número */
.wa-numero-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: .65rem 1rem;
  color: var(--text-primary);
  font-size: .95rem;
  font-weight: 600;
  outline: none;
  letter-spacing: .06em;
  min-width: 0;
  font-family: monospace;
}
.wa-numero-input::placeholder {
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0;
  font-family: inherit;
}

/* Dropdown */
.wa-paises-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 290px;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(34,197,94,.08);
  z-index: 200;
  max-height: 260px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.wa-pais-search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
#waPaisesLista { overflow-y: auto; flex: 1; }
.wa-pais-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: .5rem .9rem;
  cursor: pointer;
  font-size: .82rem;
  transition: background .12s;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.wa-pais-item:hover { background: var(--verde-dim); color: var(--verde); }
.wa-pais-item span:last-child { color: var(--text-muted); font-size: .72rem; }

/* Preview número */
.wa-numero-preview {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: .55rem;
  font-size: .78rem;
  color: var(--text-muted);
  padding: .4rem .75rem;
  background: rgba(37,211,102,.06);
  border: 1px solid rgba(37,211,102,.18);
  border-radius: var(--radius);
}
.wa-numero-preview strong {
  color: #25d366;
  font-size: .9rem;
  font-family: monospace;
  letter-spacing: .06em;
}

/* Modo claro */
body.tema-claro .wa-pais-btn { background: rgba(0,0,0,.04); }
body.tema-claro .wa-paises-dropdown { box-shadow: 0 8px 30px rgba(0,0,0,.15); }

/* ════════════════════════════════════════════════════
   NOTIFICACIONES
   ════════════════════════════════════════════════════ */
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
  position: relative;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--verde-dim); }
.notif-item.notif-leida { opacity: .55; }
.notif-ico { font-size: 1.3rem; flex-shrink: 0; margin-top: 2px; }
.notif-body { flex: 1; min-width: 0; }
.notif-titulo { font-size: .85rem; font-weight: 700; margin-bottom: 2px; }
.notif-desc { font-size: .75rem; color: var(--text-muted); margin-bottom: 3px; }
.notif-fecha { font-size: .68rem; color: var(--text-muted); }
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--verde);
  flex-shrink: 0;
  margin-top: 6px;
  box-shadow: 0 0 6px rgba(34,197,94,.5);
}

/* ── Logo imagen en login ── */
#loginLogoImg {
  width: 520px;
  max-width: 98vw;
  height: auto;
  object-fit: contain;
  filter: none;
  margin-bottom: .25rem;
}
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: .5rem;
}
.logo-icon {
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Tooltips visibles en modo mini */
body.sidebar-mini .sidebar-nav,
body.sidebar-mini .nav-grupo,
body.sidebar-mini .nav-item {
  overflow: visible !important;
  position: relative;
}
body.sidebar-mini .sidebar {
  overflow: visible !important;
}

/* Evitar que el drag del slide interfiera con selección de texto en inputs */
.slide-editor-card input,
.slide-editor-card textarea,
.slide-editor-card select,
.slide-editor-card label,
.slide-editor-card p,
.slide-editor-card span {
  -webkit-user-drag: none;
  user-drag: none;
}
.slide-drag-handle {
  cursor: grab;
}
.slide-drag-handle:active {
  cursor: grabbing;
}

/* ════════════════════════════════════════════════════
   REPRODUCTOR DE MÚSICA — Efectos Neon
   ════════════════════════════════════════════════════ */

/* Pulso neon en la portada cuando suena */
@keyframes musicPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(34,197,94,.3), 0 0 0 0 rgba(34,197,94,.15); }
  50%       { box-shadow: 0 0 16px rgba(34,197,94,.6), 0 0 0 4px rgba(34,197,94,.08); }
}
#musicPortada {
  animation: musicPulse 2s ease-in-out infinite;
}

/* Borde superior neon animado */
@keyframes musicBorderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
#musicPlayer::before {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(34,197,94,.8) 25%,
    rgba(134,239,172,1) 50%,
    rgba(34,197,94,.8) 75%,
    transparent 100%);
  background-size: 200% 100%;
  animation: musicBorderFlow 3s linear infinite;
}

/* Nombre de la canción con efecto glow sutil */
#musicNombre {
  text-shadow: 0 0 12px rgba(34,197,94,.25);
  animation: musicNombreGlow 3s ease-in-out infinite;
}
@keyframes musicNombreGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(34,197,94,.2); }
  50%       { text-shadow: 0 0 16px rgba(34,197,94,.5); }
}

/* Barra de progreso con brillo animado */
#musicProgressBar {
  position: relative;
  overflow: hidden;
}
#musicProgressBar::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  animation: musicShimmer 2s linear infinite;
}
@keyframes musicShimmer {
  from { left: -40px; }
  to   { left: 100%; }
}

/* Lista admin de canciones */
#musicListaAdmin .img-franja {
  border: 1px solid rgba(34,197,94,.2);
  transition: border-color .2s, box-shadow .2s;
}
#musicListaAdmin > div:hover {
  border-color: rgba(34,197,94,.4) !important;
  box-shadow: 0 0 12px rgba(34,197,94,.1);
}