/* LALÍ LIVE — hecho para el celular, en la paleta de la marca */
:root{
  --purpura:#641DFF; --purpura-suave:#A38BE8; --tinta:#0D0F1A;
  --crema:#F0E8D8; --lima:#E1E580; --oliva:#202605;
  --gris:#6B6E7A; --linea:#e5e1d8; --blanco:#fff;
  --ok:#0f8a4f; --alerta:#c2410c; --rojo:#b91c1c;
  --sombra:0 1px 2px rgba(13,15,26,.06), 0 8px 24px rgba(13,15,26,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  background:var(--crema); color:var(--tinta); font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;
}
a{color:var(--purpura); text-decoration:none}
.wrap{max-width:1080px; margin:0 auto; padding:0 14px 96px}

/* ---- barra superior ---- */
header.top{background:var(--tinta); color:var(--crema); padding:10px 0; position:sticky; top:0; z-index:40}
header.top .in{max-width:1080px; margin:0 auto; padding:0 14px; display:flex; align-items:center; gap:12px}
.marca{font-weight:800; letter-spacing:.14em; font-size:14px; text-transform:uppercase; color:var(--crema)}
.marca span{color:var(--lima)}
header.top .sp{flex:1}
header.top a.salir{color:var(--purpura-suave); font-size:13px}

/* ---- menú ---- */
nav.menu{display:flex; gap:6px; overflow-x:auto; padding:10px 0; -webkit-overflow-scrolling:touch}
nav.menu a{
  white-space:nowrap; background:var(--blanco); border:1px solid var(--linea);
  padding:9px 14px; border-radius:999px; font-size:14px; font-weight:600; color:var(--tinta);
}
nav.menu a.on{background:var(--purpura); border-color:var(--purpura); color:#fff}
nav.menu a .pin{background:var(--rojo); color:#fff; border-radius:999px; padding:1px 7px;
  font-size:11px; margin-left:6px}

/* ---- tarjetas ---- */
.card{background:var(--blanco); border:1px solid var(--linea); border-radius:16px;
  padding:16px; margin-bottom:14px; box-shadow:var(--sombra)}
.card h2{margin:0 0 12px; font-size:17px; letter-spacing:-.01em}
.card h2 small{font-weight:500; color:var(--gris); font-size:13px; letter-spacing:0}

/* ---- marcador del live ---- */
.marcador{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:14px}
.marcador div{background:var(--tinta); color:var(--crema); border-radius:14px; padding:12px 10px; text-align:center}
.marcador b{display:block; font-size:20px; letter-spacing:-.02em}
.marcador span{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--purpura-suave)}
.marcador div.destacado{background:var(--purpura)}
.marcador div.destacado span{color:#e7dcff}
@media(max-width:520px){ .marcador{grid-template-columns:repeat(2,1fr)} .marcador b{font-size:18px} }

/* ---- formularios ---- */
label{display:block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gris); margin:0 0 4px}
input,select,textarea{
  width:100%; font:inherit; padding:12px 12px; border:1.5px solid var(--linea);
  border-radius:12px; background:var(--blanco); color:var(--tinta);
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--purpura)}
textarea{min-height:80px; resize:vertical}
.fila{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.fila>div{flex:1; min-width:130px}
.fila>div.ancho{flex:2.2; min-width:200px}
.fila>div.chico{flex:.6; min-width:88px}

button,.btn{
  font:inherit; font-weight:700; border:none; border-radius:12px; padding:12px 18px;
  background:var(--purpura); color:#fff; cursor:pointer; display:inline-block; text-align:center;
}
button:active{transform:translateY(1px)}
.btn.fantasma{background:var(--blanco); color:var(--tinta); border:1.5px solid var(--linea)}
.btn.wa{background:#1fa855; color:#fff}
.btn.peligro{background:var(--blanco); color:var(--rojo); border:1.5px solid #f2c9c9}
.btn.chico,button.chico{padding:8px 12px; font-size:13px; border-radius:10px}
.btn.grande{width:100%; padding:16px; font-size:17px}

/* ---- lista de pedidos ---- */
.ped{display:block; background:var(--blanco); border:1px solid var(--linea); border-left:4px solid var(--linea);
  border-radius:14px; padding:12px 14px; margin-bottom:8px; color:var(--tinta)}
.ped.apartado{border-left-color:var(--alerta)}
.ped.abonado{border-left-color:#d3a600}
.ped.pagado{border-left-color:var(--ok)}
.ped.anulado{border-left-color:var(--gris); opacity:.55}
.ped .lin1{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.ped .cod{font-weight:800; font-size:13px; color:var(--purpura); letter-spacing:.02em}
.ped .nom{font-weight:700; flex:1}
.ped .val{font-weight:800; letter-spacing:-.01em}
.ped .lin2{color:var(--gris); font-size:13px; margin-top:3px}
.ped .lin3{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; align-items:center}

.chip{display:inline-block; font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; padding:3px 9px; border-radius:999px; background:#eee; color:#444}
.chip.apartado{background:#fdecd8; color:#8a4b00}
.chip.abonado{background:#fdf3c6; color:#7a5c00}
.chip.pagado{background:#dcf5e6; color:#0b6b3c}
.chip.anulado{background:#eceaea; color:#555}
.chip.vencido{background:#fde2e2; color:var(--rojo)}
.chip.lima{background:var(--lima); color:var(--oliva)}
.chip.gris{background:#f0eee9; color:var(--gris)}

/* ---- tablas ---- */
table{width:100%; border-collapse:collapse; font-size:14px}
th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--gris); padding:6px 8px; border-bottom:1.5px solid var(--linea)}
td{padding:9px 8px; border-bottom:1px solid var(--linea); vertical-align:middle}
td.num,th.num{text-align:right; white-space:nowrap}
.scroll{overflow-x:auto}

/* ---- avisos ---- */
.aviso{background:#dcf5e6; color:#0b6b3c; border-radius:12px; padding:11px 14px;
  margin-bottom:12px; font-weight:700}
.aviso.malo{background:#fde2e2; color:var(--rojo)}
.vacio{text-align:center; color:var(--gris); padding:28px 10px}
.vacio b{display:block; color:var(--tinta); margin-bottom:4px; font-size:16px}

/* ---- sugerencias del buscador ---- */
.sug{position:relative}
.sug ul{position:absolute; z-index:30; left:0; right:0; top:100%; margin:4px 0 0; padding:6px;
  list-style:none; background:#fff; border:1px solid var(--linea); border-radius:12px;
  box-shadow:var(--sombra); max-height:260px; overflow:auto}
.sug li{padding:10px; border-radius:9px; cursor:pointer}
.sug li:hover,.sug li.sel{background:var(--crema)}
.sug li b{display:block}
.sug li span{font-size:12px; color:var(--gris)}
.sug ul:empty{display:none}

.comp{width:74px; height:74px; object-fit:cover; border-radius:10px; border:1px solid var(--linea)}
hr.sep{border:none; border-top:1px solid var(--linea); margin:14px 0}
.mini{font-size:12px; color:var(--gris)}

/* ---- las prendas del pedido: tabla en computador, tarjetas en el celular ---- */
table.items td input, table.items td select{width:100%; min-width:0}
table.items .c-ref input{min-width:130px}
table.items .c-cant input{width:64px}
table.items .c-precio input{width:104px}
@media(max-width:640px){
  table.items, table.items tr, table.items td{display:block; width:100%}
  table.items tr:first-child{display:none}                 /* encabezados fuera */
  table.items tr{border:1px solid var(--linea); border-radius:14px; padding:10px;
    margin-bottom:10px; background:var(--crema)}
  table.items td{border:none; padding:4px 0; text-align:left}
  table.items td::before{content:attr(data-r); display:block; font-size:11px; font-weight:700;
    text-transform:uppercase; letter-spacing:.06em; color:var(--gris); margin-bottom:3px}
  table.items .c-talla, table.items .c-cant{display:inline-block; width:48%; vertical-align:top}
  table.items .c-cant{margin-left:3%}
  table.items .c-precio, table.items .c-sub{display:inline-block; width:48%; vertical-align:top}
  table.items .c-sub{margin-left:3%; text-align:right}
  table.items .c-sub b{font-size:17px}
  table.items .c-precio input, table.items .c-cant input{width:100%}
  table.items .c-acc{display:flex; gap:8px; margin-top:8px}
  table.items .c-acc::before{content:none}
  table.items .c-acc button{flex:1}
}

/* ---- "seguís con la misma clienta" ---- */
.siguiendo{display:flex; align-items:center; gap:10px; background:var(--lima); color:var(--oliva);
  border-radius:12px; padding:10px 14px; margin-bottom:12px}
.siguiendo div{flex:1; min-width:0}
.siguiendo b{display:block; font-size:15px}
.siguiendo span{font-size:12px; opacity:.85}
.atajos{display:flex; gap:6px; margin:-4px 0 12px 4px}
.atajos .btn{font-size:12px; padding:6px 10px}