/* Estilos de KALOSTORE. Colores del sistema de diseño en :root (ver CLAUDE.md). */

/* --- colores --- */
:root{
  --bg:#0A1024;     /* fondo */
  --bg2:#0E1630;    /* fondo de inputs y ventanas */
  --card:#121A36;   /* superficie */
  --tx:#EEF2FF;     /* texto */
  --mu:#A3AECB;     /* texto suave */
  --ac:#5B8CFF;     /* azul de acción */
  --ac2:#FF7A70;    /* error */
  --ok:#3DD68C;     /* éxito */
  --warn:#FFC861;   /* alerta */
  --ln:#24305A;     /* línea */
  --turbo:#19D3F5;  /* solo relleno */
  --volt:#C6FF3D;   /* solo ofertas */
}

/* --- base --- */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:500 15px/1.5 'Manrope',system-ui,sans-serif}
h1,h2,h3,.logo{font-family:'Unbounded',system-ui,sans-serif;margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1100px;margin:auto;padding:0 16px}
header{position:sticky;top:0;z-index:5;background:#0A1024ee;border-bottom:1px solid var(--ln)}
.bar{display:flex;align-items:center;gap:10px;padding:10px 0;flex-wrap:wrap}
.logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.02em;margin-right:auto}
.logo b{color:var(--ac)}
.logo img{display:block;height:28px;width:auto}  /* logo oficial: mínimo 120 px de ancho */
@media(max-width:480px){.logo img{height:36px}}  /* en teléfonos solo el isotipo (ver <picture> en index.html) */

