/* ========================================================================== Cuentas por Cobrar — hoja de estilos Estética: documento contable. Papel, tinta, reglas finas y números que alinean en columna. La única pieza llamativa es el total: ahí va el peso. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Variables -------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* ---- Paleta ---- Neutros de la rampa Slate, marca índigo, y color SOLO para el estado de una factura. **LA MARCA ES ÍNDIGO Y EL ROJO ES SOLO "VENCIDA".** Antes eran el MISMO `#D90429` a propósito y la diferencia la hacía la forma. Con la marca índigo esa regla desaparece y queda una más simple: **el rojo no significa nada más que "se te pasó la fecha"**. **LOS COLORES VIENEN DE UNA REFERENCIA Y ESTÁN OSCURECIDOS DONDE HACÍA FALTA.** La referencia usaba `#6366F1` de marca, `#10B981` de verde y `#EF4444` de rojo, y no pasaban accessibility: #6366F1 sobre el cuerpo 4.12 ✗ → #4F46E5 5.80 ✓ #10B981 sobre el cuerpo 2.34 ✗ → #047857 5.06 ✓ #EF4444 sobre el cuerpo 3.47 ✗ → #B91C1C 5.97 ✓ #94A3B8 sobre el cuerpo 2.37 ✗ → #5B6676 5.37 ✓ #64748B sobre el cuerpo 4.39 ✗ → #475569 6.99 ✓ El cuerpo gris `#F4F6F8` de la referencia es más oscuro que el nuestro y come contraste: por eso el texto apagado necesita `#5B6676` y no `#64748B`. La forma se copió entera; los colores se midieron. */ --papel: #f4f6f8; /* el gris de la referencia */ --papel-alto: #ffffff; --tinta: #1a1c21; /* 15.73 sobre el papel */ --tinta-media: #475569; /* 6.99 */ /* El texto apagado. Con el papel gris de la referencia, `#64748B` da 4.39 y no pasa: hace falta oscurecerlo un paso. */ --tinta-tenue: #5b6676; /* 5.37 sobre papel, 5.82 sobre superficie */ --acento: #94a3b8; /* SUPERFICIE ONLY: pista vacía de la barra */ --regla: #e2e8f0; --regla-fuerte: #cbd5e1; /* Marca índigo. `#6366F1` daba 4.12; este es el tono siguiente del mismo violeta y da 5.80. Sobre él va blanco: 6.29. */ --marca: #4f46e5; --marca-fuerte: #4338ca; /* hover: con blanco sigue en 7.90 */ --marca-lavado: #eef2ff; --marca-sobre: #ffffff; --verde: #047857; /* al día · 5.06 */ --verde-lavado: #ecfdf5; --ambar: #b45309; /* por vencer · 4.64 */ --ambar-lavado: #fffbeb; --rojo: #b91c1c; /* vencida · 5.97 */ --rojo-lavado: #fef2f2; --foco: #4f46e5; --fila-hover: #eef0f3; /* Sombras: tres niveles, como la referencia. Antes había 2 `box-shadow` en todo el archivo y ninguna con nombre. */ --sombra-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -1px rgb(0 0 0 / 0.03); --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -2px rgb(0 0 0 / 0.025); --sombra-flotante: var(--sombra-lg); /* Radios: 4 y 8 para lo chico (píldoras de filtros, casillas, iconos) y 12/16 para las superficies grandes. La referencia usa 12 y 16; los controles chicos se quedan en 4 porque a 12 un botón de 36px se ve una cápsula. */ --r-chico: 4px; --r-medio: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px; /* Escala de texto */ --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-md: 1.125rem; --t-lg: 1.5rem; --t-xl: 2rem; --t-cifra: clamp(2.5rem, 7vw, 3.75rem); --ancho-lateral: 260px; /* el de la referencia, no 248px */ /* Inter para el texto; IBM Plex Mono se queda PARA LAS CIFRAS: cuatro tablas alinean columnas con `tabular-nums` y la cifra protagonista es un número grande a propósito. */ --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } @media (prefers-color-scheme: dark) { :root { /* En oscuro la tinta se invierte y los colores se aclaran: un rojo oscuro sobre fondo oscuro no se ve. Todos los pares medidos también en oscuro; el más ajustado es `--marca` sobre el papel, 5.06. */ --papel: #0f1117; --papel-alto: #161923; --tinta: #f1f3f7; /* 16.9 sobre el papel */ --tinta-media: #b7bfcd; /* 9.6 */ --tinta-tenue: #8e97a8; /* 5.6 */ --acento: #64748b; --regla: #232734; --regla-fuerte: #333949; --marca: #818cf8; /* 5.06: el índigo claro */ --marca-fuerte: #a5b4fc; --marca-lavado: #232449; --marca-sobre: #0f1117; --verde: #34d399; /* 8.8 */ --verde-lavado: #0d2f26; --ambar: #fbbf24; /* 10.6 */ --ambar-lavado: #33260a; --rojo: #f87171; /* 6.4 */ --rojo-lavado: #3d1418; --foco: #818cf8; --fila-hover: #1c2130; /* En oscuro las sombras no se ven: lo que separa es el filete. */ --sombra-sm: 0 1px 2px 0 rgb(0 0 0 / 0.30); --sombra-md: 0 4px 6px -1px rgb(0 0 0 / 0.35), 0 2px 4px -1px rgb(0 0 0 / 0.25); --sombra-lg: 0 10px 15px -3px rgb(0 0 0 / 0.40), 0 4px 6px -2px rgb(0 0 0 / 0.30); } } /* -------------------------------------------------------------------------- 2. Base ESTA SECCIÓN SE PERDIÓ Y SE RECONSTRUYÓ. El reemplazo del bloque `:root` y del de modo oscuro buscó el cierre con una cadena que depended de la sangría, no coincidió donde debía, y `str.index` devolvió la coincidencia SIGUIENTE: se comió desde ahí hasta tres secciones más adelante. Sin aviso: el navegador parsea el resto sin quejarse y la página sale sin `body`, sin la barra y sin el menú lateral. El aviso fue la captura: `node --check`, el cruce de IDs y el conteo de llaves daba todo verde con media hoja muerta. **Un CSS balanceado no es un CSS correcto**; lo que lo demuestra es mirarlo. -------------------------------------------------------------------------- */ /* El reset. `border-box` NO es un detalle de estilo: sin esto, `width: 100%` más el padding y el borde hace que CADA elemento se salga de su caja. Medido en el formulario, con el reset faltando: los tres campos de una fila medían 289px dentro de una caja de 267px — 22px de más, que son exactamente 10px de padding a cada lado más 1px de borde a cada lado. Con los campos así, el formulario se ve desproporcionado y los textos de ayuda se cortan, sin que nada en el HTML esté mal. Ojo: esto no se nota en las tablas, porque `border-collapse` cambia el cálculo de ancho. Solo se nota en los formularios, que es donde se nota. */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--sans); -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: var(--t-base); line-height: 1.5; color: var(--tinta); background: var(--papel); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; } a { color: var(--marca); } :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-chico); } :focus:not(:focus-visible) { outline: none; } /* El `

