/* ==========================================================================
   Panel de Mercastock
   --------------------------------------------------------------------------
   Escrito a mano y sin compilar: no hay node en el servidor y no queremos un
   paso de build para desplegar. Son dos layouts del mismo HTML — teléfono con
   barra abajo, ordenador con menú lateral — y el corte está en 900 px.
   ========================================================================== */

:root{
  --ink:#0f172a; --ink-2:#334155; --ink-3:#64748b; --ink-4:#94a3b8;
  --line:#e2e8f0; --line-2:#f1f5f9;
  --bg:#ffffff; --bg-2:#f8fafc; --page:#eef2f6;
  --indigo:#4338ca; --indigo-2:#6366f1; --indigo-bg:#eef2ff;
  --ok:#166534; --ok-bg:#dcfce7;
  --warn:#9a3412; --warn-bg:#ffedd5;
  --bad:#b91c1c; --bad-bg:#fee2e2;
  --wa:#128c4a;
  --on-indigo:#ffffff;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --barra:60px;          /* alto de la barra de abajo en el teléfono */
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#e8edf5; --ink-2:#cbd5e1; --ink-3:#94a3b8; --ink-4:#64748b;
    --line:#1e293b; --line-2:#16202f; --bg:#0f172a; --bg-2:#131f33; --page:#020617;
    --indigo:#a5b4fc; --indigo-2:#818cf8; --indigo-bg:#1e1b4b;
    --ok:#6ee7b7; --ok-bg:#064e3b; --warn:#fdba74; --warn-bg:#431407;
    --bad:#fca5a5; --bad-bg:#450a0a; --wa:#25d366;
    --on-indigo:#0f172a;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* que el teclado del teléfono no tape el último campo */
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--indigo-2);outline-offset:2px}

/* ---------- armazón ---------- */
.shell{min-height:100vh;display:flex;flex-direction:column}
.contenido{flex:1;background:var(--bg);padding-bottom:calc(var(--barra) + 18px)}

@media (min-width:900px){
  .shell{flex-direction:row}
  .contenido{padding-bottom:40px;min-width:0;flex:1}
}

/* ---------- menú lateral (sólo ordenador) ---------- */
.lateral{display:none}

