no se puede
seleccionar en CSS: no contiene .cell-main, y sin congelarlo aparecia la
columna equivocada encima del nombre congelado). El background es obligatorio
o el resto de la fila se transparenta por debajo al hacer scroll. */
td.col-anchor, th.col-anchor {
position: sticky;
left: 0;
z-index: 1;
box-shadow: 1px 0 0 var(--border);
}
td.col-anchor { background: var(--surface); }
th.col-anchor { z-index: 3; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border), 1px 0 0 var(--border); }
tbody tr:hover td.col-anchor {
background: var(--surface-2);
box-shadow: inset 2px 0 0 var(--accent), 1px 0 0 var(--border);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-num); }
td.actions { text-align: right; white-space: nowrap; }
/* ---------- Columnas a medida: ancho y visibilidad (js/table-enhance.js) ----------
Preferencia por tabla y por navegador, en localStorage. Mientras no se toca
nada no hay ninguna regla activa aqui y la tabla se reparte por contenido
como siempre. */
table.cols-sized { table-layout: fixed; }
/* Con el ancho fijado hay que decidir que pasa con lo que no cabe: elipsis en
las celdas de una linea. Las que ya envolvian (.cell-main/.cell-sub, con
white-space:normal) siguen partiendo linea, que es lo que quieres al
estrechar la columna del producto. */
table.cols-sized td { overflow: hidden; text-overflow: ellipsis; }
th.col-hidden, td.col-hidden { display: none; }
/* El tirador va DENTRO de su
, pegado al borde derecho, y no a caballo
sobre el borde: las cabeceras son sticky con el mismo z-index, asi que la
de la columna siguiente pinta encima (va despues en el DOM) y se comia la
mitad derecha del area agarrable — medido en vivo el 30-08, un tiron justo
en el borde no hacia nada. Por dentro si manda el z-index de aqui, que es
lo que hace falta para ganarle al boton de ordenar: ocupan el mismo sitio y
sin esto tirar de la columna la ordenaba. El
ya es position:sticky,
asi que sirve de referencia sin tocarlo. */
.col-resizer {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 100%;
z-index: 4;
cursor: col-resize;
touch-action: none;
}
.col-resizer::after {
content: "";
position: absolute;
top: 25%;
bottom: 25%;
right: 0;
width: 1px;
background: var(--border);
}
.col-resizer:hover::after { top: 0; bottom: 0; width: 2px; background: var(--accent); }
/* Mientras se arrastra manda el cursor de toda la pagina, y no se selecciona
media tabla de texto por el camino. */
body.col-resizing { cursor: col-resize; user-select: none; }
/* Reordenar columnas arrastrando la cabecera. Va DESPUES de th.col-anchor a
proposito: misma especificidad, gana el ultimo, y la marca de destino tiene
que verse tambien sobre la columna congelada. Se conserva el inset de abajo
porque es el borde de la cabecera sticky, no decoracion. */
th.col-dragging { opacity: 0.4; }
th.col-drop-before { box-shadow: inset 0 -1px 0 var(--border), inset 3px 0 0 var(--accent); }
th.col-drop-after { box-shadow: inset 0 -1px 0 var(--border), inset -3px 0 0 var(--accent); }
body.col-reordering { cursor: grabbing; user-select: none; }
/* El fondo opaco, el z-index y el translateZ NO son decoracion: tapan un fallo
de composicion de Chrome que aparecio al acotar .table-scroll. La celda
sticky de la columna ancla se pinta FUERA del recorte de la caja y asoma en
la franja que hay entre el borde de la tarjeta y el borde de la caja — que es
justo esta barra. Se veia como un renglon fantasma del articulo de debajo,
encima de la cabecera, y solo en algunas posiciones del scroll.
Descartado por medicion, no por intuicion: no es el backdrop-filter de la
tarjeta (quitarlo no lo arregla), ni el sticky de la celda (ponerla static
tampoco), ni `contain: paint` ni `isolation: isolate` sobre la caja. Lo unico
que lo tapa es una capa propia por encima: fondo opaco + z-index + una
promocion a capa (translateZ). El hit-test confirma que ahi no hay ningun
elemento: son pixeles sueltos del compositor. */
.cols-bar {
position: relative;
z-index: 6;
transform: translateZ(0);
background: var(--surface-2);
display: flex;
justify-content: flex-end;
gap: 8px;
padding: 8px 10px 0;
}
/* Cada boton de la barra en su hueco: el menu se cuelga del hueco y cae debajo
de SU boton. Colgado de la barra, los dos menus se abrian en el mismo sitio. */
.cols-bar__slot { position: relative; }
.cols-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 20;
min-width: 210px;
padding: 6px;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
}
.cols-menu label {
display: flex;
align-items: center;
gap: 8px;
padding: 5px 8px;
border-radius: 6px;
font-size: 13px;
cursor: pointer;
}
.cols-menu label:hover { background: var(--surface); }
.cols-menu input[type="checkbox"] { width: auto; margin: 0; }
.cols-menu__reset { width: 100%; margin-top: 6px; }
/* Vistas guardadas: nombre a la izquierda (aplica) y papelera a la derecha. */
.cols-menu__view { display: flex; align-items: center; gap: 2px; }
.cols-menu__apply {
flex: 1;
min-width: 0;
text-align: left;
background: none;
border: 0;
color: var(--text);
font: inherit;
font-size: 13px;
padding: 6px 8px;
border-radius: 6px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cols-menu__apply:hover { background: var(--surface); }
.cols-menu__empty { margin: 4px 8px 8px; color: var(--muted-2); font-size: 12px; }
/* La estrella de "predeterminada": apagada es un contorno del color del texto
secundario, encendida se llena y coge el amarillo del semaforo. */
.cols-menu__star { font-size: 15px; line-height: 1; color: var(--muted-2); }
.cols-menu__star:hover { color: var(--text); }
.cols-menu__star.activa { color: var(--yellow); }
/* Todo dato numerico verificable comparte fuente y alineacion por digito,
no solo las celdas de tabla explicitamente marcadas .num. */
.kpi-value, .mini-val, .delta-badge, .goal-text, .tax-result b,
.stats-inline b, .quality-count, .score-help__table td:first-child {
font-family: var(--font-num);
font-variant-numeric: tabular-nums;
}
.cell-main {
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-width: 180px;
max-width: 340px;
}
a.cell-main { cursor: pointer; }
a.cell-main:hover { text-decoration: underline; }
.cell-sub { color: var(--muted-2); font-size: 12px; margin-top: 2px; }
/* Rentabilidad: el color NO puede ser el unico canal. Con deuteranopia (~8% de
los hombres) verde y rojo son el mismo tono y esta columna no comunicaba nada.
Se marca con un triangulo, NO con +/-: el render es inconsistente (views.js
1641 y 2181 ya anteponen "+" a mano, 1642/1723/1725 no, y fmtMoney() ya trae
el "-" en los negativos), asi que un ::before con signo daria "++12,00" en un
sitio y "--12,00" en otro. El triangulo no colisiona con ninguno de los dos. */
.profit-pos { color: var(--green); font-weight: 700; }
.profit-neg { color: var(--red); font-weight: 700; }
.profit-pos::before { content: "\25B2\00A0"; font-size: 9px; vertical-align: 1px; }
.profit-neg::before { content: "\25BC\00A0"; font-size: 9px; vertical-align: 1px; }
/* ---------- Antigüedad de stock ---------- */
.aging-warm { color: var(--yellow); font-weight: 600; }
.aging-hot { color: var(--red); font-weight: 700; }
/* ---------- Badges ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.stock { background: var(--green-soft); color: var(--green); }
.badge.listed { background: var(--yellow-soft); color: var(--yellow); }
.badge.sold { background: var(--accent-soft); color: var(--accent-2); }
.badge.plain { background: var(--surface-3); color: var(--muted); }
.badge.plain::before { display: none; }
/* Aviso de artículo vendido en Shopify pendiente de retirar de otras
plataformas (Vinted, Wallapop...). Reutiliza el tono --red, igual
que .aging-hot, porque es una acción urgente. */
.badge.pending-delist-badge { background: var(--red-soft); color: var(--red); }
/* Etapas del pedido en Ventas (confirmado -> preparado -> enviado ->
recibido -> cerrado), un degradado de "recién confirmado" (azul) a
"cerrado" (verde), pasando por los pasos intermedios en ámbar/violeta. */
.badge.fulfillment-confirmado { background: var(--blue-soft); color: var(--blue); }
.badge.fulfillment-preparado { background: var(--yellow-soft); color: var(--yellow); }
.badge.fulfillment-enviado { background: var(--accent-soft); color: var(--accent-2); }
.badge.fulfillment-recibido { background: var(--yellow-soft); color: var(--yellow); }
.badge.fulfillment-cerrado { background: var(--green-soft); color: var(--green); }
.badge.fulfillment-devuelto { background: var(--red-soft); color: var(--red); }
.pending-delist-banner {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--surface);
border: 1px solid var(--red);
border-radius: var(--radius);
padding: 16px 20px;
margin: 0 0 20px 0;
}
.pending-delist-icon { color: var(--red); flex-shrink: 0; margin-top: 2px; }
.pending-delist-icon svg { width: 20px; height: 20px; }
.pending-delist-body { flex: 1; }
.pending-delist-title { color: var(--text); font-weight: 600; margin-bottom: 8px; }
.pending-delist-platforms { display: flex; gap: 8px; flex-wrap: wrap; }
.delist-platform-link {
font-size: 13px;
padding: 3px 10px;
border-radius: var(--radius-sm);
background: var(--red-soft);
color: var(--red);
text-decoration: none;
border: 1px solid transparent;
}
.delist-platform-link:hover { border-color: var(--red); }
/* ---------- Chip de plataforma (color + monograma) ---------- */
.platform-chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
.platform-dot {
width: 18px;
height: 18px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
flex: none;
}
/* ---------- SKU interno (para etiquetar el almacén físico) ---------- */
.internal-sku-badge {
display: inline-block;
font-family: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
color: var(--accent-2);
background: var(--accent-soft);
border-radius: 6px;
padding: 3px 7px;
white-space: nowrap;
}
/* ---------- Objetivo mensual (Dashboard) ---------- */
.goal-row { display: flex; align-items: center; gap: 16px; }
.goal-bar-track {
flex: 1;
height: 10px;
border-radius: 999px;
background: var(--surface-3);
overflow: hidden;
}
.goal-bar-fill {
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, var(--accent), var(--green));
transition: width 0.3s ease;
}
.goal-bar-fill.neg { background: var(--red); }
.goal-text { font-size: 13px; font-weight: 600; white-space: nowrap; }
.goal-text .muted { color: var(--muted-2); font-weight: 500; }
/* ---------- Chip de filtro (toggle) ---------- */
.toggle-chip {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--muted);
cursor: pointer;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 999px;
padding: 8px 14px;
white-space: nowrap;
}
.toggle-chip input { width: auto; margin: 0; }
.toggle-chip.active {
color: var(--text);
border-color: var(--yellow);
background: var(--yellow-soft);
}
/* ---------- Vista de Impuestos ---------- */
.tax-disclaimer {
display: flex;
align-items: flex-start;
gap: 12px;
background: var(--yellow-soft);
border: 1px solid rgba(242, 185, 75, 0.35);
border-radius: var(--radius);
padding: 14px 16px;
font-size: 13px;
line-height: 1.55;
color: var(--text);
}
.tax-disclaimer svg { width: 20px; height: 20px; color: var(--yellow); flex: none; margin-top: 1px; }
.year-label { font-weight: 700; font-size: 14px; padding: 0 6px; align-self: center; }
.tax-rows { display: flex; flex-direction: column; gap: 10px; }
.tax-row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-size: 13px;
color: var(--muted);
}
.tax-row b { color: var(--text); font-weight: 700; }
.tax-result {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
padding: 14px 16px;
border-radius: var(--radius-sm);
font-size: 14px;
font-weight: 600;
}
.tax-result b { font-size: 18px; }
.tax-result.due { background: var(--red-soft); color: var(--red); }
.tax-result.ok { background: var(--green-soft); color: var(--green); }
/* ---------- Badge de estado clicable (Inventario) ---------- */
.badge-trigger {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
display: inline-flex;
border-radius: 999px;
}
.badge-trigger:hover .badge { filter: brightness(1.18); }
.badge-trigger:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.status-choice { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.status-choice-opt { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.status-choice-opt input { width: auto; }
/* ---------- Miniaturas y galería de fotos ---------- */
.thumb {
border-radius: 8px;
object-fit: cover;
display: block;
cursor: pointer;
background: var(--surface-2);
border: 1px solid var(--border-soft);
}
.thumb-empty { display: grid; place-items: center; color: var(--muted-2); }
.thumb-empty svg { width: 16px; height: 16px; }
.photo-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.photo-thumb-wrap { position: relative; width: 64px; height: 64px; }
.photo-thumb {
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border);
display: block;
}
.photo-remove {
position: absolute;
top: -6px;
right: -6px;
width: 22px;
height: 22px;
background: var(--surface-3);
border: 1px solid var(--border);
}
.photo-remove svg { width: 12px; height: 12px; }
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 10px;
}
.gallery-img { width: 100%; border-radius: 10px; display: block; }
/* ---------- Publicaciones (listados multi-plataforma) ---------- */
.listings-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.listing-row {
display: grid;
grid-template-columns: 1fr 90px 1fr 140px auto;
gap: 8px;
align-items: center;
}
.shipping-checklist { display: flex; flex-direction: column; gap: 8px; }
.check-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check-row input { width: auto; margin: 0; }
.ship-progress {
display: inline-flex;
align-items: center;
gap: 5px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--muted);
border-radius: 999px;
padding: 5px 10px;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.ship-progress svg { width: 12px; height: 12px; }
.ship-progress.done { color: var(--green); border-color: transparent; background: var(--green-soft); }
/* ---------- Calidad de datos (Ajustes) ---------- */
.quality-list { display: flex; flex-direction: column; }
.quality-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid var(--border-soft);
font-size: 13px;
}
.quality-row:last-child { border-bottom: none; }
.quality-row.ok { color: var(--muted); }
.quality-row.warn { color: var(--text); }
.quality-count { font-weight: 700; }
.quality-row.ok .quality-count { color: var(--green); }
.quality-row.warn .quality-count { color: var(--yellow); }
/* ---------- Estado vacío ---------- */
.empty {
padding: 48px 24px;
text-align: center;
color: var(--muted);
}
.empty svg { width: 40px; height: 40px; color: var(--muted-2); margin-bottom: 10px; }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty p { margin: 0 0 16px; font-size: 13px; }
/* ---------- Modales ---------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(5, 6, 10, 0.72);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
display: grid;
place-items: center;
padding: 20px;
z-index: 100;
animation: fadeIn 0.15s ease;
}
.modal {
/* Mas opaco que .card (0,72 vs el 0,055 del vidrio de tarjeta): un
modal tapa texto denso y ya lleva el overlay oscuro detras, no
necesita ver tanto a traves. */
background: rgba(23, 18, 36, 0.82);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
border: 1px solid var(--glass-border);
border-radius: var(--radius);
width: 100%;
max-width: 520px;
max-height: calc(100vh - 60px);
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: var(--shadow);
animation: slideUp 0.18s ease;
}
.modal-wide { max-width: 640px; }
.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 0;
}
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px 22px 22px; }
.draft-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: var(--yellow-soft);
border: 1px solid rgba(242, 185, 75, 0.35);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-size: 12px;
color: var(--text);
margin-bottom: 16px;
}
.link-btn {
background: none;
border: none;
color: var(--accent-2);
font-weight: 700;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
text-decoration: underline;
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
/* Rejilla de las cinco comprobaciones de autenticidad en el formulario del
artículo: etiqueta + dos desplegables en una línea, nota corta debajo a
todo el ancho (antes solo ocupaba la columna de la etiqueta, quedaba
desalineada). En móvil se apila, que si no no cabe. */
.auth-grid { display: grid; gap: 8px; }
.auth-row { display: grid; grid-template-columns: 1fr 140px 1.4fr; gap: 8px; align-items: center; }
.auth-row__label { font-size: 13px; color: var(--muted); }
.auth-row > input { grid-column: 1 / -1; }
@media (max-width: 760px) {
.auth-row { grid-template-columns: 1fr; gap: 4px; }
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field.span2 { grid-column: 1 / -1; }
.field-label { font-size: 12px; font-weight: 600; color: var(--muted); }
/* ---------- Campos vacios: rojo sutil ----------
Sirve para ver de un vistazo que falta por rellenar cuando se repasa un
articulo a mano (p. ej. despues de darlo de alta desde el tasador, que no
siempre trae color/material/condicion). SOLO PINTA: no bloquea el guardado
ni cambia la validacion, porque hay campos que se dejan vacios a proposito.
Sin JS a proposito:
- :placeholder-shown se cumple exactamente cuando el campo esta vacio, y
todos los campos de texto/numero del formulario llevan placeholder.
- :has(option[value=""]:checked) coge los desplegables con la opcion vacia
("Sin categoria", "Sin asignar", "Sin especificar"...) seleccionada.
- Los nunca casan con :placeholder-shown (siempre
tienen valor) y los desplegables sin opcion vacia (condicion, moneda,
plataforma) tampoco se pintan nunca. Es lo que queremos.
- Se apaga al enfocar el campo para no molestar mientras escribes.
Si el navegador no soporta :has(), la regla del select se ignora sola y el
resto sigue funcionando. */
.form-grid :is(input, textarea):not(:focus):placeholder-shown,
.form-grid select:not(:focus):has(option[value=""]:checked) {
border-color: rgba(255, 93, 122, 0.42);
background-color: var(--red-soft);
}
/* Excepcion: el tipo de cambio solo tiene sentido si la compra fue en libras.
Con la moneda en EUR, vacio es lo CORRECTO, asi que no se marca (si no, la
ficha de un articulo completo se quedaba con una casilla roja para siempre).
ponytail: Chrome NO recalcula este :has() al cambiar la moneda con el
formulario ya abierto (comprobado: el selector deja de casar pero el estilo
se queda) — asi que si pasas de EUR a GBP sobre la marcha, el aviso rojo no
aparece hasta reabrir el formulario. Se asume: el caso normal (compra en
euros) queda bien, y quien elige GBP va a escribir el cambio a continuacion.
Si algun dia molesta, la salida es marcar la clase desde app.js al cambiar
la moneda, no mas CSS. */
.form-grid:has(select[name="purchaseCurrency"] option[value="EUR"]:checked)
input[name="purchaseFxRate"]:placeholder-shown {
border-color: var(--border);
background-color: var(--surface-2);
}
.modal-foot {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
.confirm-text { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 4px 0 0; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---------- Toasts ---------- */
#toast-root {
position: fixed;
bottom: 22px;
right: 22px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 200;
}
.toast {
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 11px 16px;
font-size: 13px;
font-weight: 500;
box-shadow: var(--shadow);
animation: slideUp 0.2s ease;
display: flex;
align-items: center;
gap: 9px;
}
.toast.ok { border-left: 3px solid var(--green); }
.toast.err { border-left: 3px solid var(--red); }
.toast.warn { border-left: 3px solid var(--yellow); }
/* ---------- Ajustes ---------- */
.settings-stack { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.setting-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.setting-row + .setting-row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.setting-info h4 { margin: 0 0 3px; font-size: 14px; }
.setting-info p { margin: 0; color: var(--muted); font-size: 12px; max-width: 380px; line-height: 1.5; }
.setting-row select { width: 130px; }
.stats-inline { display: flex; gap: 22px; flex-wrap: wrap; }
.stats-inline div { font-size: 13px; color: var(--muted); }
.stats-inline b { display: block; color: var(--text); font-size: 18px; margin-bottom: 2px; }
/* mobile-nav es