` recibe el foco por script al cambiar de vista —para que un lector de pantalla anuncie la vista nueva—, y se le pone `tabindex="-1"`. Eso hace que el navegador lo considere "foco visible" y le dibuje el anillo, que es lo correcto para un control pero no para un encabezado. El anillo no se le saca al foco de teclado: `tabindex="-1"` deja el elemento fuera de la tabulación. */ .vista-titulo:focus, .vista-titulo:focus-visible { outline: none; } ::selection { background: var(--marca-lavado); color: var(--marca); } /* -------------------------------------------------------------------------- 3. Utilidades -------------------------------------------------------------------------- */ /* Solo para lectores de pantalla. `display: none` NO sirve: los lectores de pantalla tampoco lo leen, y el contenido desaparecería de verdad. */ .solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------------- 4. Disposición, barra superior y menú lateral -------------------------------------------------------------------------- */ .disposicion { display: block; } /* --- El botón de menú --- **Es lo único que quedó de la barra superior**, y no se puede borrar: en el móvil es lo único que abre el lateral, que ahí es una pantalla completa. En escritorio se oculta, porque el lateral ya está siempre visible. Va `position: fixed` y con fondo de superficie, no `transparent`: al estar suelto sobre la página se leería como un ícono suelto. Con fondo, borde y sombra se lee como un botón, que es lo que es. **Cuando el panel está abierto se va a la esquina DERECHA.** El logo del panel ocupa la izquierda, así que a la izquierda lo taparía —y el mismo botón tiene que servir de "cerrar"—. A la derecha no hay nada en ninguno de los dos estados: cerrado, la cabecera de las vistas pone el título a la izquierda. Es el mismo elemento del DOM, solo cambia de esquina. */ .boton-menu { position: fixed; top: max(var(--r-md), env(safe-area-inset-top)); left: max(var(--r-md), env(safe-area-inset-left)); z-index: 110; display: grid; place-items: center; /* **44px, no 40.** Es el mínimo recomendado para un objetivo táctil. Con el botón escondido mientras se scrollea el área tapada es chica, pero el primer toque de la pantalla es el que decide si la app se siente bien. */ width: 44px; height: 44px; padding: 0; background: var(--papel-alto); border: 1px solid var(--regla); border-radius: var(--r-md); box-shadow: var(--sombra-sm); color: var(--tinta); cursor: pointer; touch-action: manipulation; } .boton-menu:hover { background: var(--papel); } /* **Se oculta al bajar y vuelve al subir.** Medido: con el botón fijo, 12 textos distintos del Dashboard pasaban por debajo al scrollear en el móvil —el número grande, los títulos de sección, las etiquetas de la leyenda—. Sin transición, por lo mismo que el panel lateral: seprobó y ninguna corre. `visibility: hidden` es lo que lo saca de verdad, y `pointer-events: none` lo pone por las dudas, para que un botón invisible nunca atrape un toque. */ .boton-menu--oculto { visibility: hidden; pointer-events: none; } /* **Atenuado: ya se scrolleó, así que baja contraste.** Menos borde, menos sombra y algo de opacidad: se sigue viendo y se sigue sabiendo dónde está, pero deja de flotar como un sticker sobre el contenido. */ .boton-menu--atenuado { opacity: 0.85; border-color: transparent; box-shadow: none; } /* Con el menú abierto es la X de cerrar: nunca se atenúa ni se esconde. La X es el elemento con más contraste del panel justamente porque es la salida. */ .boton-menu[aria-expanded='true'], .boton-menu[aria-expanded='true'].boton-menu--atenuado { visibility: visible; opacity: 1; border-color: var(--regla-fuerte); box-shadow: var(--sombra-sm); } .boton-menu[aria-expanded='true'] { left: auto; right: max(var(--r-md), env(safe-area-inset-right)); border-color: var(--regla-fuerte); } /* Las tres líneas. `::before` y `::after` heredan el ancho, el alto y el color de esta regla, así que no hay que repetirselos: por eso el selector va en grupo. */ .hamburguesa, .hamburguesa::before, .hamburguesa::after { display: block; width: 19px; height: 2px; background: var(--tinta); transition: transform 160ms ease, opacity 160ms ease; } .hamburguesa { position: relative; } .hamburguesa::before, .hamburguesa::after { content: ''; position: absolute; left: 0; } .hamburguesa::before { top: -6px; } .hamburguesa::after { top: 6px; } .boton-menu[aria-expanded='true'] .hamburguesa { background: transparent; } .boton-menu[aria-expanded='true'] .hamburguesa::before { transform: translateY(6px) rotate(45deg); } .boton-menu[aria-expanded='true'] .hamburguesa::after { transform: translateY(-6px) rotate(-45deg); } /* --- Menú lateral --- En el móvil es una hoja que tapa el contenido: `fixed` y aparece con visibilidad y opacidad para poder animar la salida. */ .lateral { position: fixed; /* Pantalla completa en el móvil: no hay barra arriba que reservar. Es lo que deja libre al botón de cerrar, que va suelto y fijo, para quedar por encima (z-index 110 contra 90 de este). */ inset: 0; z-index: 90; display: flex; flex-direction: column; padding: var(--r-lg) max(var(--r-medio), env(safe-area-inset-right)) var(--r-lg) max(var(--r-medio), env(safe-area-inset-left)); background: var(--papel-alto); overflow-y: auto; overscroll-behavior: contain; /* **El panel se abre y se cierra de golpe: sin `transition`, sin `animation`.** Se intentó animar cuatro veces y ninguna corren. Medido, en cada caso: el panel quedaba "abierto" en el DOM —`data-abierto="true"`, `aria-expanded="true"`— y sin embargo invisible en pantalla. 1. Transicionar `visibility`: el valor calculado nunca pasaba de `hidden`. 2. Transicionar `opacity`: se quedaba en `0`. 3. Transicionar `transform`: se quedaba en `translateX(-100%)`, con `matrix(1, 0, 0, 1, -485, 0)` leído 500ms después de poner el atributo. 4. Una `animation` con `@keyframes`: tampoco corrió. En los cuatro, `pointer-events` —la única propiedad del estado abierto que NO estaba en la lista de `transition`— sí cambiaba. O sea: **ninguna transición arranca en este elemento cuando parte de oculto**, y `visibility` es la única que resuelve al instante. Así que el panel aparece y desaparece de golpe. Es un drawer de móvil: se abre donde uno lo está mirando, sin esperar 180ms a que llegue. Lo que lo hace navegable no es la animación sino el `inert` y el foco, y esos sí funcionan. El `inert` lo pone el JS, no el CSS: `visibility: hidden` ya lo saca del tabú, pero el panel tiene que seguir able de recibir foco al abrir. */ visibility: hidden; } .lateral[data-abierto='true'] { visibility: visible; } /* En escritorio pasa a ser columna del grid, y deja de flotar. */ @media (min-width: 62rem) { .disposicion { display: grid; grid-template-columns: var(--ancho-lateral) minmax(0, 1fr); } .boton-menu { display: none; } /* En escritorio el panel es una columna, no un drawer: siempre visible, sin `inert` — el JS no se lo pone — y sin nada que lo esconda. */ .lateral { position: sticky; top: 0; inset: auto; height: 100vh; visibility: visible; border-right: 1px solid var(--regla); } } /* Los rótulos de sección dicen qué agrupa cada cosa. No van en mayúsculas: el tracking ya los distingue, y las mayúsculas son el tic más reconocible de una maqueta genérica. */ .lateral-titulo { margin: 0 0 var(--r-chico); padding: 0 var(--r-chico); font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.06em; color: var(--tinta-tenue); } .lateral-titulo:first-child { margin-top: 0; } /* --- La lista de secciones --- */ /* `flex: 0 0 auto` y no `flex: 1`: estirar la navegación empujaba el pie al fondo de la barra y dejaba un hueco de cientos de píxeles con cinco ítems arriba. El pie va pegado al último ítem, que es donde el ojo lo espera. */ .lateral-nav { flex: 0 0 auto; } .lista { margin: 0 0 var(--r-md); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .lista--inactiva { opacity: 0.5; } /* Cada ítem del menú. `display: flex` va ACÁ y no en el bloque de "barra y menú" de más abajo: ese bloque solo ajusta medidas y radios, partiendo de que esta regla existe. Si el `display` viviera solo allí, un cambio de orden de las hojas lo dejaba como `inline-block` y el ícono se caía de línea. */ .item { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.5rem var(--r-md); border-radius: var(--r-md); font-size: var(--t-sm); font-weight: 500; color: var(--tinta-media); text-align: left; text-decoration: none; } button.item { font: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .lateral-pie { margin-top: var(--r-lg); padding-top: var(--r-md); border-top: 1px solid var(--regla); font-size: var(--t-xs); color: var(--tinta-tenue); } /* (`.item--activo`, `.item-icono` y las medidas del ítem están más abajo, en el bloque "la barra y el menú", que las ajusta al diseño con tarjetas) */ /* -------------------------------------------------------------------------- 5. Contenido -------------------------------------------------------------------------- */ .contenido { min-width: 0; /* El `padding-top` de 56px es para el botón de menú flotante: sin él, el botón se pondría ENCIMA del `