@media (min-width:900px){
  .lateral{
    display:flex;flex-direction:column;gap:2px;flex:none;
    width:214px;padding:16px 12px;
    background:var(--bg-2);border-right:1px solid var(--line);
    position:sticky;top:0;height:100vh;overflow-y:auto;
  }
  .lateral .marca{
    display:flex;align-items:center;gap:8px;
    font-size:15px;font-weight:800;letter-spacing:-.015em;padding:4px 8px 2px;
  }
  .lateral .marca .vivo{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
  .lateral .dir{
    font:600 10.5px/1.4 var(--mono);color:var(--ink-4);
    padding:0 8px 14px;word-break:break-all;
  }
  .lateral a{
    display:flex;align-items:center;gap:10px;
    padding:9px 10px;border-radius:8px;
    font-size:14px;font-weight:550;color:var(--ink-2);
  }
  .lateral a .ic{font-size:15px;width:18px;text-align:center;flex:none}
  .lateral a:hover{background:var(--line-2)}
  .lateral a[aria-current="page"]{background:var(--indigo);color:var(--on-indigo);font-weight:650}
  .lateral a[aria-current="page"]:hover{background:var(--indigo)}
  .lateral .abajo{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
  .lateral .quien{display:flex;align-items:center;gap:9px;padding:6px 8px}
  .lateral .quien img,.lateral .quien .ini{
    width:30px;height:30px;border-radius:50%;flex:none;
    background:var(--indigo);color:var(--on-indigo);
    display:flex;align-items:center;justify-content:center;
    font:700 12px/1 var(--sans);object-fit:cover;
  }
  .lateral .quien b{font-size:13px;font-weight:650;line-height:1.25}
  .lateral .quien span{display:block;font-size:11px;color:var(--ink-4)}
}

/* ---------- barra de abajo (sólo teléfono) ---------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:var(--bg);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.barra a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 2px 11px;color:var(--ink-4);
  font:600 10.5px/1.2 var(--sans);text-align:center;
}
.barra a .ic{font-size:19px;line-height:1}
.barra a[aria-current="page"]{color:var(--indigo)}

@media (min-width:900px){.barra{display:none}}

/* ---------- cabecera de pantalla ---------- */
.cab{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border-bottom:1px solid var(--line);
}
.cab h1{font-size:18px;margin:0;letter-spacing:-.015em}
.cab .cuenta{font:600 11.5px/1 var(--mono);color:var(--ink-4)}
.cab .der{margin-left:auto;display:flex;gap:8px;align-items:center}
.cab .dir-tel{
  font:600 11.5px/1.4 var(--mono);color:var(--ink-3);
  display:flex;align-items:center;gap:7px;flex-basis:100%;
}
@media (min-width:900px){.cab{padding:16px 22px}.cab .dir-tel{display:none}}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--line);border-radius:9px;
  padding:10px 14px;background:var(--bg);
  font:650 14px/1 var(--sans);color:var(--ink-2);cursor:pointer;
  white-space:nowrap;
}
.btn:hover{background:var(--bg-2)}
.btn.pri{background:var(--indigo);border-color:var(--indigo);color:var(--on-indigo)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.wa{background:var(--wa);border-color:var(--wa);color:#fff}
.btn.peli{color:var(--bad);border-color:var(--bad)}
.btn.ancho{width:100%}
.btn.chico{padding:7px 11px;font-size:12.5px;border-radius:7px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- chips de filtro ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.chips .rot{font:700 10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--ink-4);flex-basis:100%;margin-bottom:2px}
.chip{
  border:1px solid var(--line);border-radius:999px;background:var(--bg);
  padding:8px 13px;font:600 13px/1 var(--sans);color:var(--ink-2);cursor:pointer;
}
.chip[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip.ojo{color:var(--warn);border-color:var(--warn)}
@media (min-width:900px){.chips{padding:11px 22px}.chip{padding:7px 11px;font-size:12.5px}}

/* ---------- lista de mercadería ---------- */
/* Un solo HTML, dos layouts, con grid de áreas nombradas. En el teléfono la
   prenda ocupa dos filas (datos arriba, tallas abajo); en el ordenador es una
   sola fila con columnas. Sin trucos de display:table, que se rompen. */

.prendas{display:flex;flex-direction:column}

.encabe{display:none}
@media (min-width:900px){
  .encabe{
    display:grid;align-items:center;
    grid-template-columns:var(--cols);gap:14px;
    padding:9px 22px;border-bottom:1px solid var(--line);
  }
  .encabe span{
    font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-4);white-space:nowrap;
  }
  .encabe span.r{text-align:right}
}

.prendas{--cols:40px minmax(0,1fr) 124px minmax(0,1.5fr) 74px}

.prenda{
  display:grid;gap:4px 12px;align-items:center;
  grid-template-columns:48px minmax(0,1fr) auto auto;
  grid-template-areas:
    "foto med cant flecha"
    "tallas tallas tallas tallas";
  padding:12px 16px 11px;border-bottom:1px solid var(--line-2);
}
.prenda:hover{background:var(--bg-2)}
.prenda .foto{grid-area:foto}
.prenda .med{grid-area:med;min-width:0}
.prenda .tipo{grid-area:tipo}
.prenda .cant{grid-area:cant;text-align:right}
.prenda .flecha{grid-area:flecha}
.prenda .tallas{grid-area:tallas}

.prenda .foto img,.prenda .foto .hueco{
  width:48px;height:60px;border-radius:7px;object-fit:cover;display:block;
  background:var(--line-2);
}
.prenda .hueco{display:flex;align-items:center;justify-content:center;color:var(--ink-4)}
.prenda .hueco svg{width:22px;height:22px}
.prenda .nom{font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.prenda .precio{font:700 12.5px/1 var(--mono);color:var(--ink-3);margin-top:5px}
.prenda .tipo{
  display:none;justify-self:start;
  font:600 11px/1 var(--sans);padding:4px 8px;border-radius:999px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.prenda .cant b{font:800 20px/1 var(--mono);font-variant-numeric:tabular-nums}
.prenda .cant small{display:block;font:600 9px/1 var(--mono);letter-spacing:.08em;color:var(--ink-4);margin-top:4px}
.prenda .cant.poco b{color:var(--warn)}
.prenda .cant.nada b{color:var(--bad)}
.prenda .flecha{color:var(--ink-4);font-size:18px}

.tallas{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.talla{
  font:700 11px/1 var(--mono);padding:5px 7px;border-radius:6px;
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.talla.cero{background:var(--bad-bg);border-color:transparent;color:var(--bad)}

/* En el ordenador: una fila, cinco columnas, y el tipo deja de esconderse */
@media (min-width:900px){
  .prenda{
    grid-template-columns:var(--cols);
    grid-template-areas:"foto med tipo tallas cant";
    gap:14px;padding:10px 22px;
  }
  .prenda .tipo{
    display:inline-block;
    font:600 11px/1 var(--sans);padding:4px 8px;border-radius:999px;
    background:var(--bg-2);border:1px solid var(--line);color:var(--ink-3);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .prenda .foto img,.prenda .foto .hueco{width:30px;height:38px;border-radius:5px}
  .prenda .hueco svg{width:15px;height:15px}
  .prenda .nom{font-size:14px}
  .prenda .precio{margin-top:3px}
  .prenda .cant small{display:none}
  .prenda .flecha{display:none}
  .tallas{margin-top:0}
}

/* ---------- dos números arriba ---------- */
.numeros{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.numero{background:var(--bg);padding:13px 16px;display:block}
.numero .rot{font:700 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4)}
.numero .val{font:800 24px/1 var(--mono);margin-top:8px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.numero .pie{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.numero.ojo .val{color:var(--warn)}
@media (min-width:900px){
  .numeros{grid-template-columns:repeat(4,1fr)}
  .numero{padding:14px 22px}
}

/* ---------- sólo con ancho de ordenador ---------- */
.solo-ancho{display:none}
.buscador{display:none}
.solo-pc{display:none}

@media (min-width:900px){
  .solo-ancho{display:block}
  .buscador{display:block}
  .solo-pc{display:inline}
  .solo-tel{display:none}
  .buscador input{
    border:1px solid var(--line);border-radius:8px;padding:9px 12px;
    background:var(--bg-2);font:500 13.5px/1 var(--sans);width:206px;
  }
  .buscador input::placeholder{color:var(--ink-4)}
}

/* ---------- formularios ---------- */
.forma{padding:16px;display:flex;flex-direction:column;gap:17px;max-width:620px}
@media (min-width:900px){.forma{padding:22px}}
.campo label,.campo .rot{
  display:block;margin-bottom:7px;
  font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.campo input[type=text],.campo input[type=number],.campo input[type=tel],.campo textarea,.campo select{
  width:100%;border:1px solid var(--line);border-radius:10px;
  padding:14px;background:var(--bg-2);
  font:600 16px/1.3 var(--sans);   /* 16px o iOS hace zoom al enfocar */
}
.campo input.mono{font-family:var(--mono);font-weight:700}
.campo .ayuda{font-size:12.5px;color:var(--ink-4);margin:7px 0 0}
.campo .ayuda b{color:var(--ok)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* cuadritos de cantidad por talla */
.cuadros{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.cuadro{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:8px 6px;text-align:center}
.cuadro .t{font:700 11px/1 var(--mono);color:var(--ink-3);letter-spacing:.04em}
.cuadro input{
  width:100%;border:0;background:none;text-align:center;margin-top:5px;padding:0;
  font:800 19px/1.1 var(--mono);font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.cuadro input::-webkit-outer-spin-button,.cuadro input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cuadro.lleno{border-color:var(--indigo-2);background:var(--indigo-bg)}

/* foto */
.foto-caja{
  border:2px dashed var(--line);border-radius:12px;background:var(--bg-2);
  padding:26px 16px;text-align:center;cursor:pointer;display:block;
}
.foto-caja .emo{font-size:30px;display:block;margin-bottom:8px}
.foto-caja b{display:block;font-size:14.5px}
.foto-caja span{display:block;font-size:12.5px;color:var(--ink-4);margin-top:4px}
.foto-caja input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.miniaturas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.miniaturas img{width:62px;height:78px;border-radius:8px;object-fit:cover;border:1px solid var(--line)}

/* ---------- avisos ---------- */
.aviso{
  margin:14px 16px;padding:12px 15px;border-radius:10px;font-size:13.5px;
  display:flex;gap:10px;align-items:flex-start;
}
@media (min-width:900px){.aviso{margin:14px 22px}}
.aviso b{display:block;margin-bottom:2px}
.aviso.bien{background:var(--ok-bg);color:var(--ok)}
.aviso.ojo{background:var(--warn-bg);color:var(--warn)}
.aviso.mal{background:var(--bad-bg);color:var(--bad)}
.aviso.info{background:var(--indigo-bg);color:var(--ink-2)}
.aviso a{text-decoration:underline;font-weight:650}

/* ---------- vacío ---------- */
.vacio{padding:52px 24px;text-align:center;color:var(--ink-3)}
.vacio .emo{font-size:38px;display:block;margin-bottom:12px}
.vacio h2{font-size:17px;margin:0 0 7px;color:var(--ink)}
.vacio p{margin:0 auto 18px;font-size:14px;max-width:34ch}

/* ---------- entrar ---------- */
.entrar{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 20px;background:var(--bg)}
.entrar .caja{width:100%;max-width:368px;text-align:center}
.entrar .logo{font-size:23px;font-weight:800;letter-spacing:-.02em}
.entrar .sub{color:var(--ink-3);font-size:14.5px;margin:6px 0 28px}
.gbtn{
  width:100%;border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;
  font:600 16px/1 var(--sans);box-shadow:0 1px 2px rgba(15,23,42,.06);
}
.gbtn .g{
  width:24px;height:24px;border-radius:50%;flex:none;
  background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);
  display:flex;align-items:center;justify-content:center;
  font:800 13px/1 var(--sans);color:#fff;
}
.entrar .nota{font-size:13px;color:var(--ink-3);margin:16px 0 0}
.entrar .nota.bien{color:var(--ok);font-weight:600}
.separa{display:flex;align-items:center;gap:11px;margin:24px 0 16px;color:var(--ink-4);font-size:12.5px}
.separa::before,.separa::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- varios ---------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.copiar{
  border:1px solid var(--line);border-radius:6px;background:var(--bg-2);
  padding:3px 8px;font:600 10.5px/1.5 var(--sans);color:var(--ink-2);cursor:pointer;
}
.pie-nota{padding:13px 16px;font-size:12.5px;color:var(--ink-4)}
@media (min-width:900px){.pie-nota{padding:13px 22px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

/* ==========================================================================
   Piezas de pantallas concretas
   ========================================================================== */

.oculto{display:none !important}

/* ---------- chips para elegir el tipo al cargar ---------- */
.chips-tipo{display:flex;gap:7px;flex-wrap:wrap}
.chip-tipo{position:relative;cursor:pointer}
.chip-tipo input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip-tipo span{
  display:block;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);
  padding:11px 15px;font:600 14px/1 var(--sans);color:var(--ink-2);
}
.chip-tipo input:checked+span{background:var(--indigo);border-color:var(--indigo);color:var(--on-indigo)}
.chip-tipo input:focus-visible+span{outline:2px solid var(--indigo-2);outline-offset:2px}
.chip-tipo.nuevo span{border-style:dashed;color:var(--indigo);background:var(--bg)}
.chip-tipo.nuevo input:checked+span{background:var(--indigo);border-style:solid;color:var(--on-indigo)}

/* ---------- agregar una talla que no estaba ---------- */
.agrega{display:flex;gap:8px;margin-top:9px}
.agrega input{
  flex:1;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  background:var(--bg-2);font:600 14px/1 var(--sans);
}

/* ---------- lo que no se vende por talla ---------- */
.sin-tallas{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);cursor:pointer}
.sin-tallas input{width:19px;height:19px;accent-color:var(--indigo);flex:none;margin:0}

.radio-linea{display:flex;align-items:flex-start;gap:10px;padding:9px 0;font-size:14px;color:var(--ink-2);cursor:pointer}
.radio-linea input{width:19px;height:19px;accent-color:var(--indigo);flex:none;margin:1px 0 0}
.radio-linea b{color:var(--ink)}

/* ---------- botones de guardar ---------- */
.guardar{display:flex;gap:9px;flex-wrap:wrap}
.guardar .btn{flex:1;min-width:140px}
@media (min-width:900px){.guardar{justify-content:flex-end}.guardar .btn{flex:none}}

/* ---------- historial de una prenda ---------- */
.historial{border-top:1px solid var(--line);margin-top:8px;padding-top:4px}
.historial h2{font-size:15px;margin:14px 16px 10px;letter-spacing:-.01em}
@media (min-width:900px){.historial h2{margin:16px 22px 10px}}
.mov{
  display:grid;gap:2px 10px;align-items:baseline;
  grid-template-columns:auto auto 1fr;
  grid-template-areas:"qdo qu cm" "pq pq pq";
  padding:10px 16px;border-bottom:1px solid var(--line-2);font-size:13px;
}
@media (min-width:900px){
  .mov{grid-template-columns:86px 94px 108px 1fr;grid-template-areas:"qdo qu cm pq";padding:9px 22px}
}
.mov .qdo{grid-area:qdo;font:600 11.5px/1.4 var(--mono);color:var(--ink-4);white-space:nowrap}
.mov .qu{grid-area:qu;font:700 12px/1.4 var(--mono);color:var(--ink-2)}
.mov .cm{grid-area:cm;font:700 12.5px/1.4 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mov .cm.baja{color:var(--bad)}
.mov .cm.sube{color:var(--ok)}
.mov .pq{grid-area:pq;color:var(--ink-3);font-size:12.5px}

/* ---------- cierre del día ---------- */
.conteo{padding:4px 0}
.bloque{border-bottom:1px solid var(--line-2);padding:13px 16px}
@media (min-width:900px){.bloque{padding:13px 22px}}
.bcab{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.bcab b{font-size:15px;font-weight:650}
.bcab span{font-size:12.5px;color:var(--ink-3);margin-left:auto}
.cuadro .habia{font:600 9.5px/1 var(--mono);color:var(--ink-4);margin-top:5px;letter-spacing:.03em}
.cuadro:not(.lleno) .habia{color:var(--bad)}

/* el total pegado abajo: se ve mientras cuenta, no después de guardar */
.total{
  position:sticky;bottom:var(--barra);z-index:30;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px 16px;background:var(--ink);color:var(--bg);
  border-top:1px solid var(--ink);
}
.total .tl{display:flex;flex-direction:column;gap:3px}
.total .rot{font:700 9px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;opacity:.65;margin:0}
.total b{font-size:16px;font-variant-numeric:tabular-nums}
.total .btn{margin-left:auto;background:var(--bg);border-color:var(--bg);color:var(--ink)}
@media (min-width:900px){.total{bottom:0;padding:13px 22px}}

/* ---------- mi tienda ---------- */
.enlace-caja{padding:16px;border-bottom:1px solid var(--line);background:var(--bg-2)}
@media (min-width:900px){.enlace-caja{padding:18px 22px}}
.enlace-caja .rot{
  display:block;margin-bottom:7px;
  font:700 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);
}
.enlace{font:700 15px/1.4 var(--mono);word-break:break-all;color:var(--ink);margin-bottom:12px}
.enlace-btns{display:flex;gap:8px;flex-wrap:wrap}
.enlace-btns .btn{flex:1;min-width:132px}
@media (min-width:900px){.enlace-btns .btn{flex:none}}

.dir-campo{display:flex;align-items:center;gap:0}
.dir-campo input{border-radius:10px 0 0 10px;min-width:0}
.dir-campo span{
  flex:none;border:1px solid var(--line);border-left:0;border-radius:0 10px 10px 0;
  padding:14px 11px;background:var(--line-2);
  font:600 12.5px/1.3 var(--mono);color:var(--ink-3);
}

.salir-caja{border-top:1px solid var(--line);padding:18px 16px 26px;max-width:620px}
@media (min-width:900px){.salir-caja{padding:20px 22px 30px}}

/* ---------- acordeón de colores al cargar ---------- */
/* Se desempaca por color: saca los negros, los cuenta, los guarda. Una
   matriz de once tallas por tres colores no se llena nunca en un teléfono. */
.color-caja{border:1px solid var(--line);border-radius:11px;margin-bottom:9px;overflow:hidden;background:var(--bg)}
.color-caja.abierto{border-color:var(--indigo-2)}
.color-cab{display:flex;align-items:center;gap:11px;padding:13px 14px;cursor:pointer;background:var(--bg-2)}
.color-caja.abierto .color-cab{background:var(--indigo-bg)}
.color-cab .punto{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(15,23,42,.14) inset}
.color-cab b{font-size:15px;font-weight:650;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.color-cab .suma{font:800 16px/1 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.color-cab .quitar{border:0;background:none;color:var(--ink-4);font-size:15px;cursor:pointer;padding:4px 2px;line-height:1}
.color-cab .quitar:hover{color:var(--bad)}
.color-cab .fl{color:var(--ink-4);font-size:15px}
.color-caja .cuadros{padding:12px 14px 14px}

/* ---------- campos opcionales y de mayoreo ---------- */
.campo label .opc{
  font:500 10.5px/1 var(--sans);letter-spacing:0;text-transform:none;
  color:var(--ink-4);margin-left:5px;
}
.campo label.chiquito{
  font:700 9.5px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-4);margin-bottom:6px;display:block;
}
.mayoreo-caja{
  border:1px solid var(--line);border-radius:12px;padding:15px;background:var(--bg-2);
}
.mayoreo-caja .ayuda b{color:var(--ok);font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- categorías ---------- */
/* Una caja por eje, con aire entre ellas: en el teléfono tres bloques
   seguidos sin separación se leen como un solo formulario largo. */
.eje-caja{
  border:1px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:12px;background:var(--bg-2);
}
.eje-caja .ayuda{margin:8px 0 0}
.eje-caja select{
  width:100%;border:1px solid var(--line);border-radius:10px;
  padding:12px 11px;background:var(--bg);color:var(--ink);font-size:15px;
}

.lista .fila{
  display:flex;align-items:center;gap:12px;
  padding:14px 2px;border-bottom:1px solid var(--line-2);
}
.lista .fila .izq{flex:1;min-width:0}
.lista .fila b{display:block;font-size:15px}
.lista .fila .sub{
  display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.lista .fila .der{display:flex;align-items:center;gap:10px;flex:none}
.lista .fila .cant{
  font:700 12px/1 var(--mono);color:var(--ink-4);
  background:var(--bg-2);border-radius:999px;padding:6px 9px;
}
.lista .fila .fl{color:var(--ink-4)}

/* ---------- elegir la apariencia ---------- */
/* Se elige mirando, no leyendo: la muestra de color y el nombre de la tienda
   escrito con esa letra dicen más que cualquier etiqueta. */
.paletas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.paleta,.letra{position:relative;cursor:pointer}
.paleta input,.letra input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.paleta .muestra{
  display:flex;gap:5px;align-items:center;justify-content:center;
  height:52px;border-radius:10px;border:1.5px solid var(--line);
}
.paleta .muestra i{width:17px;height:17px;border-radius:50%;display:block}
.paleta .nom,.letra .nom{display:block;font-size:13.5px;font-weight:650;margin-top:7px}
.paleta .pista,.letra .pista{display:block;font-size:11.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.paleta input:checked ~ .muestra{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.paleta input:checked ~ .nom,.letra input:checked ~ .nom{color:var(--ink)}

.letras{display:grid;gap:10px}
.letra .ej{
  display:block;font-size:21px;line-height:1.2;
  padding:15px 14px;border:1.5px solid var(--line);border-radius:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.letra input:checked ~ .ej{border-color:var(--ink);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}

.portada-actual{margin:8px 0 10px}
.portada-actual img{
  width:100%;max-height:150px;object-fit:cover;
  border-radius:10px;border:1px solid var(--line);display:block;
}
.portada-actual .sin-tallas{margin-top:8px}

/* ---------- fotos de ejemplo ---------- */
/* Plegado: la mayoría sube sus propias fotos y nunca abre esto. Abierto de
   entrada robaría la pantalla a lo que de verdad importa, que es la foto
   que la vendedora sí tiene. */
.ejemplos{
  border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2);margin-top:12px;
}
.ejemplos summary{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:13px 14px;list-style:none;font-size:14px;
}
.ejemplos summary::-webkit-details-marker{display:none}
.ejemplos summary .ic{flex:none;font-size:15px}
.ejemplos summary .pista{color:var(--ink-3);font-size:12px;margin-left:auto}
.buscar-ej{padding:0 14px 10px}
.buscar-ej input{
  width:100%;border:1px solid var(--line);border-radius:999px;
  padding:11px 15px;background:var(--bg);font-size:14.5px;
}

/* Cuatro por fila en el teléfono: con miniaturas de 400 px se reconoce la
   prenda de un vistazo, que es todo lo que hace falta para elegirla. */
.rejilla-ej{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px;padding:0 14px;max-height:340px;overflow-y:auto;
}
.ejemplos .ej{
  border:1.5px solid var(--line);border-radius:10px;background:var(--bg);
  padding:0;cursor:pointer;overflow:hidden;text-align:center;
}
.ejemplos .ej img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.ejemplos .ej span{
  display:block;font-size:10px;color:var(--ink-3);padding:4px 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ejemplos .ej:hover{border-color:var(--ink-4)}
.ejemplos .ayuda{padding:9px 14px 13px;margin:0}

/* Las ya elegidas, fuera del desplegable: tienen que verse aunque lo cierre,
   o no hay forma de saber qué lleva puesto el producto. */
.elegidas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.elegidas .elegida{position:relative;width:72px}
.elegidas .elegida img{
  width:72px;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:9px;border:1px solid var(--line);
}
.elegidas .elegida button{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;
  border-radius:50%;border:0;background:var(--ink);color:var(--bg);
  font-size:12px;line-height:22px;padding:0;cursor:pointer;
}

/* ---------- fotos que ya tiene el producto ---------- */
/* Quitar es una casilla y no un botón de borrar al instante: se marca,
   se mira, y se confirma al guardar junto con todo lo demás. Un borrado
   inmediato sin deshacer sobre la única foto de un producto es la clase
   de cosa que no se perdona. */
.fotos-puestas{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.fotos-puestas .puesta{position:relative;width:84px;cursor:pointer}
.fotos-puestas .puesta img{
  width:84px;aspect-ratio:3/4;object-fit:cover;display:block;
  border-radius:10px;border:1.5px solid var(--line);transition:opacity .12s;
}
.fotos-puestas .quitar{
  display:flex;align-items:center;justify-content:center;gap:5px;
  margin-top:5px;font-size:11.5px;color:var(--ink-3);
}
.fotos-puestas .quitar input{width:15px;height:15px;margin:0;accent-color:var(--bad)}
/* Marcada para quitar: se ve que se va, pero todavía está. */
.fotos-puestas .puesta:has(input:checked) img{opacity:.35;border-color:var(--bad)}
.fotos-puestas .puesta:has(input:checked) .quitar{color:var(--bad);font-weight:650}
.fotos-puestas .marca{
  position:absolute;top:5px;left:5px;
  font:700 8.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  background:var(--ink);color:var(--bg);padding:4px 6px;border-radius:999px;
}