/* * Formularios y fichas — docs/09-SHELL-Y-COMPONENTES.md §3.1. * * Una columna en formularios cortos, dos a partir de ocho campos, agrupados en * fieldset con título. Botones abajo a la derecha: primaria + cancelar. */ .formulario { display: grid; gap: var(--sp-4); max-width: 680px; } .formulario__acciones { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); justify-content: flex-end; align-items: center; } .rejilla-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } .rejilla-tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } /* Los formularios de filtro no son de carga: ocupan el ancho de la pantalla porque están arriba de la tabla que filtran, y recortarlos a 680 px los dejaría desalineados de lo que gobiernan. */ .formulario--filtro { max-width: none; } /* ------------------------------------------------------------------ * Alta y listado: el formulario a la izquierda, la tabla a la derecha. * * Es la forma de trabajo de quien carga datos —escribe, guarda, ve aparecer la * fila, escribe la siguiente— y evita el viaje a una pantalla de alta aparte. * * Un tercio y dos tercios, que es lo que pidió Luis en columnas de 4 y 8. El * formulario no necesita más: son tres o cuatro campos. La tabla sí, porque * lleva nombre, cuentas, estado y tres botones. * * Debajo de 900 px se apilan, con el formulario arriba: en una tablet, lo * primero que se busca es dónde escribir. * ------------------------------------------------------------------ */ .alta-y-listado { display: grid; gap: var(--sp-5); align-items: start; grid-template-columns: minmax(260px, 1fr) 2fr; } .alta-y-listado > * { min-width: 0; } @media (max-width: 900px) { .alta-y-listado { grid-template-columns: 1fr; } } /* La columna del formulario ocupa su tercio entero: el tope de 680 px de `.formulario` la dejaría flotando en un lugar arbitrario. */ .alta-y-listado .formulario { max-width: none; } /* ------------------------------------------------------------------ * La consulta de una entidad: su tarjeta y la tabla que la acompaña — S1. * * Cinco columnas y siete, pedido de Luis el 2026-08-24. La tarjeta angosta se * lee de arriba abajo y la tabla se queda con el ancho, que es lo que * necesita: seis columnas de producto en media pantalla no entran. * * Se apila en el mismo punto que `.alta-y-listado` —900 px— para que las dos * pantallas del módulo cambien de forma juntas. * ------------------------------------------------------------------ */ .ficha-y-tabla { display: grid; gap: var(--sp-5); align-items: start; grid-template-columns: 5fr 7fr; margin-bottom: var(--sp-4); } .ficha-y-tabla > * { min-width: 0; } @media (max-width: 900px) { .ficha-y-tabla { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * Tarjeta de entidad — `componentes/tarjeta_entidad.php`. * * La dibuja marca, rubro y unidad. Se destaca del blanco de las tablas que * tiene al lado con la cabecera en `--slate`, el oscuro que el sistema ya usa * para el sidebar y las barras: es el recurso que el design system tiene para * decir «esto manda», y no hace falta inventar un color que no esté en * `tokens.css`. * ------------------------------------------------------------------ */ .entidad { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; } .entidad__cabecera { background: var(--slate); color: #fff; padding: var(--sp-4) 18px; position: relative; } .entidad__tipo { margin: 0 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .entidad__nombre { margin: 0; font-size: var(--t-26); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; /* Un nombre largo parte en dos líneas antes que empujar la tarjeta. */ overflow-wrap: anywhere; } .entidad__subtitulo { margin: 4px 0 0; font-size: var(--t-13); color: var(--muted-2); } /* Arriba a la derecha, donde no compite con el nombre. Sobre el oscuro, la etiqueta clara del sistema se lee sin tocarle los colores. */ .entidad__estado { position: absolute; top: var(--sp-4); right: 18px; } /* Las dos cifras que se miran de reojo. Sobre `--paper`, que las separa de la cabecera oscura y de las filas blancas sin una tercera línea. */ .entidad__cifras { display: grid; grid-template-columns: 1fr 1fr; background: var(--paper); border-bottom: 1px solid var(--line); } .entidad__cifra { padding: var(--sp-3) 18px; } .entidad__cifra + .entidad__cifra { border-left: 1px solid var(--line); } .entidad__cifra b { display: block; font-family: var(--mono); font-size: var(--t-21); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; } .entidad__cifra span { display: block; margin-top: 3px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .entidad__cifra em { display: block; margin-top: 2px; font-size: var(--t-11); color: var(--muted-2); font-style: normal; } /* El resto, en filas: rótulo a la izquierda, valor a la derecha. En una columna de cinco doceavos, leer de arriba abajo es leer una sola vez. */ .entidad__datos { margin: 0; } .entidad__datos > div { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 18px; border-bottom: 1px solid var(--line-2); } .entidad__datos dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .entidad__datos dd { margin: 0; font-size: var(--t-13); text-align: right; } .entidad__pie { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) 18px; } /* ------------------------------------------------------------------ * Ficha: pares de dato y valor — S2. * * Para los encabezados de detalle: qué documento es, quién lo emitió, cuándo. * Es una lista de definiciones y no una tabla porque no son filas comparables * entre sí: son los datos de una sola cosa. * ------------------------------------------------------------------ */ .ficha { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .ficha dt { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 2px; } .ficha dd { margin: 0; font-size: var(--t-13); } .campo { display: grid; gap: 6px; } .campo__etiqueta { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .campo__control { font-family: var(--sans); font-size: var(--t-13); padding: var(--sp-2) 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); width: 100%; outline: none; } .campo__control:focus { border-color: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); } .campo__control--chico { font-size: var(--t-12); padding: 6px var(--sp-2); } select.campo__control { background: var(--surface); cursor: pointer; } .campo__ayuda { margin: 0; font-size: var(--t-11); color: var(--muted); line-height: 1.45; } .campo__fijo { margin: 0; font-size: var(--t-13); } /* * Error de campo: ícono + texto, nunca solo el color — docs/07 §6. * El ícono es decorativo; el aviso a lectores de pantalla lo da role="alert". */ .campo__error { margin: 0; font-size: var(--t-12); color: var(--alert); font-weight: 600; } .campo__error::before { content: "▲ "; } .casillas { display: grid; gap: 6px; } .casilla { display: flex; gap: var(--sp-2); align-items: baseline; cursor: pointer; font-size: var(--t-13); } .casilla code { font-size: var(--t-11); color: var(--muted); } fieldset.campo { border: 0; margin: 0; padding: 0; } .grupo-permisos { border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-3); } .grupo-permisos__titulo { font-size: var(--t-12); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 0 var(--sp-2); } .forma-corta { display: flex; gap: var(--sp-2); align-items: center; margin: 0; flex-wrap: wrap; } .forma-corta .campo__control { flex: 1; min-width: 180px; } .forma-en-linea { display: flex; gap: var(--sp-2); align-items: center; margin: 0; } .par-de-formas { display: grid; gap: var(--sp-3); } /* Estado vacío fuera de tabla. */ .vacio { border: 1px dashed var(--line); border-radius: var(--r); padding: var(--sp-5); text-align: center; } .vacio__titulo { margin: 0 0 var(--sp-1); font-weight: 650; } .vacio__ayuda { margin: 0; color: var(--muted); font-size: var(--t-12); } /* ============ CRITERIOS DE ACEPTACIÓN (panel de entregas) ============ */ .criterios { list-style: none; margin: 0; padding: 0; counter-reset: criterio; } .criterio { counter-increment: criterio; border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-2); position: relative; } .criterio::before { content: counter(criterio); position: absolute; left: calc(-1 * var(--sp-6)); top: var(--sp-3); width: var(--sp-5); text-align: right; font-family: var(--mono); color: var(--muted); font-size: var(--t-12); } .criterio--hecho { border-left: 3px solid var(--signal); background: var(--signal-soft); } .criterio--hecho .criterio__texto::before { content: "✓ "; color: var(--signal); font-weight: 700; } .criterio--sin-presentar { background: var(--paper); border-style: dashed; } .criterio--sin-presentar .criterio__texto { color: var(--muted); } .criterio__texto { margin: 0; line-height: 1.55; } .criterio__firma { margin: var(--sp-1) 0 0; font-size: var(--t-11); color: var(--muted); } .criterio__observacion { display: block; margin: var(--sp-1) 0 0; font-size: var(--t-12); color: var(--amber-dark); } .criterio__pendiente { margin: var(--sp-2) 0 0; font-size: var(--t-12); color: var(--muted); line-height: 1.5; } .criterio__pendiente .etiqueta { margin-right: var(--sp-2); } .criterio__acciones { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); } .criterio__acciones .campo__control { flex: 1; } .historial { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); } .historial__item { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: baseline; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-2); font-size: var(--t-12); } .historial__fecha { color: var(--muted); } .historial__quien { font-weight: 650; } .historial__detalle { color: var(--muted); flex: 1 1 100%; } /* Punto de corte del sistema: 900 px. Estaba en 700 —elegido a ojo— y eso hacía que dos formularios de la misma pantalla se apilaran en anchos distintos. Ver `docs/07` §8 y `tokens.css`. */ @media (max-width: 900px) { .rejilla-dos { grid-template-columns: 1fr; } .rejilla-tres { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ * Formulario a lo ancho — S1. * * Los campos van en filas de tres o cuatro, agrupados por lo que significan. * Una columna de campos apilados obliga a scrollear para ver un producto * entero, y quien carga el catálogo abre esa pantalla cien veces por día. * * El ancho de cada fila lo fija la propia fila con `--columnas`, porque no * todas se reparten igual: el nombre del producto necesita más que el código. * ------------------------------------------------------------------ */ .formulario--ancho { max-width: none; gap: var(--sp-4); } .rejilla { display: grid; grid-template-columns: var(--columnas, repeat(4, 1fr)); gap: var(--sp-3) var(--sp-4); align-items: start; } .bloque { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-4); display: grid; gap: var(--sp-3); } .bloque__titulo { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin: 0; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line-2); } .bloque__bajada { margin: 0; font-size: var(--t-12); color: var(--muted); line-height: 1.5; } .campo__control.der { text-align: right; font-family: var(--mono); } .campo__control--fuerte { font-weight: 700; font-size: var(--t-15); } /* * El desglose del precio. Un precio que sale de una caja negra no se puede * discutir con el proveedor ni explicar al vendedor. */ .desglose { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0; padding: var(--sp-3); border-radius: var(--r); background: var(--paper); font-size: var(--t-12); } .desglose > div { display: grid; gap: 2px; } .desglose dt { color: var(--muted); font-size: var(--t-11); } .desglose dd { margin: 0; font-family: var(--mono); font-weight: 650; } .desglose__final dd { color: var(--signal-dark); font-size: var(--t-15); font-weight: 800; } .desglose__final { margin-left: auto; text-align: right; } @media (max-width: 1280px) { .rejilla { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .rejilla { grid-template-columns: 1fr; } .desglose__final { margin-left: 0; text-align: left; } } /* ------------------------------------------------------------------ * Galería de imágenes de producto — S1. * Miniaturas en rejilla que se adapta sola: el catálogo se carga tanto * desde el escritorio del depósito como desde una tablet en el local. * ------------------------------------------------------------------ */ /* * **Todas del mismo tamaño, y chicas.** La rejilla era elástica * —`minmax(160px, 1fr)`— así que en una pantalla ancha cada miniatura se * estiraba hasta ocupar media fila y ninguna medía lo mismo que la de al lado. * Ahora la columna mide 132 px fijos y la foto es un cuadrado de 120: la * galería se lee como una grilla y no como un collage. El original se mira en * el visor. Pedido de Luis, 2026-08-24. * * `justify-content: start` para que las tarjetas no se repartan el sobrante: * con tres imágenes quedarían separadas a lo ancho de la pantalla. */ .galeria { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); grid-template-columns: repeat(auto-fill, 132px); justify-content: start; } .galeria__item { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); } /* La miniatura es un botón: abre el visor, y con el teclado se llega igual. */ .galeria__lupa { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; background: var(--paper); } .galeria__lupa img { width: 100%; height: 120px; object-fit: cover; display: block; transition: opacity .12s ease; } .galeria__lupa:hover img { opacity: .85; } .galeria__lupa:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; } /* Envuelve: cada miniatura lleva hasta cuatro acciones —principal, adelantar, atrasar, quitar— y en una tarjeta de 160 px no entran en una sola línea. Sin el wrap, los botones se aplastan hasta quedar impracticables con el dedo. */ .galeria__item figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2); font-size: var(--t-11); } /* ------------------------------------------------------------------ * Visor de imágenes — `assets/js/visor.js`, S1. * * La superposición donde se mira la imagen en su tamaño original. Se dibuja * una sola vez por página y se reusa. * * El fondo es casi negro y no un token de superficie a propósito: acá el * sistema desaparece y queda la foto. Es el único lugar donde eso vale. * ------------------------------------------------------------------ */ .visor { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-5); background: rgba(18, 23, 27, .92); } .visor[hidden] { display: none; } /* La página de atrás no se mueve mientras el visor está abierto: scrollear sobre la foto y ver correr el formulario detrás desorienta. */ body.con-visor { overflow: hidden; } .visor__marco { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); max-width: 100%; max-height: 100%; } /* Tamaño original, salvo que no entre: una foto de 4000 px no se muestra a 4000 px, se muestra entera. */ .visor__imagen { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: var(--r); background: var(--slate-2); } .visor__pie { color: #fff; font-size: var(--t-13); text-align: center; max-width: 70ch; opacity: .85; } .visor__cerrar, .visor__paso { color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px; display: flex; align-items: center; justify-content: center; flex: none; cursor: pointer; line-height: 1; } .visor__cerrar:hover, .visor__paso:hover { background: rgba(255, 255, 255, .18); } .visor__cerrar:focus-visible, .visor__paso:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .visor__cerrar { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 40px; height: 40px; font-size: var(--t-26); } .visor__paso { width: 48px; height: 48px; font-size: var(--t-26); } .visor__paso[hidden] { display: none; } .visor__contador { position: absolute; bottom: var(--sp-4); left: 0; right: 0; margin: 0; text-align: center; color: #fff; opacity: .7; font-size: var(--t-12); font-family: var(--mono); } /* En el teléfono las flechas quedarían encima de la foto y taparían justo lo que se quiere ver: bajan a los costados, más chicas. */ @media (max-width: 640px) { .visor { padding: var(--sp-3); gap: var(--sp-2); } .visor__paso { width: 36px; height: 36px; font-size: var(--t-21); } .visor__imagen { max-height: calc(100vh - 160px); } } /* Encabezado de panel con acciones a la derecha: título y bajada a la izquierda, botones al otro extremo. Lo usa la pantalla de transferencias. Venía de `backoffice.css`, que no lo cargaba nadie; se trajo acá al borrarlo. */ .panel__encabezado { display: flex; gap: var(--sp-4); align-items: flex-start; justify-content: space-between; margin-bottom: var(--sp-4); } .panel__encabezado .panel__bajada { margin-bottom: 0; } /* ------------------------------------------------------------------ * Tarjeta de lugares de venta — `precio/ajustes.php`, S1. * * La lista por la que se entra a los precios: la web y cada sucursal, con lo * que ya tiene cargado cada una. Pedido de Luis el 2026-08-26: entrar por * «dónde quiero cambiar el precio» y no por «qué producto». * * Es un `