` de la vista, que está a la izquierda y arriba. 12px de aire + 40px del botón + 4px de margen. Antes esto lo resolvía la barra superior, que ocupaba 72px; al quitarla, el sitio del botón hay que reservarlo igual. */ padding: calc(var(--r-md) + 46px) max(var(--r-medio), env(safe-area-inset-right)) calc(var(--r-medio) * 3) max(var(--r-medio), env(safe-area-inset-left)); } .contenido:focus { outline: none; } @media (min-width: 48rem) { .contenido { padding-inline: var(--r-lg); } } /* A partir de 62rem el botón de menú se oculta (`.boton-menu { display: none }`, junto al lateral que pasa a columna) y el sitio que le estaba reservado arriba vuelve a ser aire perdido: medido, 56px de hueco entre el borde y el `

` en una pantalla de 1440px donde no hay nada que reservar. */ @media (min-width: 62rem) { .contenido { padding-top: var(--r-lg); } } /* ══════════════════════════════════════════════════════════════════════════ EL ANCHO DE CADA VISTA, Y POR QUÉ NO ES EL MISMO EN TODAS ────────────────────────────────────────────────────────────────────────── Antes todas eran 62rem, un número que venía de cuando el lateral se comía 260px de la pantalla. Con la barra nueva ese tope ya no lo pide nadie: medido en 1920px, el Dashboard ocupaba 992px y dejaba **897px de aire muerto** — el 48% de la pantalla. Pero **estirar todo a 1920px sería peor**. Acá hay una tensión real: - **Los datos ya se leen bien a 992px**, y estirarlos a 180 caracteres por línea los hace PEORES de leer. Una tabla de cobranza necesita poder comparar columnas, y comparar a lo largo de 180 caracteres es comparar a ciegas. - **Los gráficos sí ganan con ancho**, porque el ancho es información: más barra es más barra. Así que cada vista toma lo que le sirve: | Vista | Ancho | Por qué | |---|---|---| | Dashboard | 88rem | La cifra grande, los tres gráficos y la tabla de "exigen atención". Todo eso gana con ancho | | Listado | 76rem | 10 columnas. Ya necesitaba más que el resto; estirarlo más haría las cifras legibles de lo contrario | | Clientes | 76rem | 9 columnas, casi todas cifras: mismo motivo | | El resto | 62rem | Texto y formularios. Donde más importa es no alargar la línea | El aire que sobra no se reparte al azar: se queda como aire. Una pantalla ancha con contenido centrado y aire a los dos lados se lee mejor que una con el contenido pegado a la izquierda y 900px de nada a la derecha. */ .vista { max-width: 62rem; } #dashboard { max-width: 88rem; } /* El listado tiene 10 columnas: necesita más ancho que el resto. Con 62rem (952px útiles) la tabla pedía 1094px y nunca cabía. */ #listado { max-width: 76rem; } /* Clientes tiene 9 columnas, casi todas cifras: mismo motivo. */ #clientes { max-width: 76rem; } /* **`margin-inline: auto`: el contenido va al centro, no pegado a la izquierda.** Antes no había nada y el aire sobrante se acumulaba TODO a la derecha, que es como se lee un hueco: contenido arrimado a un borde y 900px de nada al otro. Centrado, el aire se reparte y la pantalla se ve compuesta. */ .vista { margin-inline: auto; } /* Los anclas no deben quedar bajo la barra fija */ .vista, #estados-titulo, #urgentes-titulo { scroll-margin-top: var(--r-medio); } .vista-cabecera { margin-bottom: var(--r-lg); } /* `text-wrap: balance` reparte el nombre largo en renglones parejos, que es justo lo que quiere una razón social de 57 caracteres. El `overflow-wrap` es el respaldo para el nombre que NO tiene espacios: sin él, un identificador largo empuja el título hacia la derecha y lo saca de la pantalla. */ .vista-titulo { font-size: var(--t-xl); letter-spacing: -0.025em; text-wrap: balance; overflow-wrap: break-word; } /* **En el Dashboard el título baja a 1.75rem.** Medido: la cabecera de la vista medía 69px y con el `h1` de 2rem el título "Cuentas por cobrar" queda más grande que cualquier otro dato de la pantalla —incluida la cifra del total—, que es justo lo contrario de lo que hace un encabezado de página. */ #dashboard .vista-titulo { font-size: 1.75rem; } .vista-subtitulo { color: var(--tinta-media); font-size: var(--t-sm); text-wrap: pretty; } /* El aviso de los datos de fábrica del Dashboard. Superficie con `--papel-alto` y filete de `--regla`, NO con `--marca`: el rojo es urgencia de cobro, y esto no es una factura vencida. El aviso se lee igual porque tiene su propio icono de información, que es la misma forma en que se diferencia del resto. */ .aviso-ejemplos { display: flex; align-items: center; justify-content: space-between; gap: var(--r-medio); flex-wrap: wrap; margin-bottom: var(--r-lg); padding: var(--r-medio); background: var(--papel-alto); border: 1px solid var(--regla); border-radius: var(--r-chico); } .aviso-ejemplos-cuerpo { display: flex; align-items: flex-start; gap: var(--r-chico); min-width: 0; } .aviso-ejemplos-marca { flex: none; color: var(--tinta-media); line-height: 0; } .aviso-ejemplos-marca svg { width: 18px; height: 18px; } .aviso-ejemplos-titulo { margin: 0; font-size: var(--t-sm); font-weight: 600; } .aviso-ejemplos-texto { margin: 2px 0 0; font-size: var(--t-xs); color: var(--tinta-media); text-wrap: pretty; } /* -------------------------------------------------------------------------- Los tres gráficos del Dashboard **Un color por gráfico, y nada más.** El rojo solo aparece en el de antigüedad porque todas sus facturas están vencidas —ese es el único significado del rojo en esta aplicación—. Los otros dos usan la marca, que es "esto es de la aplicación" y nada más. No hay degradados por severidad: en antigüedad, que es el gráfico donde más tentador sería, la longitud ya dice cuánto y un quinto tono de rojo sería una regla nueva que hay que aprender. El resto es estructura, no decoración: la pista gris detrás de cada barra es la que hace comparables dos barras de largos distintos sin tener que dibujar la cuadrícula y numerarla. `.grafico-pista` y `.grafico-col-pista` tienen ALTO FIJO a propósito: sin él el `width` / `height` en porcentaje no tiene contra qué medirse y la barra no sale. Es el mismo motivo por el que el `` del Listado existe. */ .analisis { margin-top: var(--r-lg); } .analisis .bloque-cabecera { margin-bottom: var(--r-medio); } .graficos { display: grid; gap: var(--r-md); grid-template-columns: 1fr; } /* **Dos en fila, y el de meses a todo el ancho. SIEMPRE — no hay `@media` que lo cambie arriba de 48rem.** Hubo una `@media` que ponía tres en fila desde 78rem, y fue una decisión medida: bajaba este bloque de 539px a 328px. **Estaba rota**, y no se veía en el CSS sino en el ancho de una columna. Medido en el navegador, con la cartera de fábrica: | pantalla | tarjeta | cada mes | "Bs 817.453,81" necesita | |----------|---------|----------|--------------------------| | 1440px | 325px | **46px** | 107px → quedaba "Bs 81…" | | 1280px | 325px | **46px** | 107px → quedaba "Bs 81…" | | 1024px | 717px | 112px | 107px → entraba entero | El detalle que la hacía pasar desapercibida: **se veía bien a 1024 y mal a 1440**, al revés de lo que se espera. Porque entre 48 y 78rem el gráfico de meses ya ocupaba la fila entera; con tres en fila la tarjeta cae a 325px, `grid-auto-columns: 1fr` reparte esos 325 entre seis meses, y quedan 46px para un número de 107. Es el mismo género de error que el `max-width: 1px` de las tablas: **el ancho de una columna lo decide el contenedor, no el hijo.** Y el `text-overflow: ellipsis` de `.grafico-col-valor` lo tapaba en vez de delatarlo — el recorteconvertería un bug de reparto en un recorte que parecía normal. **Lo que se cambia y lo que se paga:** el bloque pasa de 328px a 605px de alto. Los 328px se compraban con datos que no se leían, que es un precio que no hay que pagar. Y las dos tarjetas de arriba quedan en mitades iguales en vez de en tercios: sin el hueco vacío que dejaba la grilla de tres. La fila de una sola columna en móvil la pone el `@media` de 48rem hacia abajo, no uno nuevo. */ @media (min-width: 48rem) { .graficos { grid-template-columns: 1fr 1fr; } } /* El de vencimiento a su propia fila, a todo el ancho, en todos los tamaños. */ .grafico--ancho { grid-column: 1 / -1; } /* El token es `--papel-alto`, NO `--superficie`: ese no existe. Con `var()` de una variable inexistente la declaración se invalida y el `background` queda en `transparent` — medido: `rgba(0, 0, 0, 0)`—, así que la tarjeta se veía solo por el filete. El chequeo de "clases CSS sin definir" NO lo detecta: mira selectores de clase, no nombres de variables. Para eso está `pruebas/tokens.php`-style: comparar los `var(--x)` del CSS, del HTML y del JS contra los `--x:` definidos. */ .grafico { /* `align-self: start`: sin esto las tarjetas se estiran a la altura de la más alta —328px medidos, la del vendedor con seis filas— y el de meses, que necesita 132px de contenido, ocupa 328 de caja con aire arriba y abajo. */ align-self: start; /* **`min-width: 0` es lo que hace que la tarjeta NO crezca con el contenido.** Sin esto, el `grid-auto-columns: minmax(6.75rem, 1fr)` del eje de meses hizo que la tarjeta midiera 694px en una pantalla de 375 —el ancho MÍNIMO de las columnas se le sumaba a la tarjeta en vez de repartirse dentro de ella— y la página entera scrolleaba 327px de lado. Medido. Es el mismo caso de siempre: **en una grilla, el hijo tiene `min-width: auto` por defecto, así que nunca baja del tamaño de su contenido.** Hay que ponerlo en cero explícitamente para que `overflow-x: auto` del interior pueda recortar. */ min-width: 0; padding: var(--r-md); background: var(--papel-alto); border: 1px solid var(--regla); border-radius: var(--r-md); } .grafico-titulo { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.01em; color: var(--tinta); } .grafico-nota { margin-top: 2px; font-size: var(--t-xs); color: var(--tinta-tenue); } /* --- Barras horizontales: antigüedad y vendedor --- */ .grafico-barras { display: grid; gap: 0.5rem; margin-top: var(--r-medio); } /* **La fila son DOS renglones: la cabecera y la barra.** Etiqueta y valor comparten la línea de arriba, y abajo la barra ocupa el ancho entero. Antes eran tres renglones con la etiqueta en una columna fija de 7.5rem, la barra en la de en medio y el valor a la derecha. En una tarjeta de 300px eso no funciona: la etiqueta se comía la mitad y a la barra le quedaban 90px. `gap` vertical de 6px entre renglones y 5px entre filas: medido, 24px por fila contra los 45px de antes, y con seis vendedores la tarjeta baja de 328 a 215. */ .grafico-fila { display: grid; gap: 4px 0; margin-bottom: 4px; } .grafico-fila:last-child { margin-bottom: 0; } .grafico-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } /* El nombre entero va en el `title` —lo pone `pintarBarras()`—, así que aquí el recorte con puntos suspensivos no pierde nada. Medido: "Maria Guadalupe Gonzalez Ramirez" son 185px y la tarjeta da ~300px, con el valor al lado entra entero. */ .grafico-etiqueta { min-width: 0; font-size: var(--t-xs); color: var(--tinta-media); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La pista: el fondo contra el que se mide la barra. Sin ella, dos barras de largos distintos no se comparan. */ .grafico-pista { height: 7px; background: var(--regla); border-radius: 3px; overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════════ LAS BARRAS CRECEN, Y LO HACEN CON `transform` ────────────────────────────────────────────────────────────────────────── **Un solo momento, al pintar. No hay bucle ni efecto al hacer scroll.** Y se anima `transform`, no `width` ni `height`: el compositor mueve la barra sin recalcular el layout en cada cuadro. Animar el ancho sí se vería, pero recalcula el layout de la tarjeta sesenta veces por segundo, que es exactamente lo que `transform` evita. **`animation-fill-mode: both` no es un detalle.** Sin él, entre que se inyecta el HTML y que arranca la animación hay un cuadro en el que la barra está a tamaño final y después salta a cero: se ve un parpadeo. Con `both` la barra queda en `scaleX(0)` desde el primer cuadro. Y el motivo de que sea `scaleX` y no `width: 0`: con `width` el navegador tiene que ir recalculando el ancho real de cada barra cuadro a cuadro. Con `scaleX` la barra ya tiene su ancho FINAL en el layout y lo que se mueve es la escala, que es una operación de compositor. ── POR QUÉ `both`, Y POR QUÉ EL `transform: none` DEBAJO ── `animation-fill-mode: both` evita el parpadeo: sin él hay un cuadro en el que la barra está a tamaño final y después salta a cero. El `scaleX(0)` está DENTRO del `@keyframes`, no en la regla base. Esa es la diferencia entre una barra que puede quedar invisible y una que no: con el `scaleX(0)` en la regla base, apagar la animación dejaría todas las barras en cero. Acá la regla base **no declara `transform`**, así que sin animación la barra está a su tamaño natural. **Medido, no supuesto:** se repitió la prueba apagando la animación a mano (`animation: none`) y quitando el `transform: none` del `@media` — las 13 horizontales y las 6 verticales siguió viéndose enteras. El `transform: none` de abajo está igual, pero es una **garantía explícita**, no una necesidad: si mañana alguien mueve el `scaleX(0)` a la regla base, esa línea es lo que impide que el gráfico aparezca sin barras. */ .grafico-barra { display: block; height: 100%; /* El mínimo existe para que una barra del 0,4% se vea. Una banda EN CERO no dibuja nada (lo hace el JS, no el CSS): un muñón de 3px en "Venció hoy" parece que hay un poco de dinero donde no hay nada. */ min-width: 3px; background: var(--marca); border-radius: 3px; /* Crece desde la IZQUIERDA: es de donde se lee una barra horizontal. */ transform-origin: left center; animation: barra-horizontal 520ms cubic-bezier(0.22, 1, 0.36, 1) both; } /* El escalonado: las barras aparecen de a una, y la que más importa —la más larga, la primera— se ve primero. 60ms entre cada una; con seis filas son 300ms, que es lo que tarda en terminar la última. */ .grafico-fila:nth-child(2) .grafico-barra { animation-delay: 60ms; } .grafico-fila:nth-child(3) .grafico-barra { animation-delay: 120ms; } .grafico-fila:nth-child(4) .grafico-barra { animation-delay: 180ms; } .grafico-fila:nth-child(5) .grafico-barra { animation-delay: 240ms; } .grafico-fila:nth-child(6) .grafico-barra { animation-delay: 300ms; } .grafico-fila:nth-child(7) .grafico-barra { animation-delay: 360ms; } @keyframes barra-horizontal { from { transform: scaleX(0); } to { transform: scaleX(1); } } .grafico-barra--rojo { background: var(--rojo); } .grafico-valor { display: flex; flex: none; gap: 0.375rem; align-items: baseline; justify-content: flex-end; white-space: nowrap; } .grafico-monto { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); } .grafico-conteo { font-size: var(--t-xs); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; } /* Una banda sin facturas NO se oculta: se muestra en cero. Saber que no hay nada en "31 a 60 días" es información; no dibujarla parece que el corte no existe. */ .grafico-fila--vacia .grafico-etiqueta, .grafico-fila--vacia .grafico-monto { color: var(--tinta-tenue); font-weight: 400; } /* "Otros 4": es una suma, no un vendedor, así que va atenuado y con filete. */ .grafico-fila--resumen { margin-top: 2px; padding-top: 0.5rem; border-top: 1px solid var(--regla); } .grafico-fila--resumen .grafico-barra { background: var(--acento); } /* --- Columnas verticales: vencimiento mes a mes --- * * **Cada mes tiene un ancho MÍNIMO, y por eso el eje scrollea en vez de * recortar.** Medido: "Bs 817.453,81" necesita 107px y con `1fr` a 390px de * pantalla cada mes recibía 52px — el mismo bug del escritorio, en el otro * extremo. * * La diferencia con el resto de las tablas es que acá el scroll **no es un * mal necessary**: el eje de meses es una tira de tiempo y que siga hacia * adelante leyendo es normal. Lo que no es normal es que el número se corte. * * `contain: paint` es lo que evita que esa tira haga scrollear la PÁGINA entera * en horizontal —medido: 174px de desborde sin él—. */ .grafico-columnas { display: grid; grid-auto-flow: column; /* `1fr` con un piso: reparte lo que sobra y nunca reparte menos que el ancho que el número necesita. */ grid-auto-columns: minmax(6.75rem, 1fr); gap: var(--r-chico); margin-top: var(--r-md); overflow-x: auto; /* El scroll con la y Pegada no se lee: sin esto el valor queda pegado a un borde mientras se mueve. */ padding-bottom: var(--r-chico); contain: paint; /* En el móvil es un scroll de verdad, y sin esto el toque lo interpreta como un arrastre de página que no deja ver el eje. */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .grafico-col { display: grid; /* 5rem, no 7rem: con las dos tarjetas de arriba en fila, la altura de esta la marcaba la barra más alta y no hacía falta tanta. */ grid-template-rows: auto 5rem auto; gap: 0.375rem; justify-items: center; text-align: center; } .grafico-col-valor { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--tinta); /* **SIN `text-overflow: ellipsis`, a propósito.** Estaba, y convertía un bug de reparto —una columna de 46px para un número de 107px— en un recorte que parecía una decisión de diseño: "Bs 81…". El dato no se recortaba, se escondía, y por eso nadie vio que el eje estaba mal. El ancho mínimo de `.grafico-columnas` es lo que garantiza que el número entre. Si algún día no entra, tiene que **desbordarse y verse**: eso es un aviso, y un aviso es mejor que una mentira. */ white-space: nowrap; max-width: 100%; } /* Sin fondo gris: la pista llena convertía cada mes en un bloque del mismo ancho que el vecino, y cuatro bloques iguales no se leen como un gráfico. Lo que hace comparables las columnas es la línea de base, no el relleno. La barra es angosta y va al centro de la columna: con el ancho completo, un mes con Bs 23.000 y otro con Bs 55.650 se veían como dos rectángulos del mismo tamaño y lo único que los distinguía era cuánto se llenaba de arriba. */ .grafico-col-pista { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 5rem; border-bottom: 1px solid var(--regla); } .grafico-col-barra { width: min(100%, 3.5rem); min-height: 3px; background: var(--marca); border-radius: 3px 3px 0 0; /* Las verticales crecen desde ABAJO —la línea de base—, y con `transform-origin: bottom`. Crecer desde abajo es de donde se lee: el mes es el eje, y la altura es lo que sube. Con `transform-origin: top` la barra bajaría desde arriba y se leería al revés. */ transform-origin: bottom center; animation: barra-vertical 520ms cubic-bezier(0.22, 1, 0.36, 1) both; } .grafico-col:nth-child(2) .grafico-col-barra { animation-delay: 60ms; } .grafico-col:nth-child(3) .grafico-col-barra { animation-delay: 120ms; } .grafico-col:nth-child(4) .grafico-col-barra { animation-delay: 180ms; } .grafico-col:nth-child(5) .grafico-col-barra { animation-delay: 240ms; } .grafico-col:nth-child(6) .grafico-col-barra { animation-delay: 300ms; } .grafico-col:nth-child(7) .grafico-col-barra { animation-delay: 360ms; } @keyframes barra-vertical { from { transform: scaleY(0); } to { transform: scaleY(1); } } .grafico-col-mes { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-media); } .grafico-col-conteo { font-size: var(--t-xs); color: var(--tinta-tenue); font-variant-numeric: tabular-nums; } /* Con tres en fila, la nota de qué muestra cada gráfico es la que sobra: el título ya lo dice ("Antigüedad de la deuda vencida") y el dato está arriba del todo. Medido: 16px por tarjeta, 48px en total. */ @media (min-width: 78rem) { .grafico-nota { display: none; } } /* --- Estado vacío --- No es un error y no dice "sin datos": dice QUÉ FALTA, que es lo que la persona necesita saber para decidir si el gráfico le sirve. */ .grafico-vacio { margin-top: var(--r-md); padding: var(--r-md); font-size: var(--t-sm); color: var(--tinta-media); text-align: center; background: var(--papel); border: 1px dashed var(--regla-fuerte); border-radius: var(--r-md); } @media (prefers-reduced-motion: reduce) { /* `animation: none` apaga el movimiento, que es lo que se pidió. El `transform: none` que va junto **no es necesario hoy** —se comprobó apagando la animación a mano y las 19 barras siguió viéndose enteras—: queda como garantía de que si alguien mueve el `scaleX(0)` del `@keyframes` a la regla base, el gráfico no aparezca sin barras. El comentario de arriba lo explica con la medida. */ .grafico-barra, .grafico-col-barra { animation: none; transform: none; transition: none; } /* El botón se sigue escondiendo: es información —"el menú no está acá, bajá"— y no decoración. Acá no hay nada que apagar porque no hay transición. */ } .bloque-titulo { font-size: var(--t-md); } .urgentes { margin-top: var(--r-lg); } .protagonista-cuerpo { min-width: 0; } .bloque-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--r-medio); flex-wrap: wrap; margin-bottom: var(--r-chico); } .bloque-nota { font-size: var(--t-xs); color: var(--tinta-tenue); } /* -------------------------------------------------------------------------- 6. El protagonista: el total -------------------------------------------------------------------------- */ .protagonista { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--r-medio); flex-wrap: wrap; padding: var(--r-lg) 0; border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--regla); margin-bottom: var(--r-lg); } .protagonista-etiqueta { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.01em; color: var(--tinta-media); } .cifra { margin: var(--r-chico) 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-cifra); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; color: var(--tinta); } .cifra span { color: var(--tinta-tenue); } .protagonista-nota { font-size: var(--t-sm); color: var(--tinta-tenue); } /* -------------------------------------------------------------------------- 7. Barra de cartera y leyenda -------------------------------------------------------------------------- */ .estados { margin-bottom: var(--r-lg); } /* ══════════════════════════════════════════════════════════════════════════ CÓMO SE REPARTE LA CARTERA: UNA FILA POR ESTADO ────────────────────────────────────────────────────────────────────────── Reemplaza a una barra apilada de 10px sobre 1408px. Medido a 1920px, lo que había fallaba en tres cosas concretas: 1. **La tira era 141:1.** Diez píxeles de alto sobre 1408 de ancho es una línea con color, no un gráfico: no hay nada de qué compararla porque no tiene altura. 2. **El nombre y su cifra quedaban a 238px** — tres veces el ancho del número. En una grilla de tres columnas con `justify-content: space-between`, el ojo tiene que atravesar medio bloque vacío para casarlos. Medido: 238px en "Vencidas", 261px en "Al día". 3. **No había ni un porcentaje.** 58,4% salía de dividir dos cifras a mano. El arreglo no es un tipo de gráfico más complejo: es **una fila por estado**, con sus cifras agrupadas y **su propia barra justo debajo**. La asociación nombre→barra deja de deducirse porque la barra está en su fila, y las tres porciones se miden contra la misma escala de 0 a 100%. **Reutiliza `.grafico-pista` y `.grafico-barra`** a propósito: son las mismas piezas de los tres gráficos de abajo, con la animación y el contraste ya medidos. Un cuarto estilo de barra sería un cuarto lugar donde algo se rompe. ── POR QUÉ NO HAY EFECTO AL PASAR EL MOUSE ── La fila ya tiene su barra pegada debajo y sus cifras al lado: no hay nada que aclarar. Un hover que sólo agranda o repinta la fila es decoración, y `AGENTS.md` es explícito con eso. Lo que sí es información —y ya está— es la animación al pintar: al guardar una factura las tres barras crecen de nuevo y se ve en qué proporción cambió la cartera. */ /* El nombre tiene ancho FIJO para que las tres cifras queden alineadas en una columna. Sin esto cada fila empuja su número a un lado distinto y deja de poderse comparar de un vistazo, que es justo lo que se pidió. */ .reparto-nombre { flex: 0 0 11rem; } .reparto { display: grid; gap: var(--r-md); margin: 0; padding: 0; list-style: none; } /* **`display: grid` en la fila no es decorativo: es lo que la sostiene.** `.reparto-cabeza` y `.reparto-pista` son dos ``, que son INLINE. En los otros gráficos caen en `.grafico-fila`, que es grid, y por eso se vuelven bloque; acá, sin esto, la barra se dibuja encima de la fila siguiente y tapa el texto de "Por vencer". Es el mismo caso del `display: flex` que le faltaba a `.lista` cuando la barra de navegación se convirtió en fila. */ .reparto-fila { display: grid; gap: 5px; } .reparto-cabeza { display: flex; align-items: baseline; gap: 0.75rem; } .reparto-punto { align-self: center; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; } .reparto-punto--vencida { background: var(--rojo); } .reparto-punto--por-vencer { background: var(--ambar); } .reparto-punto--vigente { background: var(--verde); } .reparto-nombre { font-size: var(--t-sm); color: var(--tinta-media); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* **`reparto-cifras` es lo que arregla los 238px.** El monto y la cantidad van en el MISMO grupo, con un hueco de 0.5rem entre ellos, y no separados por `space-between`. El `margin-left: auto` del porcentaje se come el aire que sobra, así que el aire queda donde no estorba: entre el último dato y el porcentaje, que es lo único que uno recorre sin leer. */ .reparto-cifras { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; } .reparto-valor { font-family: var(--mono); font-size: var(--t-base); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .reparto-conteo { font-size: var(--t-xs); color: var(--tinta-tenue); white-space: nowrap; } /* El porcentaje en columna a la derecha: las tres se leen de un tirón y se comparan entre sí sin tener que restar nada. */ .reparto-pct { margin-left: auto; font-family: var(--mono); font-size: var(--t-base); font-variant-numeric: tabular-nums; color: var(--tinta-media); white-space: nowrap; } /* La pista es la de los otros gráficos pero con 10px en vez de 7: esta es la barra que resume todo lo de abajo, y a 7px se pierde entre las otras dos tarjetas. La diferencia es 3px y es a propósito. */ .reparto-pista { height: 10px; border-radius: var(--r-chico); } .reparto-barra { transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1); } .reparto-fila[data-estado="vencida"] .reparto-barra { background: var(--rojo); } .reparto-fila[data-estado="por-vencer"] .reparto-barra { background: var(--ambar); } .reparto-fila[data-estado="vigente"] .reparto-barra { background: var(--verde); } /* El escalonado lo traen los `nth-child` de `.grafico-barra`, que están atados a `.grafico-fila`. Acá se replica: tres filas, tres retardos. */ .reparto-fila:nth-child(2) .reparto-barra { animation-delay: 60ms; } .reparto-fila:nth-child(3) .reparto-barra { animation-delay: 120ms; } /* En el móvil el nombre no puede quedar en 11rem: se queda el ancho natural y las cifras bajan a su propia línea, que es lo que hace `flex-wrap`. */ @media (max-width: 34rem) { .reparto-nombre { flex: 0 0 auto; } .reparto-cifras { flex-wrap: wrap; } } /* -------------------------------------------------------------------------- 8. Tablas -------------------------------------------------------------------------- */ /* `contain: paint` NO es adorno: sin él, la tabla se salía del marco y la PÁGINA entera se scrolleaba en horizontal. Medido: con un solo cliente de razón social larga ("Distribuidora Nacional de Materiales de Construccion S.A."), la tabla de clientes llegaba a 1200px dentro de un marco de 971px —scrollea bien por dentro— pero `document.scrollWidth` era 1439 en vez de 1280, y la página se iba 174px al costado. En el Listado, 167px. **`overflow-x: auto` recorta lo que se ve, pero su desborde igual cuenta para el área desplazable de la raíz.** Probado: `overflow: hidden` NO lo arregla (174px), ni `max-width: 100%` en la tabla, ni `overflow-x: clip` en el `
`. Lo que sí lo arregla es `contain: paint`, que convierte al marco en caja de contención: 0px de scroll de página, con la tabla scrolleando por dentro igual (verificado: `scrollLeft` llega al máximo). Con nombres cortos nunca se vio, porque la tabla no pasaba de su `min-width`. Aparece justo cuando alguien registra un nombre largo, que es lo que pasó. */ .marco-tabla { overflow-x: auto; contain: paint; border-top: 1px solid var(--regla); border-bottom: 1px solid var(--regla); background: var(--papel-alto); } .tabla { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .tabla th, .tabla td { padding: 0.625rem var(--r-chico); text-align: left; white-space: nowrap; } .tabla th { font-size: var(--t-xs); font-weight: 600; color: var(--tinta-tenue); border-bottom: 1px solid var(--regla); } .tabla tbody tr { border-bottom: 1px solid var(--regla); } .tabla tbody tr:last-child { border-bottom: 0; } /* El hover de fila lo define el bloque "sistema de superficies" del final, en `--fila-hover`. Acá estaba el tinte azul del acento: la regla nueva gana por estar después, pero dejarla sería tener dos respuestas para lo mismo. */ /* Cifras: siempre monoespaciadas y tabulares para que la columna cierre */ .tabla .num, .tabla .cifra-celda { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .tabla .celda-cliente { max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La tabla del Dashboard sí puede usar max-width en la celda: tiene pocas columnas y su tabla no compite por ancho con el listado. */ .fila-vacia td { padding: var(--r-lg); text-align: center; color: var(--tinta-tenue); } /* Estado vacío con salida: no es un callejón sin salida, es una invitación. */ .vacio-titulo { font-size: var(--t-md); font-weight: 600; color: var(--tinta); margin: 0 0 var(--r-chico); } .vacio-texto { margin-bottom: var(--r-medio); color: var(--tinta-media); } /* Distintivo de estado: un punto y una palabra, nada de fondo de color */ .distintivo { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; } .distintivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; } .distintivo--vencida { color: var(--rojo); } .distintivo--por-vencer { color: var(--ambar); } .distintivo--vigente { color: var(--verde); } /* Cobrada: no es una alerta, es un hecho consumado. */ .distintivo--cobrada { color: var(--verde); } /* Una fila cobrada se apaga: sigue en el historial, ya no exige acción. */ .fila-cobrada td { opacity: 0.6; } .celda-tasa { display: block; font-size: var(--t-xs); color: var(--tinta-tenue); } /* -------------------------------------------------------------------------- 9. Botones -------------------------------------------------------------------------- */ .boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 40px; padding: 0.5rem var(--r-medio); font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--r-chico); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .boton:disabled { opacity: 0.45; cursor: not-allowed; } /* Blanco sobre la marca azul: 5.17. */ .boton--primario { background: var(--marca); color: var(--marca-sobre); } .boton--primario:hover:not(:disabled) { background: var(--marca-fuerte); } .boton--secundario { background: transparent; border-color: var(--regla-fuerte); color: var(--tinta); } .boton--secundario:hover:not(:disabled) { background: var(--regla); } /* Peligro usa el rojo de "vencida", que es lo que está en juego: borrar facturas. Su hover es más oscuro, #991B1B. */ .boton--peligro { background: var(--rojo); color: #fff; } .boton--peligro:hover:not(:disabled) { background: #991b1b; } .boton[aria-busy='true'] .boton-texto { visibility: hidden; } .boton-cargando { width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: girar 700ms linear infinite; } @keyframes girar { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 10. Formularios -------------------------------------------------------------------------- */ .formulario { max-width: 52rem; padding: var(--r-lg); background: var(--papel-alto); border: 1px solid var(--regla); border-radius: var(--r-medio); } .form-rejilla { display: grid; grid-template-columns: 1fr; gap: var(--r-lg); } @media (min-width: 44rem) { .form-rejilla { grid-template-columns: 1fr 1fr; } } /* **Dos columnas, no tres.** Con tres, "Número de factura" y "Cliente" —los dos `.campo--ancho`— ocupaban las tres columnas y medían 798px completos, contra 255px de los demás. Un número de factura de 798px es desproporcionado a propósito: el campo grande tiene que ser el que necesita el ancho, y ese es el del vencimiento. */ @media (min-width: 72rem) { .form-rejilla { grid-template-columns: 1fr 1fr; } } .campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } /* `.campo--ancho` = ocupa la fila entera. En el móvil no hay grilla y ya ocupa todo; desde 44rem son dos columnas, así que `span 2`. */ .campo--ancho { grid-column: 1 / -1; } @media (min-width: 44rem) { .campo--ancho { grid-column: span 2; } } /* El vencimiento es el campo más ancho del formulario: fecha + plazo de 5 opciones. Necesita 392px y la celda de 3 columnas da 281px, así que ocupaba 2 columnas. Sin esto, el flex comprimía el grupo y se veía amontonado con el campo de monto de al lado. */ @media (min-width: 44rem) { .campo--ancho-2 { grid-column: span 2; } } .campo-etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--tinta); } .obligatorio { color: var(--rojo); } .campo-input { width: 100%; min-height: 40px; padding: 0.5rem 0.625rem; font-family: var(--sans); font-size: var(--t-base); color: var(--tinta); background: var(--papel); border: 1px solid var(--regla-fuerte); border-radius: var(--r-chico); } .campo-input:hover { border-color: var(--tinta-tenue); } .campo-input:focus { border-color: var(--marca); } .campo-input[aria-invalid='true'] { border-color: var(--rojo); } .campo-ayuda { font-size: var(--t-xs); color: var(--tinta-tenue); } .campo-error { font-size: var(--t-xs); font-weight: 500; color: var(--rojo); } /* flex-wrap: si algún día no entra, la fila se parte en dos en vez de comprimir los controles hasta volverlos ilegibles. */ .fila-vencimiento, .fila-monto { display: flex; flex-wrap: wrap; gap: var(--r-chico); align-items: center; } .fila-vencimiento .campo-input, .fila-monto .campo-input { flex: 1 1 8rem; min-width: 0; } /* Selector segmentado: se ve presionado, no una lista desplegable */ /* Selector segmentado: se ve presionado, no una lista desplegable */ .grupo-radio, .grupo-moneda { display: inline-flex; flex: none; /* nunca se comprime: comprimir lo hacía ilegible */ padding: 2px; background: var(--regla); border-radius: var(--r-chico); } .grupo-radio-titulo { display: none; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-media); } .opcion { position: relative; } .opcion input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .opcion span { display: grid; place-items: center; min-width: 2.5rem; min-height: 34px; padding: 0 0.5rem; font-size: var(--t-xs); font-weight: 600; color: var(--tinta-media); border-radius: 2px; transition: background-color 120ms ease, color 120ms ease; } .opcion:hover span { color: var(--tinta); } .opcion input:checked + span { background: var(--papel-alto); color: var(--marca); } .opcion input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 1px; } .form-acciones { display: flex; justify-content: flex-end; gap: var(--r-chico); margin-top: var(--r-lg); padding-top: var(--r-lg); border-top: 1px solid var(--regla); } .form-estado { display: block; min-height: 1.25rem; margin-top: var(--r-chico); font-size: var(--t-sm); } /* -------------------------------------------------------------------------- 10b. Listado: filtros, tabla y paginación -------------------------------------------------------------------------- */ .filtros { display: grid; grid-template-columns: 1fr; gap: var(--r-medio); margin-bottom: var(--r-medio); align-items: end; /* alinea las bases de los controles, no las puntas */ } /* El buscador crece; los 3 selects comparten el resto. Nada de "auto": la columna auto medía 685px por la opción larga y dejaba el buscador en 11px. */ @media (min-width: 52rem) { .filtros { grid-template-columns: minmax(0, 1.6fr) minmax(0, 3fr); gap: var(--r-medio); } } .filtros-busqueda { min-width: 0; } .campo-buscar { position: relative; } .lupa { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--tinta-tenue); pointer-events: none; } .campo-buscar .campo-input { padding-left: 2.25rem; } /* Las etiquetas miden una línea: así los 4 controles quedan alineados. */ .filtros .campo-etiqueta { min-height: 1.35rem; } .filtros-selects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--r-chico); min-width: 0; } /* min-width:0 + width:100% para que un