/* --- botones --- */
.btn{background:var(--ac);color:#0A1024;border:0;border-radius:12px;padding:9px 14px;font-weight:700;cursor:pointer}
.btn.g{background:transparent;color:var(--tx);border:1px solid var(--ln)}
.btn.r{background:var(--ac2);color:#0A1024}
.btn.s{padding:5px 9px;font-size:13px}
:focus-visible{outline:2px solid var(--ok);outline-offset:2px}

/* --- tienda, ventanas, tablas y estados --- */
.hero{padding:30px 0 14px}.hero h1{font-size:clamp(30px,6vw,52px);line-height:1.05;max-width:14em}.hero p,.mu{color:var(--mu)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.chip{border:1px solid var(--ln);background:var(--bg2);border-radius:99px;padding:7px 14px;cursor:pointer}.chip.on{background:var(--ac);color:#0A1024;border-color:var(--ac);font-weight:700}
input,select,textarea{background:var(--bg2);border:1px solid var(--ln);border-radius:10px;padding:9px 11px;width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;padding:14px 0 40px}
.p{background:var(--card);border-radius:16px;overflow:hidden;cursor:pointer;border:1px solid var(--ln)}.p:hover{border-color:var(--ac)}
.art{height:100px;display:grid;place-items:center;font:800 38px 'Unbounded';color:#fff9}.pb{padding:12px}.tag{font-size:12px;color:var(--ok)}.from{color:var(--mu);font-size:13px;margin-top:6px}.from b{color:var(--ac);font-size:16px}
.modal{position:fixed;inset:0;background:#000a;display:none;align-items:flex-start;justify-content:center;overflow:auto;z-index:20;padding:20px 12px}.modal.on{display:flex}
.box{background:var(--bg2);border:1px solid var(--ln);border-radius:18px;padding:18px;width:100%;max-width:560px}.row{display:flex;gap:8px;align-items:center}.row>*{flex:1}
label{display:block;font-size:13px;color:var(--mu);margin:10px 0 4px}.pk{display:flex;justify-content:space-between;border:1px solid var(--ln);border-radius:10px;padding:10px;margin:6px 0;cursor:pointer}.pk.on{border-color:var(--ac);background:#5B8CFF1f}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--ln);vertical-align:top}.scroll{overflow-x:auto}
.st{border-radius:99px;padding:2px 9px;font-size:12px;font-weight:700;color:#0A1024}.s-review{background:var(--ac)}.s-processing{background:#7cc6ff}.s-delivered{background:var(--ok)}.s-failed{background:var(--ac2);color:#0A1024}.s-waiting{background:#c9a7ff}

/* --- panel admin --- */
#adminBox>h2{font-size:20px}
/* pestañas en una línea que se desliza */
.atabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--ln);margin:10px 0 12px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.atabs::-webkit-scrollbar{display:none}
.atabs button{flex:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--mu);padding:10px 12px;font-weight:700;cursor:pointer;white-space:nowrap}
.atabs button:hover{color:var(--tx)}
.atabs button.on{color:var(--tx);border-bottom-color:var(--ac)}
/* secciones plegables */
.adet{margin:6px 0}.adet>summary{cursor:pointer;color:var(--ac);font-size:13px;font-weight:700;padding:4px 0;list-style:none}
.adet>summary::-webkit-details-marker{display:none}.adet>summary::before{content:'+ '}.adet[open]>summary::before{content:'− '}
/* contadores por estado (filtran al tocarlos) */
.ostrip{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 12px;font-size:13px}
.ostrip button{display:inline-flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--ln);border-radius:99px;padding:5px 10px;color:var(--tx);cursor:pointer}
.ostrip button b{font-weight:800}.ostrip button.on{border-color:var(--ac);background:#5B8CFF1f}
.ostrip>span{margin-left:auto}
.dot{width:8px;height:8px;border-radius:99px;display:inline-block}
/* pedidos como tarjetas, borde izquierdo con el color del estado */
.olist{display:flex;flex-direction:column;gap:10px}
.ocard{background:var(--card);border:1px solid var(--ln);border-left:4px solid var(--ln);border-radius:12px;padding:12px 14px}
.oc-review{border-left-color:var(--ac)}.oc-processing{border-left-color:#7cc6ff}.oc-delivered{border-left-color:var(--ok)}.oc-failed{border-left-color:var(--ac2)}.oc-waiting{border-left-color:#c9a7ff}
.oh{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.og{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px 16px;margin:10px 0;font-size:14px;overflow-wrap:anywhere}
.ol{font-size:12px;color:var(--mu);margin-bottom:2px}
.oact{display:flex;gap:8px;flex-wrap:wrap}.oact>*{flex:1 1 170px}
/* pestaña Productos: un producto por tarjeta y un bloque por paquete, campos con etiqueta y a lo ancho */
.plist{display:flex;flex-direction:column;gap:14px}
.pcard{background:var(--card);border:1px solid var(--ln);border-radius:16px;padding:12px}
.phead{display:flex;gap:10px;align-items:center}
.pthumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:none}
.pname{font-weight:800;font-size:16px}
.tgl{display:inline-flex;align-items:center;gap:6px;margin:0;color:var(--tx);font-size:14px;flex:none;cursor:pointer;white-space:nowrap}
.tgl input{width:20px;height:20px;margin:0;accent-color:var(--ac)}
.klist{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.kcard{background:var(--bg2);border:1px solid var(--ln);border-radius:12px;padding:10px}
.kcard.koff{opacity:.6}
.khead{display:flex;gap:8px;align-items:center}.kname{font-weight:700}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:8px}
.kgrid label{margin:0;font-size:12px;display:flex;flex-direction:column;gap:4px}
.kgrid input,.kgrid select{min-height:44px;font-size:16px}
.kgrid input:disabled{opacity:.55;cursor:not-allowed}
.kres{display:flex;flex-direction:column;justify-content:flex-end;font-size:12px;line-height:1.3}.kres b{font-size:16px;color:var(--tx)}
.kbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pcard .adet{margin:8px 0 0}
.pcard .phead{cursor:pointer}.pkgs{margin-top:10px}.pkgs>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border:1px solid var(--ln);border-radius:12px;font-size:14px;font-weight:700;color:var(--ac)}
.pkgs>summary::-webkit-details-marker{display:none}.pkgs>summary::after{content:'';margin-left:auto;width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s}.pkgs[open]>summary::after{transform:rotate(-135deg)}
.pkgs>summary .mu{font-weight:500;font-size:13px}
.kpause{margin:6px 0 2px;padding:8px 10px;border-radius:8px;border:1px solid var(--warn);color:var(--warn);font-size:12px}.kpause-tag{font-size:11px;font-weight:700;color:#0A1024;background:var(--warn);border-radius:999px;padding:2px 8px}.pkgs[open]>summary{margin-bottom:4px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:12px 0}.stat{background:var(--card);border-radius:12px;padding:12px}.stat b{font:800 22px 'Unbounded';display:block;color:var(--ac)}
.wa{position:fixed;right:14px;bottom:14px;background:#25d366;color:#08331a;border-radius:99px;padding:12px 16px;font-weight:700;text-decoration:none;z-index:9}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;background:var(--ok);color:#06271e;padding:9px 16px;border-radius:10px;font-weight:700;display:none;z-index:30}.tabs{display:flex;gap:6px;margin:10px 0;flex-wrap:wrap}
.info{background:var(--card);border:1px dashed var(--ln);border-radius:10px;padding:10px;font-size:13px;margin:10px 0}
#banner{display:none;background:var(--ac);color:#0A1024;text-align:center;padding:8px 14px;font-weight:700;font-size:14px}
.wa2{bottom:calc(68px + env(safe-area-inset-bottom,0px));background:#128c7e;color:#fff}
.art{overflow:hidden}.art img{width:100%;height:100%;object-fit:cover;display:block}
.art.has-img{position:relative;height:auto;aspect-ratio:1/1;background:var(--bg2)!important}.art.has-img img{position:absolute;inset:0}  /* imágenes de producto cuadradas (800×800); cambia cover por contain si alguna no es cuadrada */
.art:not(.has-img){height:auto;aspect-ratio:1/1}  /* sin imagen: mismo tamaño que las que tienen */
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.grid .pb{padding:10px}.grid .pb h3{font-size:14px;overflow-wrap:anywhere}.grid .art .bdg{top:6px;left:6px;font-size:10px}}  /* móvil: 2 tarjetas por fila */
.pimg{width:100%;max-height:260px;object-fit:contain;background:var(--bg);border-radius:12px;margin-bottom:10px}
.soc{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.soc a{border:1px solid var(--ln);background:var(--bg2);color:var(--tx);border-radius:99px;padding:6px 12px;text-decoration:none;font-size:13px}.soc a:hover{border-color:var(--ac)}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:14px 0}.how div{background:var(--card);border:1px solid var(--ln);border-radius:12px;padding:12px;font-size:14px}.how b{color:var(--ac)}
.pk.out{opacity:.45;cursor:not-allowed}.badge{font-size:12px;font-weight:700;border-radius:99px;padding:2px 8px}
/* etiquetas de marca: máximo una de acento (turbo o volt) por tarjeta; siempre con texto noche */
.bdg{display:inline-block;font-size:12px;line-height:16px;font-weight:700;border-radius:8px;padding:4px 8px}
.bdg-turbo{background:var(--turbo);color:#0B1530}
.bdg-volt{background:var(--volt);color:#0B1530}
.bdg-error{background:#FF7A7026;color:var(--ac2)}
.art{position:relative}.art .bdg{position:absolute;top:8px;left:8px;z-index:1}
/* puesto en el Top */
.rk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:99px;font-size:13px;background:var(--bg2);border:1px solid var(--ln);color:var(--tx)}
.rk1{background:var(--ac);border-color:var(--ac);color:#0A1024}
.desc{color:var(--mu);font-size:13px;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* --- cabecera estilo app, barra inferior, botones flotantes, carrusel y subida de archivos --- */
header .hbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;max-width:1100px;margin:auto}
.hbar .logo{margin:0;font-size:22px;white-space:nowrap}
.hchip{background:var(--bg2);border:1px solid var(--ln);color:var(--tx);border-radius:10px;padding:8px 10px;font-weight:700;font-size:13px;cursor:pointer;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:84px}
.hact{display:flex;align-items:center;gap:6px}
/* X para cerrar ventanas (la agrega addX en js/02-base.js): queda fija arriba al desplazarse, sin empujar el contenido */
.mxw{position:sticky;top:8px;height:0;z-index:3}
.mx{position:absolute;right:-8px;top:-8px;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--card);border:1px solid var(--ln);color:var(--tx);cursor:pointer;font-size:20px;box-shadow:0 4px 12px #0006}
.mx:hover{border-color:var(--ac)}
.box>.mxw+h2,.box>.mxw+div>h2:first-child{padding-right:44px}

/* íconos de línea (ver ic() en js/02-base.js) */
.ic{width:1.15em;height:1.15em;vertical-align:-.22em;flex:none}
.hic,.hchip{display:inline-flex;align-items:center;gap:6px}
.hic{background:transparent;border:0;font-size:22px;padding:6px;cursor:pointer;position:relative;color:var(--tx)}
.hcart{border:2px solid var(--ac);border-radius:12px;padding:6px 10px;font-size:24px}
.cn{position:absolute;top:-8px;right:-8px;background:var(--ac2);color:#0A1024;border-radius:99px;min-width:20px;height:20px;font:700 12px/20px 'Manrope',sans-serif;text-align:center;padding:0 5px;display:none}
.hrs{background:var(--bg2);border-top:1px solid var(--ln);text-align:center;font-size:12px;color:var(--mu);padding:5px 8px}
#fabs{position:fixed;right:12px;bottom:calc(var(--bn,0px) + 12px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column-reverse;gap:10px;align-items:flex-end;z-index:9}
#fabs .fab{position:static;right:auto;bottom:auto;display:flex;align-items:center;gap:6px;border-radius:99px;padding:12px 15px;font-weight:700;border:0;cursor:pointer;text-decoration:none;box-shadow:0 6px 18px #0009;font-size:15px}
#fabs .fab-cart{background:var(--ac);color:#0A1024;padding:15px 20px;font-size:20px;position:relative}
#fabs .fab-cart .cn{top:-6px;right:-4px}
#fabs .wa{background:#25d366;color:#08331a}#fabs .wa2{background:#128c7e;color:#fff}
#fabs .fab-ann{background:var(--card);color:var(--tx);border:1px solid var(--ln);padding:10px 12px}
@keyframes pulse{0%{box-shadow:0 0 0 0 #5B8CFF99}100%{box-shadow:0 0 0 16px #5B8CFF00}}
.fab-cart.has{animation:pulse 1.6s infinite}
#bn{display:none}
@media(max-width:820px){:root{--bn:64px}body{padding-bottom:70px}#fabs .lbl{display:none}#fabs .fab{padding:13px}#fabs .fab-cart{padding:17px;font-size:24px}#toast{bottom:150px}
 #bn{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:8;background:#0A1024f5;border-top:1px solid var(--ln);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
 #bn button{flex:1;background:none;border:0;color:var(--mu);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;font-family:inherit}
 #bn button .ic{width:22px;height:22px}#bn button.on{color:var(--ac)}#nav{display:none}}
.bnr{position:relative;overflow:hidden;border-radius:16px;margin:12px 0;border:1px solid var(--ln)}
.bnr-track{display:flex;transition:transform .5s}.bnr-s{min-width:100%}.bnr-s img{width:100%;aspect-ratio:16/7;object-fit:cover;display:block}
.bnr-d{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px}.bnr-d i{width:8px;height:8px;border-radius:99px;background:#fff6;cursor:pointer}.bnr-d i.on{width:22px;background:var(--ac)}
.drop{display:flex;align-items:center;gap:12px;border:2px dashed var(--ln);border-radius:14px;padding:14px;cursor:pointer;background:var(--bg2);margin-top:6px}
.drop:hover{border-color:var(--ac)}.drop.has{border-style:solid;border-color:var(--ok)}
.dz-ico{font-size:28px}.dz-t{flex:1;display:flex;flex-direction:column;min-width:0}.dz-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dz-t span{font-size:12px}
.dz-prev{width:56px;height:56px;object-fit:cover;border-radius:10px}
.nd{position:relative}.nd::after{content:'';position:absolute;top:2px;right:12%;width:9px;height:9px;border-radius:50%;background:var(--ac2)}