/* Estilos del PANEL (plantilla GoHart Tiendas). Colores y letras: tema.css. */ :root{ --bg:var(--t-fondo-alterno); --tinta:var(--t-tinta); --gris:var(--t-tinta-suave); --gris2:var(--t-tinta-suave); --borde:color-mix(in srgb,var(--tinta) 8%,transparent); --linea:color-mix(in srgb,var(--tinta) 6%,transparent); --blanco:#fff; --rojo:#a03030; --verde:#2f7a3d; --ambar:#a06a1a; --azul:#2f5f9e; --moto:#1f63d6; --naranja:#e8720c; --rayaA:repeating-linear-gradient(70deg,#e4e2de,#e4e2de 10px,#d4d1cb 10px,#d4d1cb 20px); } *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--tinta);font-family:var(--t-letra-texto);min-height:100vh} button,input,textarea,select{font-family:inherit;font-size:14px} ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--tinta) 13%,transparent)} .arch{font-family:var(--t-letra-texto)} .oculto{display:none!important} /* --- login --- */ .login-fondo{position:fixed;inset:0;background:var(--tinta);display:flex;align-items:center; justify-content:center;z-index:100;padding:20px} .login-caja{background:var(--bg);padding:40px 34px;width:100%;max-width:370px;display:flex; flex-direction:column;gap:18px} .login-caja .marca{font-family:var(--t-letra-texto);font-weight:900;font-size:26px;letter-spacing:.04em;text-align:center} .logo-login{width:92px;height:92px;border-radius:50%;align-self:center;margin-bottom:-4px} .login-caja .sub{text-align:center;color:var(--gris);font-size:13px;margin-top:-12px} .lbl{font-family:var(--t-letra-texto);font-weight:700;font-size:12px;letter-spacing:.04em;color:#555} .inp{border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);padding:12px 14px;font-size:14px;background:var(--bg);width:100%; font-family:var(--t-letra-texto);color:var(--tinta)} .inp:focus{outline:2px solid var(--tinta);outline-offset:-2px} .campo{display:flex;flex-direction:column;gap:8px} .btn{background:var(--tinta);color:var(--bg);border:none;padding:13px 22px;font-family:var(--t-letra-texto); font-weight:700;font-size:13px;letter-spacing:.03em;cursor:pointer} .btn:disabled{opacity:.4;cursor:not-allowed} .btn-b{background:none;border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);color:var(--tinta)} .btn-r{background:none;border:1px solid var(--rojo);color:var(--rojo)} .err{background:#fdeaea;border-left:3px solid var(--rojo);padding:11px 13px;font-size:13px;color:#7d2020} /* --- estructura --- */ .app{display:flex;min-height:100vh} /* 🐛 21-Ago: la barra se iba con el scroll. Tenía `min-height:100vh` y, como `.app` es flex, se estiraba a la altura de TODO el contenido — y un elemento `sticky` más alto que la pantalla se desplaza igual, porque solo se queda pegado mientras su propia caja está a la vista. Con `height` fija y `align-self:flex-start` la caja mide una pantalla y se queda quieta; el `overflow-y` es por si el menú no cupiera. */ .side{width:230px;flex-shrink:0;background:var(--tinta);color:var(--bg);display:flex; flex-direction:column;padding:28px 20px;gap:34px;height:100vh;align-self:flex-start; overflow-y:auto;position:sticky;top:0} .side .marca{font-family:var(--t-letra-texto);font-weight:900;font-size:20px;letter-spacing:.04em; display:flex;align-items:center;gap:10px} .side .marca img{width:30px;height:30px;border-radius:50%;flex-shrink:0; outline:1px solid #ffffff26;outline-offset:0} .nav{display:flex;flex-direction:column;gap:4px} .nav button{display:flex;align-items:center;gap:12px;background:transparent;border:none;color:var(--bg); padding:12px 14px;font-family:var(--t-letra-texto);font-weight:700;font-size:13px; letter-spacing:.03em;cursor:pointer;text-align:left;border-radius:2px;width:100%} .nav button .pt{width:6px;height:6px;background:currentColor;border-radius:50%;opacity:.4;flex-shrink:0} .nav button.act{background:var(--bg);color:var(--tinta)} .nav button.act .pt{opacity:1} .side .pie{margin-top:auto;font-size:12px;color:#999;line-height:1.6} .side .pie button{background:none;border:none;color:#bbb;text-decoration:underline;cursor:pointer; font-size:12px;padding:6px 0} .main{flex:1;min-width:0;display:flex;flex-direction:column} .top{display:flex;align-items:center;justify-content:space-between;padding:24px 40px; border-bottom:1px solid var(--borde);background:var(--bg);position:sticky;top:0;z-index:10} .top h1{font-family:var(--t-letra-texto);font-weight:900;font-size:24px;margin:0} .top .der{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--gris)} .avatar{width:36px;height:36px;border-radius:50%;background:var(--tinta);color:var(--bg); display:flex;align-items:center;justify-content:center;font-family:var(--t-letra-texto); font-weight:700;font-size:13px} .cuerpo{padding:32px 40px 60px;flex:1} /* --- tarjetas --- */ .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px; background:var(--borde);margin-bottom:32px} .stat{background:var(--bg);padding:24px} /* ---------- los tres precios del producto ---------- */ .tres-precios{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} @media(max-width:700px){.tres-precios{grid-template-columns:1fr}} .margen-vivo{margin:2px 0 10px;min-height:18px} .margen-vivo .mg{display:flex;gap:8px;align-items:baseline;font-size:13px;padding:3px 0} .margen-vivo .mg b{font-variant-numeric:tabular-nums;color:var(--verde)} .margen-vivo .mg i{font-style:normal;font-size:11px;color:var(--gris2)} .margen-vivo .mg.mal b{color:var(--rojo)} /* ---------- las dos mitades del negocio ---------- */ .canales{display:flex;gap:2px;background:#ffffff1a;padding:3px;border-radius:8px;margin-bottom:16px} .canales button{flex:1;background:transparent;border:none;color:var(--bg);opacity:.6; padding:9px 6px;font-family:var(--t-letra-texto);font-weight:700;font-size:11.5px; letter-spacing:.02em;cursor:pointer;border-radius:6px;white-space:nowrap} .canales button.act{background:var(--bg);color:var(--tinta);opacity:1} .nav-sep{font-size:10px;letter-spacing:.12em;color:#ffffff55;padding:16px 14px 6px;font-weight:700} .nav button.oculto{display:none} @media(max-width:900px){ .canales{margin-bottom:10px} .nav-sep{padding:10px 8px 4px;width:100%} } /* ---------- gráficos ---------- */ .g-caja{padding-top:4px} .g-svg{width:100%;height:auto;display:block} .g-linea{stroke:var(--linea);stroke-width:1} .g-eje{font-size:11px;fill:var(--gris2);font-family:inherit} .g-val{font-size:12px;font-weight:600;fill:var(--tinta);text-anchor:middle;font-family:inherit} .g-leyenda{display:flex;gap:18px;font-size:12px;color:var(--gris);margin-bottom:10px} .g-leyenda i,.g-rleg i,.mini-txt i{width:10px;height:10px;border-radius:2px;display:inline-block; margin-right:6px;vertical-align:-1px} .g-vacio{color:var(--gris2);font-size:13px;padding:18px 0;text-align:center} .g-nota{font-size:12px;color:var(--gris2);margin-top:12px;line-height:1.5} /* barras horizontales */ .g-barras{display:flex;flex-direction:column;gap:12px} .g-fila{display:grid;grid-template-columns:minmax(120px,190px) 1fr auto;gap:14px;align-items:center} .g-etq{font-size:13.5px;line-height:1.25} .g-etq small{display:block;font-size:11px;color:var(--gris2);margin-top:2px} .g-pista{height:14px;background:var(--linea);border-radius:7px;overflow:hidden} /* Punta redonda al final y recta en el origen: la barra crece desde una línea base. */ .g-marca{height:100%;border-radius:0 7px 7px 0;min-width:4px} .g-num{font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap} @media(max-width:640px){.g-fila{grid-template-columns:1fr auto;gap:6px} .g-pista{grid-column:1/-1;order:3}} /* mini reparto dentro de las tarjetas */ .mini-rep{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:12px;gap:2px} .mini-rep>div{min-width:2px} .mini-txt{display:flex;gap:12px;font-size:11px;color:var(--gris2);margin-top:7px;flex-wrap:wrap} /* a dónde va la plata */ .g-reparto{margin-top:4px} /* El hueco de 2px es lo que separa las tajadas: sin bordes, que serían tinta que no es dato. */ .g-rbar{display:flex;height:34px;border-radius:8px;overflow:hidden;gap:2px;background:var(--blanco)} .g-rseg{min-width:3px} .g-rleg{display:flex;flex-direction:column;gap:9px;margin-top:16px} .g-ritem{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:baseline;font-size:13.5px} .g-ritem .n{color:var(--gris)} .g-ritem b{font-variant-numeric:tabular-nums} .g-ritem small{font-size:11.5px;color:var(--gris2);min-width:34px;text-align:right} /* inventario */ .inv{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:14px} .inv>div{padding:12px 0} .inv b{display:block;font-size:26px;font-weight:600;font-variant-numeric:tabular-nums} .inv span{font-size:12px;color:var(--gris2)} .inv .mal b{color:var(--rojo)} .inv .ojo b{color:var(--ambar)} /* ---------- botones de accion de un pedido (27-Ago-2026) ---------- Eran enlaces de texto sueltos, todos iguales: para saber cual imprime y cual edita habia que leerlos. Ahora son botones con su icono, con el que abre la edicion destacado — es el que se usa cuando algo salio mal y hay prisa. */ .acc-ped{display:flex;flex-direction:column;gap:5px;min-width:132px} .acc-btn{display:flex;align-items:center;gap:7px;width:100%;padding:7px 10px; border:1px solid var(--borde);border-radius:7px;background:var(--papel,#fff); font-family:var(--t-letra-texto);font-size:12px;font-weight:600;color:var(--tinta); cursor:pointer;transition:background .14s,border-color .14s;text-align:left; letter-spacing:.01em} .acc-btn:hover{background:rgba(0,0,0,.04);border-color:var(--gris2)} .acc-btn i{font-style:normal;font-size:13.5px;line-height:1;flex-shrink:0} .acc-btn.fuerte{background:var(--tinta);color:#fff;border-color:var(--tinta)} .acc-btn.fuerte:hover{background:#000} .acc-btn:disabled{opacity:.4;cursor:not-allowed} .acc-btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px} /* ---------- catalogo por FILAS DE MARCA (27-Ago-2026) ---------- El mismo formato de la tienda, en Productos y en el mostrador. Aqui sirve incluso mas: se busca DELANTE DEL CLIENTE, y recorrer 75 camisas iguales con alguien esperando es lo que hace que se termine tecleando el nombre a medias. El nombre va negro y grueso: es lo que ordena la pantalla. */ /* 🔴 Se llamaba `.pos-fila`, pero ese nombre YA EXISTE mas abajo para la linea del total del carrito — con `display:flex` en horizontal. La regla de abajo ganaba por orden y el titulo salia AL LADO de las prendas en vez de encima. Renombrado a `.marca-fila`: buscar si un nombre esta libre cuesta 10 segundos y ahorra media hora de mirar CSS que parece correcto. */ /* 🔴 27-Ago-2026: el padre (`#pv-grid`, `.pgrid`) es una CUADRÍCULA, así que cada fila de marca caía en una celda de 184 px y se veía **una sola prenda por marca**. `grid-column: 1/-1` la hace ocupar el ancho entero. */ .marca-fila{margin-bottom:26px;display:block;width:100%;grid-column:1/-1} .marca-fila-tit{display:flex;align-items:baseline;gap:10px;margin:0 0 11px;width:100%; font-family:var(--t-letra-texto);font-weight:800;font-size:19px; letter-spacing:-.3px;color:var(--tinta);text-transform:uppercase} .marca-fila-tit span{font-size:12px;font-weight:600;color:#aaa;letter-spacing:0; font-variant-numeric:tabular-nums} /* 🖥️ EN EL PANEL NO SE ARRASTRA: se ENVUELVE. El panel se maneja **desde el PC**, donde hay 900 px o más de ancho: caben 5 prendas por fila sin tocar nada. Obligar a arrastrar ahí es trabajo de más —y con el padre en cuadrícula se veía una sola prenda por marca—. El arrastre se queda solo en la tienda, que se ve en el celular. */ .marca-fila-tira{display:grid;gap:12px; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} @media(max-width:640px){ .marca-fila-tit{font-size:16px} .marca-fila-tira{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} } /* ---------- credito interno ---------- Una deuda se lee de un vistazo o no se lee: quien debe, cuanto, y desde cuando. El resto es ruido. Por eso la tarjeta tiene tres bloques fijos y el monto que falta es lo mas grande de todo. */ /* Buscador de créditos: grande y arriba, es lo primero que se usa cuando llega alguien a abonar. */ .cr-busca{margin:0 0 14px} .cr-busca input{width:100%;box-sizing:border-box;padding:13px 14px;font-size:16px;border:1.5px solid #d8d4cd; border-radius:10px;background:#fff;outline:none} .cr-busca input:focus{border-color:var(--tinta)} .cr-res{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px; margin-bottom:22px} .cr-caja{padding:16px 18px;border:1px solid var(--borde);border-radius:12px;background:#fff} .cr-caja .k{font-size:10.5px;letter-spacing:.13em;color:var(--gris2);font-weight:700; font-family:var(--t-letra-texto)} .cr-caja .v{font-size:25px;font-weight:700;margin-top:7px;letter-spacing:-.5px; font-variant-numeric:tabular-nums} .cr-caja.deuda{background:#fdf6f5;border-color:#b0271f33} .cr-caja.deuda .v{color:#b0271f} .cr-item{border:1px solid var(--borde);border-radius:12px;padding:16px 18px;margin-bottom:12px; background:#fff;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start} .cr-item.saldado{background:#f7faf7;border-color:#2f7a3d33} .cr-item .quien{font-size:16.5px;font-weight:600;letter-spacing:-.2px} .cr-item .tel{font-size:13px;color:var(--gris2);margin-top:2px;font-variant-numeric:tabular-nums} .cr-item .que{font-size:13px;color:var(--gris);margin-top:9px;line-height:1.5} .cr-item .cifras{text-align:right;white-space:nowrap} .cr-item .debe{font-size:23px;font-weight:700;color:#b0271f;letter-spacing:-.5px; font-variant-numeric:tabular-nums} .cr-item .dedos{font-size:12.5px;color:var(--gris2);margin-top:4px;font-variant-numeric:tabular-nums} .cr-item .listo{font-size:16px;font-weight:700;color:#2f7a3d} /* La barra de avance: cuanto lleva pagado de lo que vale. Es lo que hace que se entienda «va por la mitad» sin tener que dividir mentalmente. */ .cr-barra{height:6px;border-radius:3px;background:#ece9e4;overflow:hidden;margin-top:10px} .cr-barra i{display:block;height:100%;background:#2f7a3d;border-radius:3px} /* Días sin pagar: etiqueta de alerta, con fondo lleno para que salte a la vista. De 0 a 2 días ámbar, de 3 a 6 naranja, 7 o más rojo. */ .cr-dias{display:inline-block;margin:6px 0 2px;padding:4px 11px;border-radius:12px; font-size:12px;font-weight:700;letter-spacing:.2px;color:#fff;background:#d9a21b; white-space:nowrap} .cr-dias.tibio{background:#e8650f} .cr-dias.viejo{background:#c62828;box-shadow:0 0 0 3px rgba(198,40,40,.18)} .cr-acc{display:flex;gap:10px;margin-top:12px;justify-content:flex-end;flex-wrap:wrap} /* ---------- contabilidad ---------- */ .chico{font-size:11px;color:var(--gris2);margin-top:2px} .btn2{background:transparent;border:1px solid var(--borde);color:var(--gris); padding:10px 16px;border-radius:8px;font-size:12px;letter-spacing:.04em;cursor:pointer} .btn2:hover{border-color:var(--tinta);color:var(--tinta)} .btn2.act{background:var(--tinta);color:var(--blanco);border-color:var(--tinta)} .pill{display:inline-block;font-size:11px;padding:3px 8px;border-radius:20px; border:1px solid var(--borde);letter-spacing:.03em;white-space:nowrap} .pill.pw{color:var(--azul);border-color:#2f5f9e33} .pill.pl{color:var(--verde);border-color:#2f7a3d33} /* Una linea del desglose. La plata va a la derecha y en cifras tabulares: si no, los numeros bailan de ancho y la columna se ve torcida. */ /* 26-Ago-2026: todo un punto más grande. Contabilidad es la pantalla que se mira con más atención —y a veces con el celular en la mano— y a 14 px las cifras se leían apretadas. El renglón fino de detalle estaba en 12 px, por debajo del mínimo legible de esta casa. */ .conta-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px; padding:9px 0;font-size:15.5px;border-bottom:1px solid var(--linea)} .conta-l b{font-variant-numeric:tabular-nums;font-size:16.5px} .conta-l.sub{font-size:13.5px;color:var(--gris2);padding:4px 0 4px 14px;border-bottom:none} .conta-l.sub b{font-size:13.5px} .conta-l.sub.malo span{color:var(--rojo,#a03030)} .conta-l.sub.malo span:last-child{font-weight:600} .conta-l.neg{color:var(--rojo)} .conta-l.tot{border-top:1px solid var(--borde);border-bottom:none;margin-top:6px; padding-top:12px;font-weight:600;letter-spacing:.03em;font-size:16.5px} .conta-l.tot b{font-size:18px} .conta-l.fin{font-size:20px;color:var(--verde)} .conta-l.fin b{font-size:22px} .cortes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px} .corte{padding:2px 0} .corte .ct{font-size:11px;color:var(--gris2);letter-spacing:.05em;margin-bottom:8px} .corte .cv{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.1} .corte .cd{font-size:12px;color:var(--gris2);margin-top:4px} .corte .cs{font-size:12.5px;margin-top:10px;color:var(--gris)} .corte .cs b{color:var(--tinta);font-variant-numeric:tabular-nums} .tabla-conta{width:100%;border-collapse:collapse;font-size:13px} .tabla-conta th{text-align:left;font-size:11px;color:var(--gris2);letter-spacing:.05em; font-weight:500;padding:0 10px 8px 0;border-bottom:1px solid var(--borde);white-space:nowrap} .tabla-conta td{padding:10px 10px 10px 0;border-bottom:1px solid var(--linea);vertical-align:top} .tabla-conta .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .tabla-conta tr.incompleto td{opacity:.45} .stat .t{font-size:12px;color:var(--gris2);letter-spacing:.05em;margin-bottom:10px} .stat .v{font-family:var(--t-letra-texto);font-weight:900;font-size:28px;line-height:1.1} .stat .d{font-size:12px;margin-top:6px;color:var(--gris)} .caja{background:var(--blanco);border:1px solid var(--borde);padding:28px;margin-bottom:32px} .caja h2{font-family:var(--t-letra-texto);font-weight:700;font-size:14px;letter-spacing:.04em; margin:0 0 24px;text-transform:uppercase} /* --- grafica --- */ .barras{display:flex;align-items:flex-end;gap:18px;height:180px} .barra{flex:1;display:flex;flex-direction:column;align-items:center;gap:10px;height:100%;justify-content:flex-end} .barra .val{font-size:11px;color:var(--gris);font-weight:500} .barra .bar{width:100%;max-width:40px;background:var(--tinta);border-radius:2px 2px 0 0;min-height:3px; transition:height .3s} .barra .dia{font-size:12px;color:var(--gris2)} .fila-top{display:flex;align-items:center;justify-content:space-between;padding:12px 0; border-bottom:1px solid var(--linea)} .fila-top .izq{display:flex;align-items:center;gap:12px} .fila-top .mini{width:38px;height:38px;background:var(--rayaA);flex-shrink:0;background-size:cover;background-position:center} /* --- tablas --- */ /* --- IMPRESION: el editor de la etiqueta --- */ .imp-cols{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap} .imp-ctrl{flex:1 1 320px;min-width:280px} .imp-prev{flex:0 0 340px;position:sticky;top:20px} .imp-prev img{width:100%;border:1px solid var(--borde);background:#fff;display:block} .imp-prev .pie{font-size:11.5px;color:var(--gris2);margin-top:8px;line-height:1.5} .imp-slider{margin-bottom:16px} .imp-slider .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px} .imp-slider label{font-size:12.5px;color:var(--tinta);font-weight:600} .imp-slider .val{font-family:var(--t-letra-texto);font-weight:700;font-size:12px;color:var(--gris2); font-variant-numeric:tabular-nums;white-space:nowrap} .imp-slider input[type=range]{width:100%;accent-color:var(--tinta);margin:0} .imp-slider .mm{font-size:11px;color:var(--gris2)} @media (max-width:820px){ .imp-prev{position:static;flex:1 1 100%;order:-1} } /* --- interruptor de PUBLICADO en cada tarjeta de producto --- Un interruptor y no una casilla: se ve encendido o apagado desde lejos, que es lo que se necesita al repasar un catalogo entero de un vistazo. */ .pub{display:flex;align-items:center;gap:8px;cursor:pointer;margin:10px 0 2px; user-select:none} .pub input{position:absolute;opacity:0;width:0;height:0} .pub .riel{width:38px;height:21px;background:#c9c6c0;position:relative;flex-shrink:0; transition:background .15s} .pub .riel i{position:absolute;top:3px;left:3px;width:15px;height:15px;background:#fff; transition:left .15s} .pub.si .riel{background:var(--verde,#2f7a3d)} .pub.si .riel i{left:20px} .pub b{font-family:var(--t-letra-texto);font-size:10.5px;letter-spacing:.06em; color:var(--gris2)} .pub.si b{color:var(--verde,#2f7a3d)} .pub input:focus-visible + .riel{outline:2px solid var(--tinta);outline-offset:2px} .pub input:disabled + .riel{opacity:.5} .pub-pista{font-size:11.5px;color:var(--gris2);line-height:1.5;margin-bottom:6px} /* la foto de portada, marcada sobre la miniatura */ .f-mini{position:relative} .f-portada{position:absolute;left:0;bottom:0;background:var(--tinta);color:var(--bg); font-family:var(--t-letra-texto);font-size:9px;letter-spacing:.06em; padding:3px 6px} .f-hacer{position:absolute;left:0;bottom:0;background:#ffffffdd;color:var(--tinta); border:none;font-family:var(--t-letra-texto);font-size:9px;letter-spacing:.05em; padding:3px 6px;cursor:pointer} .f-hacer:hover{background:var(--tinta);color:var(--bg)} /* --- tablas de verdad (LOGISTICA) --- `.tabla` de arriba NO es un : es una rejilla de divs con un numero de columnas fijo. Logistica tiene otro numero de columnas y filas de dos renglones, asi que usa
real con su propio estilo. */ .tbl{width:100%;border-collapse:collapse;font-size:13px} .tbl th{background:var(--tinta);color:var(--bg);font-family:var(--t-letra-texto); font-weight:700;font-size:10.5px;letter-spacing:.06em;text-align:left; padding:10px 12px;white-space:nowrap} .tbl td{padding:10px 12px;border-bottom:1px solid var(--linea);vertical-align:top; font-variant-numeric:tabular-nums} .tbl tbody tr:hover{background:#faf9f7} .tbl tfoot td{padding:11px 12px;border-top:2px solid var(--tinta);border-bottom:none; font-family:var(--t-letra-texto)} .tbl small{font-size:11px} /* el cierre en rojo cuando el colchon NO alcanzo: `.fin` solo era verde */ .conta-l.fin.malo{color:var(--rojo)} .tabla{background:var(--blanco);border:1px solid var(--borde);overflow-x:auto} .th,.tr{display:grid;grid-template-columns:1.1fr 1.3fr 1.5fr .9fr .9fr 1fr .9fr .9fr; padding:15px 20px;align-items:center;gap:10px;min-width:1000px} .th{background:var(--tinta);color:var(--bg);font-family:var(--t-letra-texto);font-weight:700; font-size:11px;letter-spacing:.06em} .tr{border-bottom:1px solid var(--linea);font-size:13px} .tr:hover{background:#faf9f7} .chip{padding:5px 10px;border-radius:12px;font-size:11px;font-weight:500;display:inline-block;white-space:nowrap} .sel-estado{border:1px solid color-mix(in srgb,var(--tinta) 19%,transparent);padding:6px 8px;font-size:12px;background:var(--bg);cursor:pointer;width:100%} .link{background:none;border:none;font-size:12px;font-weight:700;border-bottom:1px solid var(--tinta); cursor:pointer;padding:0;color:var(--tinta);font-family:var(--t-letra-texto)} /* --- punto de venta --- */ .pos{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start} @media(max-width:900px){.pos{grid-template-columns:1fr}} } .pos-buscar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap} .pos-buscar .inp{flex:1;min-width:180px} .pos-cats{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .pos-cat{background:var(--bg);border:1px solid var(--borde);padding:7px 13px;cursor:pointer; font-size:12px;font-family:var(--t-letra-texto);font-weight:700;letter-spacing:.04em} .pos-cat.act{background:var(--tinta);color:var(--bg);border-color:var(--tinta)} .pos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:1px; background:var(--borde);border:1px solid var(--borde)} /* Una prenda que no está publicada en la web: se puede vender igual en el mostrador, pero se marca para que quien cobra lo sepa de un vistazo. */ .pos-art.sin-publicar{opacity:.82} .pos-art.sin-publicar .f{filter:grayscale(.35)} /* Un encargo se marca en otro tono: no es que esté oculta, es que no se tiene. */ .pos-art.es-encargo .f{filter:none} .sello-oculto.encargo{background:#8a5a00e0} .sello-oculto{position:absolute;left:0;right:0;bottom:0;background:#111c;color:#fff; font-style:normal;font-family:var(--t-letra-texto);font-weight:700;font-size:8.5px; letter-spacing:.06em;text-align:center;padding:3px 2px} .pos-art .f{position:relative} .pos-art{background:var(--blanco);padding:0;border:none;cursor:pointer;text-align:left; font-family:inherit;display:flex;flex-direction:column} .pos-art:hover{background:#faf9f7} .pos-art .f{width:100%;aspect-ratio:1;background:var(--rayaA);background-size:cover; background-position:center} .pos-art .d{padding:10px 11px} .pos-art .n{font-size:13px;font-weight:500;line-height:1.35} .pos-art .p{font-size:13px;color:var(--gris);margin-top:3px} .pos-tallas{display:flex;flex-wrap:wrap;gap:4px;padding:0 11px 11px} .pos-talla{border:1px solid var(--borde);background:var(--bg);font-size:11px;padding:4px 7px; cursor:pointer;font-family:inherit} .pos-talla:hover{background:var(--tinta);color:var(--bg);border-color:var(--tinta)} .pos-talla:disabled{opacity:.3;cursor:default;text-decoration:line-through} .pos-caja{background:var(--blanco);border:1px solid var(--borde);position:sticky;top:16px} .pos-caja h3{margin:0;padding:14px 16px;font-family:var(--t-letra-texto);font-size:13px; letter-spacing:.08em;background:var(--tinta);color:var(--bg)} .pos-items{overflow-y:auto} /* En celular la columna va debajo de la vitrina: ahí sí conviene que la lista tenga su propio tope, o el botón de cobrar se va a tomar por saco. */ @media(max-width:900px){.pos-items{max-height:38vh}} .pos-it{display:grid;grid-template-columns:1fr auto;gap:8px;padding:11px 16px; border-bottom:1px solid var(--linea);font-size:13px;align-items:center} .pos-it .nn{font-weight:500} .pos-it .tt{font-size:11px;color:var(--gris2);margin-top:2px} .pos-it .cc{display:flex;align-items:center;gap:6px;margin-top:5px} .pos-it .cc button{width:22px;height:22px;border:1px solid var(--borde);background:var(--bg); cursor:pointer;font-size:13px;line-height:1} .pos-it .pp{text-align:right;white-space:nowrap;font-weight:500} .pos-it .qq{background:none;border:none;color:#b23;font-size:11px;cursor:pointer; text-decoration:underline;padding:0;margin-top:4px} .pos-vacio{padding:26px 16px;text-align:center;color:var(--gris2);font-size:13px} .pos-tot{padding:14px 16px;border-top:2px solid var(--tinta)} .pos-fila{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px} .pos-fila.big{font-size:19px;font-weight:700;font-family:var(--t-letra-texto);margin:10px 0 0} .pos-pago{display:flex;gap:6px;padding:0 16px 12px} .pos-pago button{flex:1;border:1px solid var(--borde);background:var(--bg);padding:9px 4px; cursor:pointer;font-size:11.5px;font-family:var(--t-letra-texto);font-weight:700} .pos-pago button.act{background:var(--tinta);color:var(--bg);border-color:var(--tinta)} /* Los cajones de monto: uno por forma de pago marcada. Solo salen cuando hay dos o más — con una sola, el monto es el total y no hay nada que escribir. */ .pos-montos:not(:empty){padding-bottom:10px} .pos-monto{display:flex;align-items:center;gap:10px;padding:6px 16px 0} .pos-monto span{flex:0 0 104px;font-size:12.5px;color:var(--gris)} .pos-monto .inp{flex:1;text-align:right} /* ---- Descuento del mostrador (02-Sep-2026) ---- */ /* El botón va discreto —no compite con COBRAR, que es lo que se toca 20 veces al día— pero visible: si hay que buscarlo, no se usa. */ .pos-desc-btn{width:100%;margin-top:10px;background:none;border:1px dashed var(--borde); padding:9px;cursor:pointer;font-family:var(--t-letra-texto);font-weight:700; font-size:11.5px;letter-spacing:.06em;color:var(--gris);transition:all .12s} .pos-desc-btn:hover{border-color:var(--tinta);border-style:solid;color:var(--tinta)} .pos-fila.pos-desc{color:#b8860b;font-weight:600} .pos-desc-x{background:none;border:none;color:#b23;font-size:10.5px;cursor:pointer; text-decoration:underline;padding:0 0 0 6px} .desc-tipo{display:flex;gap:8px;margin-bottom:16px} .desc-tipo button{flex:1;border:1px solid var(--borde);background:var(--bg);padding:11px 6px; cursor:pointer;font-family:var(--t-letra-texto);font-weight:700;font-size:12.5px; line-height:1.35;transition:all .12s} .desc-tipo button small{font-weight:400;font-size:10.5px;color:var(--gris)} .desc-tipo button.act{background:var(--tinta);color:var(--bg);border-color:var(--tinta)} .desc-tipo button.act small{color:#ffffffb0} .desc-lbl{display:block;font-size:12.5px;color:var(--gris);margin-bottom:6px} .desc-lbl small{color:var(--gris2)} /* La vista previa es la mitad del asunto: "10%" no dice cuánta plata se suelta. */ .desc-prev{margin-top:12px;padding:12px 14px;background:#fff8e6;border:1px solid #e8d9b8; display:flex;flex-direction:column;gap:5px;font-size:13.5px} .desc-prev div{display:flex;justify-content:space-between;align-items:baseline} .desc-prev b{font-family:var(--t-letra-texto);font-size:17px;font-weight:800} .desc-prev.cero{opacity:.45} .pos-cuadre{padding:9px 16px 0;font-size:13px;font-weight:600;min-height:20px} .pos-cuadre .bien{color:var(--verde)} .pos-cuadre .mal{color:#b23} /* Filas de la pantalla de devolución */ .dv-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--linea)} .dv-item:last-of-type{border-bottom:none} .dv-stock{cursor:pointer} /* Marcada = negra. Se pueden marcar varias a la vez. */ .pos-pago button.act{position:relative} .pos-efec{padding:0 16px 12px;display:none} .pos-efec.ver{display:block} .pos-dev{font-size:13px;margin-top:8px;padding:9px 11px;background:var(--bg);border:1px solid var(--borde)} .pos-dev b{font-size:17px;font-family:var(--t-letra-texto)} /* --- comprobante --- */ .tk{background:#fff;color:var(--tinta);width:302px;margin:0 auto;padding:20px 18px; font-family:var(--t-letra-texto);font-size:12px;line-height:1.5} .tk .logo{display:block;margin:0 auto 8px;width:54px;height:54px;object-fit:contain} .tk .marca{text-align:center;font-family:var(--t-letra-texto);font-weight:900;font-size:19px; letter-spacing:.04em} .tk .sub{text-align:center;font-size:10.5px;color:#666;margin-top:2px} .tk hr{border:none;border-top:1px dashed #bbb;margin:12px 0} .tk .rr{display:flex;justify-content:space-between;gap:10px;margin-bottom:4px} .tk .rr.b{font-weight:700;font-size:15px;font-family:var(--t-letra-texto)} .tk .it{margin-bottom:8px} .tk .it .n{font-weight:500} .tk .it .m{color:#666;font-size:11px} .tk .pie{text-align:center;font-size:10.5px;color:#666;margin-top:14px;line-height:1.7} .tk .red{font-weight:600;color:var(--tinta)} @media print{ body *{visibility:hidden} .tk,.tk *{visibility:visible} .tk{position:absolute;left:0;top:0;width:100%;padding:0} @page{margin:8mm} } /* --- categorias --- */ .kat-lista{background:var(--blanco);border:1px solid var(--borde)} /* Columna del % del socio (28-Ago-2026). Va antes de las acciones para que se lea junto al nombre de la categoría, que es como se piensa: «relojes, 8». */ .kat-socio{display:flex;align-items:center;gap:5px;white-space:nowrap} .kat-socio select{padding:8px 6px;text-align:center;font-weight:700; border:1px solid var(--borde);border-radius:6px;font-family:inherit;font-size:14px; background:var(--blanco);color:inherit;cursor:pointer} .kat-socio input::-webkit-outer-spin-button, .kat-socio input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .kat-socio input[type=number]{-moz-appearance:textfield;appearance:textfield} .kat-socio input.hereda{color:#999;font-weight:400} .kat-socio span{font-size:12px;color:#888} @media(max-width:640px){.kat-socio span{display:none}} .kat{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center; padding:14px 18px;border-bottom:1px solid var(--linea)} .kat:last-child{border-bottom:none} .kat:hover{background:#faf9f7} .kat.apagada .kat-nom b{opacity:.5} /* Prioridad escrita, no flechas: bajar seis puestos eran seis clics. */ .kat-orden input{width:56px;padding:8px 6px;text-align:center;font-weight:700; font-variant-numeric:tabular-nums} /* Fuera las flechitas del input numérico: al lado del texto centrado lo descuadran, y el número se escribe, no se sube de uno en uno. */ .kat-orden input::-webkit-outer-spin-button, .kat-orden input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .kat-orden input[type=number]{-moz-appearance:textfield;appearance:textfield} /* HOY / TODAS en las ventas del mostrador */ /* Buscador de pedidos */ .buscador{display:flex;gap:10px;align-items:center;margin-bottom:12px} .buscador .inp{flex:1} .dias{display:flex;gap:2px;background:var(--linea);padding:3px;border-radius:7px} .dias button{background:transparent;border:none;padding:7px 16px;cursor:pointer; font-family:var(--t-letra-texto);font-weight:700;font-size:11.5px;letter-spacing:.03em; color:var(--gris);border-radius:5px} .dias button.act{background:var(--blanco);color:var(--tinta);box-shadow:0 1px 2px #0000000f} /* Datos del cliente en el punto de venta */ .pos-aviso{font-size:12px;color:var(--ambar);line-height:1.4;margin-top:6px;min-height:0} .pos-aviso:empty{display:none} /* 🛵🚚 Envío desde el mostrador (30-Sep-2026): moto AZUL, transportadora NARANJA */ .pv-env-btns{display:flex;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--linea)} .pv-env{flex:1;border:2px solid;background:var(--blanco);border-radius:10px;padding:11px 6px; font-family:var(--t-letra-texto);font-weight:800;font-size:12.5px;letter-spacing:.04em;cursor:pointer; line-height:1.25;transition:background .15s,color .15s} .pv-env.moto{border-color:var(--moto);color:var(--moto)} .pv-env.transp{border-color:var(--naranja);color:var(--naranja)} .pv-env.moto.act{background:var(--moto);color:#fff} .pv-env.transp.act{background:var(--naranja);color:#fff} .pv-env-datos{margin-top:12px;padding:12px;border-radius:10px;border:2px solid} .pv-env-datos.moto{border-color:var(--moto);background:#1f63d60a} .pv-env-datos.transp{border-color:var(--naranja);background:#e8720c0d} .pv-env-tit{font-weight:800;font-size:14px;margin-bottom:10px} .pv-env-datos.moto .pv-env-tit{color:var(--moto)} .pv-env-datos.transp .pv-env-tit{color:var(--naranja)} .pv-env-tit span{font-weight:500;color:var(--gris);font-size:12.5px} .pv-env-pago{display:flex;gap:6px;margin:6px 0 12px} .pv-env-pago button{flex:1;border:1px solid var(--moto);background:var(--blanco);color:var(--moto); border-radius:8px;padding:9px 4px;font-weight:700;font-size:12px;letter-spacing:.04em;cursor:pointer} .pv-env-pago button.act{background:var(--moto);color:#fff} .pv-sug-caja{position:relative} .pv-sug{position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:30;background:var(--blanco); border:1px solid var(--borde);border-radius:8px;box-shadow:0 8px 24px #0002;max-height:240px;overflow:auto} .pv-sug button{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px; font-size:14px;cursor:pointer;border-bottom:1px solid var(--linea)} .pv-sug button:hover{background:var(--bg)} .pv-sug small{color:var(--gris2);font-size:11.5px} .pv-moto-info{font-size:12.5px;line-height:1.45;color:var(--tinta);margin:2px 0 6px} .pv-moto-info:empty{display:none} #pv-cobrar.moto{background:var(--moto);border-color:var(--moto)} #pv-cobrar.transp{background:var(--naranja);border-color:var(--naranja)} /* ── En el computador, LA VENTA no se mueve y scrollea ENTERA (25-Ago-2026) ── Lo pidió el dueño: al buscar una prenda se iba toda la página y el botón COBRAR quedaba fuera de la pantalla. Dos cosas que costaron un intento cada una: · `position:sticky` sola NO basta. Una caja pegajosa MÁS ALTA que la pantalla se desplaza igual, porque solo se queda fija mientras su propia caja está a la vista. Es el mismo bug que tuvo la barra negra el 21-Ago. La receta es: la fila mide UNA pantalla y cada columna lleva su propio scroll. · Este bloque tiene que ir AQUÍ, DESPUÉS de las reglas de arriba. Puesto antes, `.pos-caja{position:sticky}` y `.pos-items{max-height:38vh}` lo pisaban —misma especificidad, gana la última— y la mini factura se quedaba con una ventanita de scroll diminuta dentro de la columna. En celular no aplica: ahí las columnas van una debajo de otra. */ @media(min-width:901px){ .pos{height:var(--pos-alto, calc(100vh - 200px));align-items:stretch} .pos-col{overflow-y:auto;padding-right:8px;min-height:0} /* La columna entera es la que se mueve, de arriba abajo, de una sola pieza */ .pos-caja{position:static;height:100%;overflow-y:auto;min-height:0} /* El título negro se queda arriba aunque se baje dentro de la columna */ .pos-caja h3{position:sticky;top:0;z-index:2} /* Sin tope: la mini factura crece y el scroll lo lleva la columna */ .pos-items{max-height:none;overflow-y:visible} } /* Ajustes: los envíos agrupados como funcionan de verdad */ .ajuste-grupo{border:1px solid var(--borde);padding:16px 16px 18px;margin-bottom:16px;background:var(--blanco)} .ajuste-grupo h4{margin:0 0 14px;font-family:var(--t-letra-texto);font-weight:700;font-size:13px; letter-spacing:.04em} .ajuste-grupo h4 small{display:block;font-weight:400;font-size:12px;color:var(--gris2); letter-spacing:0;margin-top:3px} .ajuste-nota{font-size:12.5px;color:var(--gris);line-height:1.6;background:#00000006; padding:11px 13px;border-left:3px solid var(--borde);margin-top:12px} .pista{display:block;font-size:11.5px;color:var(--gris2);line-height:1.45;margin-top:5px} .ajuste-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer} .ajuste-check input{width:17px;height:17px;accent-color:var(--tinta);margin-top:2px;flex-shrink:0} .ajuste-check small{display:block;color:var(--gris);font-size:12.5px;line-height:1.5;margin-top:3px} /* Cartel de pedido nuevo: fijo arriba, por encima de todo */ #avisos-pedido{position:fixed;top:0;left:0;right:0;z-index:120;pointer-events:none} #avisos-pedido:empty{display:none} .cartel-pedido{display:flex;align-items:center;gap:14px;pointer-events:auto; background:var(--tinta);color:var(--bg);padding:14px 18px; box-shadow:0 6px 22px #00000035;animation:bajaCartel .28s ease-out} /* Contraentrega en ámbar: hay que COBRAR, y eso se mira distinto */ .cartel-pedido.contra{background:#7a4d0d} @keyframes bajaCartel{from{transform:translateY(-100%)}to{transform:translateY(0)}} .cp-txt{flex:1;min-width:0;line-height:1.4} .cp-txt b{display:block;font-family:var(--t-letra-texto);font-size:15px} .cp-txt span{display:block;font-size:12.5px;opacity:.82;margin-top:2px} .cartel-pedido .btn{background:var(--bg);color:var(--tinta);padding:10px 20px;flex-shrink:0} .cp-x{background:transparent;border:none;color:var(--bg);opacity:.6;cursor:pointer; font-size:17px;padding:4px 8px;flex-shrink:0} .cp-x:hover{opacity:1} .kat-cab{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:0 18px 8px; font-family:var(--t-letra-texto);font-weight:700;font-size:10.5px; letter-spacing:.1em;color:var(--gris2)} .kat-nom b{opacity:.5} .kat-mover{display:flex;flex-direction:column;gap:3px} .kat-mover button{background:var(--bg);border:1px solid var(--borde);cursor:pointer; font-size:9px;line-height:1;padding:3px 0;color:#555} .kat-mover button:hover:not(:disabled){background:var(--tinta);color:var(--bg)} .kat-mover button:disabled{opacity:.25;cursor:default} .kat-nom b{font-size:15px;font-weight:700;display:block} .kat-nom small{font-size:12px;color:var(--gris2);display:block;margin-top:2px} .kat-acc{display:flex;gap:14px;flex-wrap:wrap} .kat-acc .k-borrar{color:#b23;border-bottom-color:#b23} @media(max-width:700px){ .kat{grid-template-columns:56px 1fr;row-gap:10px} .kat-acc{grid-column:2} } /* --- productos --- */ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1px;background:var(--borde)} .pcard{background:var(--blanco);display:flex;flex-direction:column} .pcard .foto{width:100%;aspect-ratio:3/4;background:var(--rayaA);display:flex;align-items:center; justify-content:center;background-size:cover;background-position:center;position:relative} .pcard .foto em{font-style:normal;font-size:10px;color:var(--gris)} .pcard .txt{padding:14px;display:flex;flex-direction:column;gap:6px} .pcard .n{font-weight:500;font-size:14px} .pcard .p{color:var(--gris);font-size:13px} .pcard .s{color:var(--gris2);font-size:12px} .tallas-mini{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px} .tm{font-size:10px;border:1px solid var(--borde);padding:3px 6px;color:#555;background:var(--bg)} .tm.cero{opacity:.45;text-decoration:line-through} .tm.bajo{border-color:var(--ambar);color:var(--ambar)} .acciones{display:flex;gap:8px;margin-top:6px} .acciones button{flex:1;padding:8px;font-family:var(--t-letra-texto);font-weight:700;font-size:11px;cursor:pointer} .inactivo{position:absolute;top:8px;left:8px;background:var(--tinta);color:var(--bg);font-size:9px; font-family:var(--t-letra-texto);font-weight:700;padding:4px 8px;letter-spacing:.06em} /* --- formulario --- */ .form{max-width:680px;background:var(--blanco);border:1px solid var(--borde);padding:32px; display:flex;flex-direction:column;gap:20px} .dos{display:grid;grid-template-columns:1fr 1fr;gap:20px} .zona-foto{border:1px dashed color-mix(in srgb,var(--tinta) 25%,transparent);padding:26px;text-align:center;font-size:12px;color:#888; cursor:pointer;background:var(--bg)} .zona-foto:hover{border-color:var(--tinta);color:#555} .fotos-prev{display:flex;gap:10px;flex-wrap:wrap} .fotos-prev .fp{width:74px;height:96px;background-size:cover;background-position:center;position:relative; border:1px solid var(--borde)} .fotos-prev .fp button{position:absolute;top:2px;right:2px;background:var(--tinta);color:var(--bg); border:none;width:20px;height:20px;cursor:pointer;font-size:12px;line-height:1} .var-fila{display:grid;grid-template-columns:1fr 1fr 90px 40px;gap:10px;align-items:center} .var-fila.agotada .v-stock{border-color:var(--rojo);color:var(--rojo)} .var-fila.agotada::after{content:'AGOTADA · no se ofrece hasta que le sumes unidades';grid-column:1/-1; margin-top:-4px;font-size:11px;letter-spacing:.04em;color:var(--rojo)} .tallas-agot{font-size:11px;color:var(--rojo);margin:6px 0 2px} .pos-agotado{font-size:10.5px;letter-spacing:.12em;color:var(--gris2);font-weight:700} /* 🔎 Buscador de tallas. Era un