/* ============================================================================
TABLA DE DATOS — hoja COMPARTIDA por las cuatro pantallas del panel
============================================================================
La usan remates y representantes (Sistema Web) y operaciones y liquidaciones
(Sistema Administrativo). Vive acá y no en la hoja de un módulo porque antes
estaba en `remates.css`: tocar remates para arreglar remates rompía el
Sistema Administrativo, y nada en el código avisaba que eso era posible.
Nada de esto escribe un color literal: todo sale de tokens.css.
========================================================================= */
/* --- Contenedor de la lista ----------------------------------------------
No lleva fondo propio: la tabla se apoya en el fondo de la página. El borde
es lo que delimita la región. Tampoco lleva sombra — sobre fondo oscuro una
sombra no se ve, solo ensucia el borde. */
.lista-contenedor {
border: 1px solid var(--panel-borde);
border-radius: 10px;
overflow: hidden;
}
/* --- La tabla ------------------------------------------------------------ */
.tabla-panel {
width: 100%;
border-collapse: collapse;
background-color: var(--panel-superficie);
}
.tabla-panel th {
background-color: var(--panel-superficie-hundida);
color: var(--panel-texto);
font-size: var(--panel-texto-xs);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
padding: var(--panel-celda-y) var(--panel-celda-x);
border-bottom: 1px solid var(--panel-borde);
text-align: left;
}
/* El `color` se DECLARA, no se hereda del .
El body fija un color claro porque el fondo del panel es verde; cuando la
tabla era una tarjeta de papel blanco, ese color se heredaba hacia adentro y
toda celda cuyo texto no estuviera envuelto en un elemento con clase propia
salía blanco sobre blanco. Así se perdía la columna "Lugar" de remates.
Hoy la superficie coincide con la de la página y el heredado sería correcto,
pero se declara igual: si mañana una tabla cae dentro de otra superficie, la
herencia vuelve a ser una dependencia invisible y el bug reaparece sin que
nada en el CSS lo delate. */
.tabla-panel td {
padding: var(--panel-celda-y) var(--panel-celda-x);
color: var(--panel-texto);
border-bottom: 1px solid var(--panel-borde);
vertical-align: middle;
}
.tabla-panel tbody tr:last-child td {
border-bottom: none;
}
.tabla-panel tbody tr {
transition: background-color 0.15s ease;
}
.tabla-panel tbody tr:hover {
background-color: var(--panel-superficie-hover);
}
/* Alto mínimo de fila: es lo que la vuelve tocable con el pulgar. Va en la
celda y no en el `tr` porque un `tr` no acepta min-height. */
.tabla-panel td,
.tabla-panel th {
min-height: var(--panel-fila-min);
}
/* --- Texto dentro de las celdas ------------------------------------------ */
/* Celda de texto plano, sin envoltorio. No agrega nada al color —ya lo declara
`.tabla-panel td`— y existe para dejar la intención escrita: son las celdas
que antes iban como | pelado y salían blanco sobre blanco. */
.celda-texto {
color: var(--panel-texto);
}
.celda-fechahora strong {
font-size: var(--panel-texto-base);
color: var(--panel-texto);
display: block;
}
.hora-etiqueta {
font-size: var(--panel-texto-xs);
color: var(--panel-texto-tenue);
}
.det-hacienda {
font-weight: 600;
color: var(--panel-texto);
}
.det-cabezas {
font-size: var(--panel-texto-xs);
color: var(--panel-info-tinta);
font-weight: 600;
}
.det-titulo {
font-size: var(--panel-texto-xs);
color: var(--panel-texto-tenue);
font-style: italic;
}
/* --- Badges de estado -----------------------------------------------------
El vocabulario de color se conserva: verde publicado, ámbar borrador, rojo
cancelado. Lo que cambia es la luminosidad — antes eran fondos claros con
tinta oscura, que sobre una fila oscura se leen como parches encendidos.
Los fondos son opacos a propósito; el porqué está en tokens.css. */
.badge-pill {
display: inline-block;
padding: 0.3rem 0.7rem;
font-size: var(--panel-texto-xs);
font-weight: 700;
border-radius: 12px;
text-transform: uppercase;
letter-spacing: 0.03em;
border: 1px solid transparent;
white-space: nowrap;
}
.badge-borrador {
background-color: var(--panel-aviso-fondo);
color: var(--panel-aviso-tinta);
border-color: var(--panel-aviso-linea);
}
.badge-publicado {
background-color: var(--panel-ok-fondo);
color: var(--panel-ok-tinta);
border-color: var(--panel-ok-linea);
}
.badge-cancelado {
background-color: var(--panel-error-fondo);
color: var(--panel-error-tinta);
border-color: var(--panel-error-linea);
}
/* --- Celda de acciones ----------------------------------------------------
La celda es una CELDA: el flex va en un contenedor interno.
Antes el propio | era el contenedor flex, y eso lo saca de su
comportamiento de `table-cell`: perdía el `vertical-align` y los botones
quedaban pegados al borde superior de la fila en vez de centrados. */
.celda-acciones {
vertical-align: middle;
white-space: nowrap;
}
.acciones-grupo {
display: flex;
align-items: center;
gap: var(--panel-espacio-2);
}
/* --- Botones de acción --------------------------------------------------- */
.btn-accion-icono {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.3rem;
padding: 0.4rem 0.7rem;
font: inherit;
font-size: var(--panel-texto-xs);
font-weight: 600;
border-radius: var(--panel-radio);
border: 1px solid transparent;
cursor: pointer;
white-space: nowrap;
transition: filter 0.15s ease, background-color 0.15s ease;
}
/* `filter` y no `translateY`: mover el botón al pasar el cursor descolocaba la
fila entera cuando las acciones envuelven en dos líneas. */
.btn-accion-icono:hover {
filter: brightness(1.25);
}
.btn-accion-icono:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--panel-foco-anillo);
}
.btn-edit {
background-color: var(--panel-info-fondo);
color: var(--panel-info-tinta);
border-color: var(--panel-info-linea);
}
.btn-pub {
background-color: var(--panel-ok-fondo);
color: var(--panel-ok-tinta);
border-color: var(--panel-ok-linea);
}
.btn-despub {
background-color: var(--panel-aviso-fondo);
color: var(--panel-aviso-tinta);
border-color: var(--panel-aviso-linea);
}
.btn-canc {
background-color: var(--panel-error-fondo);
color: var(--panel-error-tinta);
border-color: var(--panel-error-linea);
}
.btn-del {
background-color: var(--panel-neutro-fondo);
color: var(--panel-neutro-tinta);
border-color: var(--panel-neutro-linea);
}
.btn-del:hover {
background-color: var(--panel-error-fondo);
color: var(--panel-error-tinta);
border-color: var(--panel-error-linea);
filter: none;
}
/* --- Angosto -------------------------------------------------------------
Mobile first en el proyecto es una regla, no una preferencia. Acá el orden
está invertido respecto de esa regla porque la tabla nace ancha: lo que se
declara es la degradación. Debajo de 900px las acciones pueden envolverse y
cada botón crece hasta el mínimo táctil, que es lo que hace la diferencia
entre tocar con el pulgar y tener que apuntar. */
@media (max-width: 900px) {
.celda-acciones {
white-space: normal;
}
.acciones-grupo {
flex-wrap: wrap;
}
.btn-accion-icono {
min-height: var(--panel-tactil-min);
padding: 0.4rem var(--panel-espacio-3);
}
.tabla-panel th,
.tabla-panel td {
padding: var(--panel-celda-y) var(--panel-espacio-3);
}
}
/* --- Resumen de un conjunto de operaciones -------------------------------
La franja de totales que va arriba del listado: operaciones, cabezas, bruto y
comisión de TODO lo filtrado, no de las filas visibles.
Existe porque es el dato que la empresa venía sacando a mano con el filtro y
el `SUBTOTAL()` del Excel, y porque sin él un listado con tope se lee como si
fuera todo lo que hay. */
.resumen-totales {
display: flex;
flex-wrap: wrap;
gap: var(--panel-espacio-6);
padding: var(--panel-espacio-4) var(--panel-espacio-6);
margin-bottom: var(--panel-espacio-4);
background: var(--panel-superficie-hundida);
border: 1px solid var(--panel-borde);
border-radius: var(--panel-radio);
}
.resumen-dato {
display: flex;
flex-direction: column;
gap: 2px;
}
.resumen-rotulo {
font-size: var(--panel-texto-xs);
color: var(--panel-texto-tenue);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.resumen-valor {
font-size: var(--panel-texto-lg);
font-weight: 700;
color: var(--panel-texto);
}
/* Que el listado esté recortado tiene que verse. Una lista truncada en silencio
se lee como "esto es todo lo que hay", que es el fallo silencioso de siempre. */
.aviso-recorte {
padding: var(--panel-espacio-3) var(--panel-espacio-6);
margin-bottom: var(--panel-espacio-4);
border-radius: var(--panel-radio);
background: var(--panel-aviso-fondo);
color: var(--panel-aviso-tinta);
border: 1px solid var(--panel-aviso-linea);
font-size: var(--panel-texto-sm);
}
/* --- Barra de filtros ------------------------------------------------------
Acota lo que se pide a la base. No es una comodidad de pantalla: sin filtro,
un mes son ~1.000 operaciones y un año ~12.000, y la consulta las trae todas
en cada visita. */
.barra-filtros {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--panel-espacio-3);
margin-bottom: var(--panel-espacio-4);
}
.filtro-campo {
display: flex;
flex-direction: column;
gap: var(--panel-espacio-1);
min-width: 140px;
}
.filtro-rotulo {
font-size: var(--panel-texto-xs);
color: var(--panel-texto-tenue);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Mobile first: en el celular cada filtro ocupa la fila entera, si no quedan
tres controles de 100px que no se pueden tocar con el dedo. */
@media (max-width: 640px) {
.filtro-campo { min-width: 100%; }
}
/* --- Conmutador de vistas --------------------------------------------------
Dos vistas sobre los mismos datos (Detalle / Resumen, Larga / Matriz). Es un
conmutador y no dos botones sueltos porque las opciones son excluyentes: se
tiene que ver cuál está activa sin leer el rótulo. */
.conmutador-vista {
display: inline-flex;
border: 1px solid var(--panel-borde-control);
border-radius: var(--panel-radio);
overflow: hidden;
}
.btn-vista {
padding: 0.45rem var(--panel-espacio-4);
min-height: var(--panel-tactil-min);
border: 0;
background: transparent;
color: var(--panel-texto-tenue);
font-family: inherit;
font-size: var(--panel-texto-sm);
cursor: pointer;
}
.btn-vista:hover { color: var(--panel-texto); }
.btn-vista:focus-visible {
outline: 2px solid var(--panel-verde-600);
outline-offset: -2px;
}
/* El texto sobre naranja sale del token, no de un `#fff`: el contraste de ese par
está anotado como pendiente en ESTILO.md, y escrito literal este botón no
seguiría el cambio el día que se resuelva tocando el token. */
.btn-vista.activo {
background: var(--panel-naranja);
color: var(--panel-texto);
font-weight: 600;
}
/* --- Tabla de resumen por comisionista -------------------------------------
Diez columnas con importes de once dígitos no entran en ninguna pantalla. El
scroll horizontal vive ACÁ ADENTRO y no en el cuerpo de la página: una página
que se corre en horizontal se siente rota, un contenedor que scrollea no. */
.tabla-ancha {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tabla-resumen {
min-width: 900px;
font-size: var(--panel-texto-sm);
}
/* La columna del nombre queda fija al correr la tabla a lo ancho.
Sin esto, en un celular llegar hasta "TOTAL comisión" —la columna 10 de 10— saca de
pantalla la columna 1, y queda un importe de plata sin saber de quién es. Es el único
desenlace realmente malo de una tabla que no entra: no que se lea incómoda, sino que se
le atribuya la comisión a la persona equivocada.
El fondo es OPACO a propósito: una celda sticky sin fondo propio deja ver el texto que le
pasa por debajo. Por eso cada tipo de fila repite el suyo. */
.tabla-resumen th:first-child,
.tabla-resumen tbody tr:not(.fila-divisor) td:first-child {
position: sticky;
left: 0;
z-index: 1;
background-color: var(--panel-superficie);
}
/* La esquina —encabezado Y primera columna— se pega en los dos ejes, así que tiene que
quedar por encima de las dos bandas que se cruzan debajo de ella. */
.tabla-resumen thead th:first-child {
background-color: var(--panel-superficie-hundida);
z-index: 4;
}
/* Llevan `tr` a propósito: la regla genérica de arriba usa `tr:not(.fila-divisor)`, y ese
`:not()` le suma la especificidad de su argumento. Sin el `tr` acá, estas dos pierden y la
celda fija de un subtotal sale con el fondo de una fila común — un bloque de otro color
pegado al costado de su propia fila. Es la misma trampa de especificidad que ya había
dejado sin efecto a `.celda-num` frente a `.tabla-panel th`. */
.tabla-resumen tbody tr.fila-subtotal td:first-child {
background-color: var(--panel-superficie-hover);
}
.tabla-resumen tbody tr.fila-total td:first-child {
background-color: var(--panel-superficie-hundida);
}
/* El encabezado acompaña al scroll vertical: con ~40 comisionistas por mes, a mitad de tabla
ya no se sabe qué columna es cuál. */
.tabla-resumen thead th {
position: sticky;
top: 0;
z-index: 3;
}
/* Los números se leen comparando de arriba abajo, así que van alineados a la
derecha y con cifras de ancho fijo: si no, las columnas bailan y comparar dos
filas obliga a leer dígito por dígito. */
.tabla-panel .celda-num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.tabla-panel .celda-destacada { font-weight: 700; color: var(--panel-texto); }
/* Una persona que no operó ese mes: raya, no `$0`. Un cero diría que operó por
cero, que es otra cosa. */
.tabla-panel .celda-vacia { color: var(--panel-texto-tenue); }
.tabla-panel .th-mes { text-align: center; }
/* Encabezado clicleable. El orden por defecto —comisión de mayor a menor— es el que hace
que dos filas de la misma persona mal escrita queden pegadas; reordenar es una vista
más, no la principal. Por eso la columna activa se marca, para que se sepa cuándo se
está mirando otra cosa. */
.tabla-panel .th-ordenable {
cursor: pointer;
user-select: none;
}
.tabla-panel .th-ordenable:hover { color: var(--panel-texto); }
.tabla-panel .th-ordenable:focus-visible {
outline: 2px solid var(--panel-verde-600);
outline-offset: -2px;
}
.tabla-panel .th-ordenado { color: var(--panel-naranja-claro); }
/* Subtotal de una persona cuando el período abarca varios meses. */
.fila-subtotal td {
background: var(--panel-superficie-hover);
font-weight: 600;
border-top: 1px solid var(--panel-borde-control);
}
/* Las filas TOTAL van siempre con importes exactos y tienen que despegarse del
resto: son las que alguien pone al lado de la planilla para verificar que el
sistema cierra. */
.fila-total td {
background: var(--panel-superficie-hundida);
font-weight: 700;
border-top: 2px solid var(--panel-borde-control);
}
.fila-total-periodo td {
color: var(--panel-texto);
border-top: 3px solid var(--panel-naranja);
}
/* --- El divisor de zonas ---------------------------------------------------
Debajo de la línea van las operaciones sin comisionista. Tienen que estar
—son ~17 % de las operaciones y sin ellas el TOTAL no cierra contra la
planilla— pero no son personas y no se revisan igual.
Y son DOS cosas distintas, no una: `NADIE` y las ferias son una decisión
tomada (gris, contexto); una atribución pendiente es una operación cuyo
nombre no se pudo resolver y que tiene plata que todavía no es de nadie
(rojo, tarea). Pintarlas iguales haría que las segundas no se resuelvan
nunca. */
.fila-divisor td {
padding: var(--panel-espacio-2) var(--panel-espacio-6);
font-size: var(--panel-texto-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.divisor-sin td {
background: var(--panel-neutro-fondo);
color: var(--panel-neutro-tinta);
border-top: 2px solid var(--panel-neutro-linea);
}
.divisor-pendiente td {
background: var(--panel-error-fondo);
color: var(--panel-error-tinta);
border-top: 2px solid var(--panel-error-linea);
}
.fila-zona-sin td { color: var(--panel-texto-tenue); }
.fila-zona-pendiente td { color: var(--panel-error-tinta); }
/* El alcance del resumen va escrito en la pantalla: comprende lo ya liquidado,
así que NO es el saldo por pagar. Son dos números distintos y confundirlos
es plata. */
.leyenda-resumen {
padding: var(--panel-espacio-2) var(--panel-espacio-4);
margin-bottom: var(--panel-espacio-3);
border-left: 3px solid var(--panel-info-linea);
background: var(--panel-info-fondo);
color: var(--panel-info-tinta);
font-size: var(--panel-texto-xs);
border-radius: var(--panel-radio);
}
/* --- Impresión --------------------------------------------------------------
Todavía NO existe la exportación a PDF, y esto no la reemplaza. Lo que hace es
mantener vivo el camino barato: si la pantalla imprime decente con CSS, se
puede evaluar `@media print` contra vendorizar una librería de ~500 KB, en vez
de quedar casado con la librería por haber armado la tabla con divs.
En papel los importes van SIEMPRE exactos: no hay cursor que consultar, y un
documento que queda no puede llevar números abreviados. */
@media print {
.barra-filtros,
.seccion-header-acciones,
.btn-volver-dash,
.panel-header,
.celda-acciones { display: none !important; }
.tabla-ancha { overflow-x: visible; }
.tabla-resumen {
min-width: 0;
width: 100%;
font-size: 9pt;
}
.tabla-panel th,
.tabla-panel td {
color: var(--panel-papel-tinta);
background: transparent !important;
border-color: var(--panel-papel-linea);
}
/* Que una persona no quede partida entre dos hojas. */
.fila-subtotal,
.fila-total { break-inside: avoid; }
}
|