/* ============================================================================
Juicy — Dashboard Design System · ARCHIVE (tabla de listado)
----------------------------------------------------------------------------
Figma: "Archive Pages" (1:4074), sección Archive Table (1:5010):
Archive Table Header Col Type (Text|Icon|Checkbox) × Align h=50
Archive Table Col Type (Text|Action|Checkbox|Badge) × Align h=75
Empty Table Row · Archive Table (44:3314, el ensamblado)
NO es ds/table.css. Aquélla es la tabla de WIDGETS (header `surface-sunken`,
filas pegadas con borde). Ésta es la de las Archive Pages: header SLATE, filas
como tarjetas blancas separadas 10px, con selección y acciones en lote. El
dueño ya confirmó (2026-07-16) que son dos componentes, y el ensamblado del
Figma lo cierra con aritmética: 50 (header) + 10 (hueco) + 75 (fila) = 135,
los 135 exactos que declara.
LA BUENA NOTICIA: el producto YA ERA ESTO. Medido antes de tocar nada —
header 50 y `#939FAC`, 12/400 uppercase, hueco de 10 (`border-spacing`), fila
75 en órdenes, clientes y usuarios. Esta fase no rediseña: SACA el componente
de main.css, le pone nombre y arregla los tres puntos donde sí divergía
(ver notas 2, 3 y 4).
POR QUÉ LAS CELDAS SE ESTILAN POR ELEMENTO (`thead th`, `tbody td`) Y NO CON
UNA CLASE POR CELDA, como sí hace ds/table.css: son 254 celdas en 13 archives
(125 th + 129 td) contra las 12 de la tabla de widgets. Una clase en cada una
no añade ni un dato — un `th` dentro de `.archive-table` es la celda de header
y no puede ser otra cosa — y sí añade 254 sitios donde olvidarla. El
combinador está ACOTADO a la raíz del componente, que es justo lo contrario
del pecado de main.css (`input[type=text]` global). Las VARIANTES de celda sí
llevan clase, porque ahí sí hay una decisión. Queda la incoherencia con
ds/table.css: convergerla es de F3, con sus 12 sitios.
============================================================================ */
/* ---- Navegación ------------------------------------------------------------ */
/* Figma: "Archive Navigation" (1:4075). La fila de arriba: estatus a la
izquierda, paginación a la derecha. */
.archive-nav {
margin-bottom: 10px;
}
/* Los estatus. Figma: "Navigation Item" (1:4087), 16 de alto, tres estados:
Active → texto normal + subrayado (la vista actual)
Waiting → `text-muted` (el default)
Error → rojo (la Papelera)
El producto ya los tenía los tres — lo único que cambia es que el rojo deja
de ser `.text-red` (un color) y pasa a ser `.tone-error` (un rol). */
.archive-status {
position: relative;
display: flex;
gap: 15px;
color: var(--text-muted);
font-size: 12px;
}
.archive-status > * {
position: relative;
color: var(--tone-line);
}
:where(.archive-status > *) {
--tone-line: var(--text-muted);
}
/* El separador `|`. `Is Last=Yes` en Figma no es una variante: es no tener
hermano después. */
.archive-status > *:not(:last-child)::after {
content: '|';
position: absolute;
top: 0;
right: -8px;
}
.archive-status .is-current {
color: var(--text-primary);
text-decoration: underline;
}
/* El conteo entre paréntesis: es un dato de apoyo, no el nombre del estatus. */
.archive-status__count {
color: var(--text-muted);
font-weight: 400;
}
/* Figma: "Archive Pagination" (1:4109) — 247×30. Las pastillas son icon-chips
`--sm` (30) y el número es un campo chico. Ver nota 8. */
.archive-pagination {
gap: 7px;
font-size: 12px;
}
.archive-pagination .icon-chip--outline{
--stroke:1px;
}
/* El ÚNICO campo del sistema que no mide 40: la paginación entera mide 30, y un
campo de 40 aquí la rompería. No es una excepción del DS — es que este control
pertenece a la paginación, no al formulario.
Va con combinador hijo (0,2,0) por lo mismo que ds/field.css nota 27: la regla
de ELEMENTO de main.css (`input[type=number]`, 0,1,1) le gana a una clase sola
aunque esta hoja cargue después. El nombre viejo lo sabía y por eso era
`input.current_page_input`; se me fue al renombrar y lo cazó la foto. */
.archive-pagination > .archive-pagination__page {
width: 50px;
height: var(--control-sm);
text-align: center;
}
/* ---- Toolbar --------------------------------------------------------------- */
/* Figma: "Archive Table Actions" (1:4159). Y lo que dice es importante: sus
controles son INSTANCIAS del propio DS a 40 (Select Field 190×40, button
116×40, Search Input 192×40, icon-chips 40×40). El producto los aplastaba a
35 con overrides. Ver nota 9. */
.archive-toolbar {
padding: 15px;
background: var(--surface-page);
border-radius: var(--radius-md);
}
/* Los grupos del toolbar. Un solo gap: el Figma dibuja 5 en el de lote y 10 en
el de búsqueda, pero eso es la geometría de un mock (ver nota 10). */
.archive-toolbar__group {
display: flex;
align-items: center;
gap: 7px;
}
.archive-toolbar__filters {
display: flex;
align-items: center;
gap: 5px;
}
/* El select de "buscar por". El Figma dice 190; el producto 170 y cabe igual. */
.archive-toolbar__search select {
width: 170px;
}
/* La barra vertical entre la búsqueda y las acciones. Era un `
` a pelo
reposicionado a mano; aquí es lo que es: un separador. */
.archive-toolbar__divider {
width: var(--stroke-thin);
height: var(--control-md);
margin: 0 0 0 10px;
border: none;
background: var(--border-default);
}
/* ---- Tabla ---------------------------------------------------------------- */
.archive-table {
width: 100%;
margin: 5px 0;
border-collapse: separate;
border-spacing: 0 10px; /* el hueco entre filas del Figma */
}
/* El alto lo declara el componente y el contenido se centra — el patrón de
ds/table.css. No es cosmético: th/td traen padding propio del navegador, y
así el chip de acción puede bajar de 35 a los 30 del DS sin encoger la fila
(hoy el 75 SALE de 35+20+20; ver nota 2). */
.archive-table th,
.archive-table td {
padding-block: 0;
vertical-align: middle;
}
.archive-table thead th {
height: 50px;
padding-inline: 15px;
background: var(--action-neutral-lv3-default); /* #939FAC — nota 4 */
color: var(--text-on-color);
font-size: 12px;
font-weight: 400;
line-height: normal;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
/* El header es una sola pieza redondeada: solo sus extremos llevan radio. */
.archive-table thead th:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.archive-table thead th:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.archive-table tbody td {
position: relative;
height: 75px;
padding-inline: 15px;
background: var(--surface-page);
color: var(--text-primary);
font-size: 13px;
font-weight: 400;
line-height: 1.3;
}
/* Un enlace dentro de una celda es el nombre del registro: pesa más que el
dato de al lado. Los botones no (traen su propio peso del componente). */
.archive-table tbody td a:not(.btn) {
font-weight: 500;
}
/* ---- Variantes de celda ---------------------------------------------------- */
/* Selección. 30 de ancho: solo tiene que caber el checkbox (18). */
.archive-table__check {
width: 30px;
}
/* Acción: el `...` que abre el menú de fila. 35 de ancho para el chip de 30
(--sm) más aire. El chip NO se define aquí: es un icon-chip (nota 2). */
.archive-table__action {
width: 35px;
text-align: center;
}
.archive-table thead th.archive-table__action {
font-size: 20px;
}
/* Imagen del registro. La celda mide EXACTO lo que la imagen (60) y no lleva
padding: la columna no ocupa más de lo que enseña.
El selector va anidado (0,2,0) para ganarle al `padding-inline` de
`.archive-table tbody td` (0,1,2) — una clase suelta perdía. Ver nota 12.
La fila tampoco crece por ella (nota 3). */
.archive-table .archive-table__image {
width: 60px;
padding-inline: 0;
}
.archive-table__image img {
display: block;
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
/* ---- Tabla vacía ----------------------------------------------------------- */
/* Figma: "Empty Table Row" (12:4488) — 103 de alto con el mensaje centrado.
En el producto el mensaje vive fuera de la tabla y `.no_post` lo pinta desde
1608; aquí solo se le pone nombre. Ver nota 5. */
.archive-empty {
font-size: 12px;
font-style: italic;
color: var(--text-muted);
}
/* ---- Totales --------------------------------------------------------------- */
/* La fila de totales del archive (una `.archive-table` de una sola fila). */
.archive-totals {
margin-bottom: -10px;
}
.archive-totals__label {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
color: var(--text-muted);
}
.archive-totals__value {
font-size: 20px;
font-weight: 600; /* nota 6 */
line-height: 1.4;
color: var(--text-primary);
}
.archive-totals td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.archive-totals td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
/* ---- El scroll de la tabla en móvil ----------------------------------------
Vino de main.css (2026-07-26). La tabla de una archive tiene siete columnas y en
un teléfono no cabe: este envoltorio le da SU PROPIO scroll horizontal para que
no empuje el ancho de la página. Sin él, el usuario arrastra la pantalla entera
y pierde de vista la barra lateral.
Vive aquí porque es parte del componente archive, y porque el front nuevo pinta
la misma tabla y no carga main.css. */
@media (max-width: 768px) {
.archive_table_wrapper {
overflow-x: auto;
overflow-y: hidden;
}
.archive_table_wrapper::-webkit-scrollbar { height: 5px; }
.archive_table_wrapper::-webkit-scrollbar-thumb { background: rgb(0 0 0 / 5%); }
.archive_table_wrapper::-webkit-scrollbar-thumb:hover { background: rgb(0 0 0 / 10%); }
}
/* ============================================================================
NOTAS
1. EL PRODUCTO YA MEDÍA LO QUE DICE EL FIGMA. Antes de escribir una línea:
header Figma 50 · producto 50 ✓ y los dos #939FAC, 12/400 up
hueco filas Figma 10 · producto 10 ✓ (border-spacing 0 10px)
fila Figma 75 · producto 75 ✓ en órdenes, clientes, usuarios
Igual que pasó con los campos ("main.css estaba ~80% alineado"), la
premisa de que esto había que rediseñarlo era falsa. Lo que faltaba era
que tuviera NOMBRE y viviera fuera de main.css.
2. EL CHIP DE ACCIÓN: 35 a mano → 30 del DS, y la fila NO se mueve.
`.actions_button` era un componente clonado (35px, círculo, `neutral-200`,
hover a `neutral-500`) que resulta ser EXACTO
`.icon-chip.icon-chip--sm.icon-chip--round.icon-chip--soft.tone-neutral-lv3`
— lo mismo que ds/table.css ya documenta para la acción de su celda, y lo
que mide el Figma (30×30, fondo #E5EAEF, glifo #939FAC).
OJO con la trampa: hoy el 75 de la fila SALE de `35 + 20 + 20`, así que
bajar el chip a 30 la habría encogido a 70. Por eso el alto se DECLARA
(75) y el contenido se centra: el chip encoge y la fila se queda donde el
Figma dice. Y el pico de su menú se recentra solo — `--sm` ya tiene su
regla en ds/bubble.css.
(Nota vieja de ds/table.css: decía que la acción del archive era CYAN.
Medido sobre el ensamblado real: es #E5EAEF. El cyan salía de otro frame.)
3. LA IMAGEN YA NO ESTIRA LA FILA. `productos` era el único archive con filas
de 90 en vez de 75, y no por diseño: su imagen (60) traía `padding: 15px 2px`
→ 60+30 = 90. El Figma no tiene columna de imagen, así que no dicta; pero
tampoco hay razón para que UN archive tenga las filas más altas que los
otros cinco. Con el alto declarado, la imagen de 60 se centra en los 75.
Se le fija también el alto (era `height:auto`): una imagen no cuadrada
seguiría estirando la fila.
4. CONTRASTE, DECLARADO: blanco sobre `#939FAC` = 2.69:1, reprueba AA. Ya
estaba anotado en ds/table.css como "problema de ESE componente, va cuando
toque Archive Pages" — y aquí está. NO se cambia: el dueño decidió que el
contraste no es prioritario ("podemos ajustarlo luego"), y es la misma
decisión que dejó el cyan primario en 2.54. Se cablea a
`action/neutral-lv3/default`, que es el token que el Figma liga, para que
el día que se decida subirlo se mueva desde la capa semántica.
5. LA TABLA VACÍA DEL FIGMA ES UNA FILA (103 de alto, mensaje centrado); en
el producto el mensaje va FUERA de la tabla. No se fuerza: cambiar dónde
vive el mensaje es markup en 13 archives para ganar nada. `.archive-empty`
solo le pone nombre a lo que ya hacía `.no_post`. (`.no_content` era su
gemela con CERO usos: muerta.)
6. `font-weight: 600` en el valor de los totales, transcrito tal cual — PERO
el tema no carga el 600 de Montserrat (300;400;500;700;900), así que
renderiza 700. Es el mismo hueco de fuente ya detectado en el dashboard.
No se toca aquí: decidirlo (¿500 o 700?) es del dueño.
7. NO HAY hover de fila, ni fila seleccionada, ni orden por columna. La tabla
TIENE checkboxes de selección, así que "fila seleccionada" es un estado que
el diseño debería definir y no define. Mismo hueco que ya anotó
ds/table.css nota 8.
---- CHROME (navegación + toolbar) -----------------------------------------
8. LA PAGINACIÓN YA ERA 30 — pero a escondidas. El markup pedía un icon-chip
de 40 y main.css lo encogía por CSS (`.pagination .icon-chip{width:30}`).
El Figma dice 30 y el DS tiene la clase para decirlo: `--sm`. Ahora el
markup dice el tamaño que quiere y el override muere. Mismo resultado en
pantalla, una mentira menos.
Sus pastillas siguen en `--outline` (fondo transparente) contra el
`#F4F7F9` que pinta el Figma: es el MISMO color del fondo de la página
donde vive la paginación, así que se ven idénticas. No se toca.
9. EL TOOLBAR ESTABA DESALINEADO CONSIGO MISMO, y nadie lo había visto. El
Figma instancia los componentes del DS a 40 (Select 190×40, button 116×40,
Search 192×40, icon-chips 40×40). El producto los aplastaba a 35 con
`.archive_header input/select{height:35px}` — pero SOLO a los campos, no a
los botones. Medido antes de tocar:
select de lote 35 · botón EJECUTAR 40
select de buscar 35 · input de buscar 35 · su botón 40
chips de filtro 40
O sea: selects de 35 pegados a botones de 40, y un buscador cuyo input y
cuyo botón medían distinto. Subirlos a 40 (aprobado por el dueño) no es
solo "seguir el DS": es lo que ALINEA la barra. De paso muere
`.archive_bulk_actions .btn{padding:10px}`, que aplastaba el botón del DS
(20) — y con sus 20 el botón mide los 116 exactos del Figma.
10. LOS GAPS SE QUEDAN COMO ESTÁN (7 en los grupos, 5 en los filtros). El
Figma dibuja 5 en el grupo de lote y 10 en el de búsqueda: dos números
distintos para la misma cosa, medidos de un autolayout de mock. No hay
variable que leer, así que manda lo que el producto tiene medido y
funciona. Si algún día se decide, es una línea.
11. EL BUSCADOR ES EL `.search` DE ds/field.css. Era un clon: `.search_input_wrapper`
+ un icon-chip de botón pegados con border-radius a mano, exactamente el
grupo partido que el DS ya define (input + botón compartiendo caja). Su
variante de "limpiar" (la X roja) se compone con `tone-error`.
12. LA CELDA DE IMAGEN: MI PROPIA TRAMPA DE ESPECIFICIDAD, y la cazó el dueño
mirando la pantalla. Estilar las celdas por elemento sale barato (nota de
la cabecera) pero tiene un precio: `.archive-table tbody td` es (0,1,2), o
sea que le GANA a cualquier modificador de celda que sea una clase suelta
(0,1,0). Con `.archive-table__image { padding-inline: 0 }` el padding de 15
sobrevivía, y de ahí salía una cadena que ninguna medición mía habría
atrapado porque yo medía la FILA, no la imagen:
celda 60 − padding 30 = 30 de content box
el reset trae `img{max-width:100%}` → la foto se capaba a 30 de ancho
su `height:60` no se capaba → imágenes APLASTADAS a 30×60
Por eso este modificador va anidado (0,2,0). Los otros dos (`__check`,
`__action`) no lo necesitan: solo declaran `width`, que la regla de
elemento no toca. Si un modificador nuevo pisa `padding` o `background`,
necesita el anidado.
============================================================================ */
/**
* EL INTERRUPTOR DE "DESTACADO" de una fila del archive.
*
* Vivía en `main.css`, que el front nuevo NO importa a propósito (importa el DS). Se MUEVE, no se
* copia: dos copias de la misma regla es como acaban diciendo cosas distintas. Es el mismo defecto
* que en el historial de órdenes se pagó cinco veces, una por una; aquí lo encontró el barrido de
* `main.css` que se hace ANTES de escribir nada de la pantalla — de una sola vez y en un comando.
*
* El disparo AJAX va por `data-click-action`, no por la clase: esto es solo el estilo.
*
* Medido en la pantalla de PHP antes y después de moverla: 30x30, `inline-flex`, centrado en los
* dos ejes, 16px y cursor de puntero — idéntico. `main.css` carga DESPUÉS del DS, así que moverla
* la adelanta en la cascada; sin selectores que compitan, no cambia nada.
*/
.archive_item_featured_toggle {
width: 30px;
height: 30px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 16px;
cursor: pointer;
}