/* * Densidad de la interfaz: UNICO lugar donde se decide el tamano del texto y el alto de los campos. * * Taildash mide en `rem`. La raiz queda en 15px (mueve menu lateral, margenes y rellenos) y el texto se * controla con la escala de abajo: para hacer todo mas grande o mas pequeno se cambian estas variables, * nunca el `font-size` de un componente. Los componentes usan clases de la plantilla (text-xs, text-sm...) * y esas clases leen esta escala (ver "Escala tipografica"). * * Este proyecto no compila Tailwind: solo existen las clases que trae style.css; lo demas se define aqui. */ :root { --fs-base: 0.8667rem; /* texto general: tablas, campos, selects, botones, parrafos (13 px) */ --fs-small: 0.8rem; /* etiquetas de filtro, ayudas, errores, migas, pies (12 px) */ --fs-title: 0.95rem; /* titulos de seccion */ --fs-heading: 1.1rem; /* titulos de pagina */ --fs-display: 1.4rem; /* cifras grandes del panel de inicio */ --lh-text: 1.35; /* interlineado del texto corrido */ --field-lh: 1.1rem; /* alto de linea dentro de campos y botones */ --field-py: 0.3rem; /* relleno vertical de campos, botones y celdas (campo ~27 px) */ --field-px: 0.75rem; /* relleno horizontal de campos y celdas */ } html { font-size: 15px; } body { font-size: var(--fs-base); } /* ---- Escala tipografica: las clases de la plantilla leen las variables de arriba. ---- */ .text-xs { font-size: var(--fs-small); line-height: var(--lh-text); } .text-sm, .text-base { font-size: var(--fs-base); line-height: var(--lh-text); } .text-lg { font-size: var(--fs-title); line-height: 1.3; } .text-xl { font-size: var(--fs-heading); line-height: 1.3; } .text-2xl, .text-3xl { font-size: var(--fs-display); line-height: 1.25; } /* ---- Campos y botones: una sola medida de alto. `py-1.5` no existe en style.css, se define aqui. ---- */ .py-1\.5 { padding-top: var(--field-py); padding-bottom: var(--field-py); } input.leading-5, select.leading-5, textarea.leading-5, button.leading-5 { line-height: var(--field-lh); } button.py-2.px-4 { padding: var(--field-py) var(--field-px); } /* El contenido nunca debe sobrepasar el ancho de la ventana. */ .wrapper { max-width: 100vw; } /* El ultimo boton de la paginacion tenia margen negativo (-mr-0.5) para solapar bordes y desbordaba el listado ~2px, mostrando una barra de scroll horizontal vacia. */ .dataTable-pagination-list li:last-child button { margin-right: 0; } /* ------------------------------------------------------------------------------------------ * Tablas: mismo estilo que MesaFlow. * Encabezado de color con un separador fino entre titulos, celdas sin bordes verticales y * una linea suave entre filas. Se aplica con la clase `tabla-td` (TableDefault ya la lleva). * ------------------------------------------------------------------------------------------ */ .tabla-td { width: 100%; font-size: var(--fs-base); border-collapse: collapse; } .tabla-td th { position: relative; padding: var(--field-py) var(--field-px); } .tabla-td th + th::before { content: ""; position: absolute; left: 0; top: 50%; height: 1rem; width: 1px; transform: translateY(-50%); background-color: rgba(255, 255, 255, 0.7); } .tabla-td tbody tr { border-bottom: 1px solid #e5e7eb; } .tabla-td tbody tr.td-tr:hover { background-color: #f3f4f6; } .dark .tabla-td tbody tr { border-bottom-color: #374151; } .dark .tabla-td tbody tr.td-tr:hover { background-color: #1f2937; } /* Barra superior de un listado: buscador a la izquierda y "Mostrar N registros" a la derecha. */ .td-top { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0.75rem; margin-bottom: 0.75rem; padding: 0 0.5rem; } .td-top-buscar { flex: 1 1 16rem; padding-right: 1rem; margin-bottom: 0.25rem; } .td-top-mostrar { display: flex; align-items: center; margin-left: auto; margin-bottom: 0.25rem; white-space: nowrap; color: #4b5563; font-size: var(--fs-small); } .td-top-mostrar select { width: 5rem; margin: 0 0.5rem; } /* Celda de acciones: los botones de fila (clase `accion-fila`, la llevan todos los *ListButton) van siempre * en una sola fila, centrados y con la celda del ancho justo. Los botones tienen un margen derecho fijo * (ltr:mr-2) que los corria a la izquierda; dentro de una tabla se reparte por igual a ambos lados. */ .tabla-td td:has(.accion-fila) { width: 1%; white-space: nowrap; text-align: center; vertical-align: middle; } .tabla-td td .accion-fila { margin-left: 0.25rem; margin-right: 0.25rem; vertical-align: middle; } /* Si la tabla es mas ancha que su tarjeta y se desplaza, la columna de acciones (siempre la ultima) * queda fija al borde derecho para que los botones se vean siempre. El encabezado hereda el color del * (que pone el tema) a traves del . */ .tabla-td thead tr { background-color: inherit; } .tabla-td:has(td .accion-fila) thead th:last-child { position: sticky; right: 0; z-index: 1; background-color: inherit; } .tabla-td td:has(.accion-fila):last-child { position: sticky; right: 0; z-index: 1; background-color: #ffffff; } .tabla-td tbody tr.td-tr:hover > td:has(.accion-fila):last-child { background-color: #f3f4f6; } .tabla-td tbody tr.bg-gray-300 > td:has(.accion-fila):last-child { background-color: #d1d5db; } .dark .tabla-td td:has(.accion-fila):last-child { background-color: #1f2937; } /* ------------------------------------------------------------------------------------------ * vue-multiselect (SelectBuscable y los selectores asincronos) con la apariencia de un