Esta página reúne los formatos que deben usarse en todas las pantallas. Todo el sistema se carga con un único <link href="bipro-ui.css"> más Font Awesome. Reutiliza estas clases en lugar de crear estilos nuevos por página, y consume siempre las variables de tokens.css en vez de escribir colores a mano.
Cada color tiene un significado fijo. No uses el azul para un botón de borrado ni el naranja para una acción principal.
Tipografía: 13px (--font-size-sm) es el tamaño de trabajo de tablas, botones y formularios; 11px (--font-size-xs) para cabeceras de tabla y etiquetas de filtro.
Navegación lateral de la aplicación. El módulo activo va en azul; los módulos aún no construidos se muestran deshabilitados con su etiqueta, para que se vea el mapa completo sin prometer que funcionan. El sidebar se filtra por rol: quien no tiene permiso no ve la entrada, en vez de verla y recibir un error al pulsarla.
Clases: .app-shell envuelve .sidebar + .app-main. Enlaces: .sidebar-link con .activo o .deshabilitado. En móvil (≤768px) el sidebar pasa a barra superior desplazable.
Clase base .btn más una variante de color. Solo una acción principal (azul) por pantalla.
Botón "Editar" universal: siempre .btn .btn-warning (naranja), icono fa-edit y texto "Editar". En pantallas con modo edición, al activarlo se convierte en "Salir" / "Cancelar" con .btn .btn-secondary.
Tamaños y estado deshabilitado:
Botones de icono tipo "chip" para las acciones dentro de una fila de tabla. Base .btn .btn-icon más un modificador de color.
Título y subtítulo a la izquierda, acciones a la derecha. Orden recomendado: [Maestro] · [Nuevo] · [Excel] · [Editar].
Estructura: .page-title-bar › .page-title-left (h1 + .page-subtitle) + .page-actions.
Barra de desplegables sobre la tabla. Los filtros son en cascada: cada uno solo ofrece los valores que existen para la combinación actual.
Contenedor .table-container con cabecera .table-header (título + contador .results-count) y la tabla .apple-table: cabecera fija, filas alternas, orden y filtro por columna.
| Código | Nombre | Estado | Acciones |
|---|---|---|---|
| 001 | Ejemplo uno | Activo | |
| 002 | Ejemplo dos | Inactivo | |
| 003 | Ejemplo tres | Alquiler |
Para tablas de pocas columnas, envuelve la columna de contenido (cabecera + filtros + tabla) en .tabla-estrecha para que no se estire a todo el ancho. La edición de un registro se hace en modal, no en línea.
La tabla arranca en modo lectura. Al pulsar Editar, tres señales visuales obligatorias: marco naranja en el contenedor, píldora "Modo edición activo" y borde rojo en cada celda modificada. Los cambios se acumulan y se guardan en lote, nunca celda a celda.
| Código | Nombre | Superficie |
|---|---|---|
| 001 | ||
| 002 |
Clases: .edit-mode-active (marco naranja) · .edit-mode-indicator / .edit-status.activo (píldora) · .cell-input.modified (celda cambiada). Al cancelar con cambios pendientes, modal de confirmación — nunca confirm() nativo. Detalle completo en docs/edicion.md.
Etiquetas para columnas de estado o categoría. Verde para positivo/activo, rojo para inactivo, azul para informativo, naranja para pendiente.
Etiqueta encima, control debajo. Borde fino, esquinas redondeadas y foco azul. Clase .form-field.
Acción terciaria sin fondo (.btn-link) y botón que activa o desactiva una vista (por ejemplo "mostrar inactivos").
El resultado de una acción se comunica con un toast (arriba a la derecha), nunca con alert(). Los avisos en línea (.alert) se usan para contexto permanente dentro de la página.
Caja centrada sobre fondo oscurecido. Abrir/cerrar = añadir/quitar .visible en .modal-overlay. Es donde se edita un registro.