/* ================================================================ GESIFLOW — Capa de marca ---------------------------------------------------------------- Se carga DESPUES de inspinia, site.css y nuevoEstilo.css. Unico punto de verdad del color y la tipografia del sistema. No editar public/inspinia/css/* : esta hoja redefine las variables de la plantilla, de modo que Inspinia se puede actualizar sin perder la identidad. Inspinia 5.0.0 renombro el prefijo de sus variables de --ins-* a --theme-*. Esta hoja ya usa el nombre nuevo. Si se vuelve a una version anterior de la plantilla, hay que deshacer ese renombrado. Identidad: grafito + oro. Firma visual: "la linea de acento" — una regla de oro de 2px bajo cada titulo, cabecera de tarjeta y encabezado de tabla. El contenido descansa sobre su base, y es el unico lugar donde el acento se usa lleno. INDICE 1. Tipografias 2. Tokens de marca (--gf-*) 3. Remapeo de variables Inspinia — modo claro 4. Remapeo de variables Inspinia — modo oscuro 5. Menu lateral y barra superior 6. Tipografia aplicada 7. FIRMA — la linea de acento 8. Botones 9. Insignias, alertas y utilidades de color 10. Tablas 11. Formularios 12. Tarjetas 13. Compatibilidad con tokens heredados (--esm, --ink, --amb...) 14. Acceso / login 15. Paleta expuesta para graficos 16. Accesibilidad y responsive ================================================================ */ /* ---------------------------------------------------------------- 1. TIPOGRAFIAS Bodoni Moda — didone de alto contraste. Solo en titulos y cifras grandes. Las escrituras publicas y los titulos de propiedad se componen en serif de alto contraste; el sistema convierte inmuebles en papeles. Inter Tight — cuerpo e interfaz. Mas estrecha que Inter: gana caracteres por linea en las tablas de cobranza. IBM Plex Mono— identificadores (cedula, RUC, codigo de inmueble, numero de recibo) que se comparan caracter a caracter. ---------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600;6..96,700&family=Inter+Tight:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ---------------------------------------------------------------- 1b. TOKENS QUE NO SON COLOR Tipografia, radios, grosores y sombras. No cambian con el tema, asi que viven aqui y no se repiten cuatro veces en temas.css. ---------------------------------------------------------------- */ :root { /* Tipografia */ --gf-fuente-titulo: 'Bodoni Moda', 'Times New Roman', serif; --gf-fuente-cuerpo: 'Inter Tight', 'Segoe UI', system-ui, sans-serif; --gf-fuente-id: 'IBM Plex Mono', ui-monospace, monospace; /* Forma */ --gf-r-sm: 5px; --gf-r: 8px; --gf-r-lg: 12px; --gf-regla: 2px; /* grosor de la linea de acento */ /* Sombras: se tiñen con la estructura del tema, no con negro puro */ --gf-sombra-sm: 0 1px 2px rgba(var(--gf-est-950-rgb), .06), 0 1px 3px rgba(var(--gf-est-950-rgb), .05); --gf-sombra: 0 2px 4px rgba(var(--gf-est-950-rgb), .05), 0 6px 16px rgba(var(--gf-est-950-rgb), .07); --gf-sombra-lg: 0 12px 32px rgba(var(--gf-est-950-rgb), .14); } /* ---------------------------------------------------------------- 3. VARIABLES INSPINIA — MODO CLARO ---------------------------------------------------------------- */ :root, [data-bs-theme=light] { --theme-primary: var(--gf-est-900); --theme-primary-rgb: var(--gf-primary-rgb); --theme-primary-text-emphasis: var(--gf-est-900-o13); --theme-primary-bg-subtle: var(--gf-est-900-c90); --theme-primary-border-subtle: var(--gf-est-900-c68); --theme-secondary: var(--gf-secondary); --theme-secondary-rgb: var(--gf-secondary-rgb); --theme-secondary-text-emphasis: var(--gf-secondary-texto); --theme-secondary-bg-subtle: var(--gf-est-500-c90); --theme-secondary-border-subtle: var(--gf-secondary-borde); --theme-success: var(--gf-success); --theme-success-rgb: var(--gf-success-rgb); --theme-success-text-emphasis: var(--gf-success-texto); --theme-success-bg-subtle: var(--gf-success-tenue); --theme-success-border-subtle: var(--gf-success-borde); --theme-info: var(--gf-info); --theme-info-rgb: var(--gf-info-rgb); --theme-info-text-emphasis: var(--gf-info-texto); --theme-info-bg-subtle: var(--gf-info-tenue); --theme-info-border-subtle: var(--gf-info-borde); --theme-warning: var(--gf-warning); --theme-warning-rgb: var(--gf-warning-rgb); --theme-warning-text-emphasis: var(--gf-warning-texto); --theme-warning-bg-subtle: var(--gf-warning-tenue); --theme-warning-border-subtle: var(--gf-warning-borde); --theme-danger: var(--gf-danger); --theme-danger-rgb: var(--gf-danger-rgb); --theme-danger-text-emphasis: var(--gf-danger-texto); --theme-danger-bg-subtle: var(--gf-danger-tenue); --theme-danger-border-subtle: var(--gf-danger-borde); --theme-purple: var(--gf-purple); --theme-purple-rgb: var(--gf-purple-rgb); --theme-purple-text-emphasis: var(--gf-purple-texto); --theme-purple-bg-subtle: var(--gf-purple-tenue); --theme-purple-border-subtle: var(--gf-purple-borde); --theme-dark: var(--gf-est-900); --theme-dark-rgb: var(--gf-dark-rgb); --theme-dark-text-emphasis: var(--gf-est-900-o13); --theme-dark-bg-subtle: var(--gf-est-900-c90); --theme-dark-border-subtle: var(--gf-est-900-c68); --theme-light: var(--gf-hueso); --theme-light-rgb: var(--gf-light-rgb); --theme-light-text-emphasis: var(--gf-hueso-texto); --theme-light-bg-subtle: var(--gf-est-500-c99); --theme-light-border-subtle: var(--gf-hueso-c66); /* Cuerpo y bordes */ --theme-body-bg: var(--gf-hueso); --theme-body-bg-rgb: 246, 245, 242; --theme-body-color: var(--gf-est-800); --theme-body-color-rgb: 41, 45, 51; --theme-emphasis-color: var(--gf-est-900); --theme-secondary-color: var(--gf-est-500); --theme-secondary-color-rgb: 107, 114, 124; --theme-secondary-bg: var(--gf-papel); --theme-tertiary-color: var(--gf-est-400); --theme-tertiary-bg: var(--gf-hueso); --theme-heading-color: var(--gf-est-900); --theme-border-color: var(--gf-linea); --theme-border-color-translucent: var(--gf-linea-suave); --theme-highlight-bg: var(--gf-acento-tenue); --theme-highlight-color: var(--gf-est-900); --theme-code-color: var(--gf-danger); /* Enlaces: oro profundo, el unico oro que pasa AA como texto */ --theme-link-color: var(--gf-acento-profundo); --theme-link-color-rgb: 138, 106, 32; --theme-link-hover-color: var(--gf-acento-enlace-hover); --theme-link-hover-color-rgb: 113, 87, 26; /* Foco visible: anillo de oro */ --theme-focus-ring-width: 3px; --theme-focus-ring-opacity: .38; --theme-focus-ring-color: rgba(var(--gf-acento-rgb), .38); /* Validacion */ --theme-form-valid-color: var(--gf-success); --theme-form-valid-border-color: var(--gf-success); --theme-form-invalid-color: var(--gf-danger); --theme-form-invalid-border-color: var(--gf-danger); /* Tipografia y forma */ --theme-font-sans-serif: var(--gf-fuente-cuerpo); --theme-font-monospace: var(--gf-fuente-id); --theme-body-font-family: var(--gf-fuente-cuerpo); --theme-body-font-size: .8125rem; --theme-border-radius: var(--gf-r); --theme-border-radius-sm: var(--gf-r-sm); --theme-border-radius-lg: var(--gf-r-lg); --theme-box-shadow: var(--gf-sombra-sm); --theme-box-shadow-sm: var(--gf-sombra-sm); --theme-box-shadow-lg: var(--gf-sombra-lg); } /* ---------------------------------------------------------------- 4. VARIABLES INSPINIA — MODO OSCURO ---------------------------------------------------------------- */ [data-bs-theme=dark] { --theme-primary: var(--gf-acento-claro); --theme-primary-rgb: var(--gf-primary-rgb); --theme-primary-text-emphasis: var(--gf-acento-claro-texto-osc); --theme-primary-bg-subtle: var(--gf-acento-claro-tenue-osc); --theme-primary-border-subtle: var(--gf-acento-claro-borde-osc); --theme-secondary: var(--gf-secondary); --theme-secondary-rgb: var(--gf-secondary-rgb); --theme-secondary-text-emphasis: var(--gf-secondary-texto-osc); --theme-secondary-bg-subtle: var(--gf-secondary-tenue-osc); --theme-secondary-border-subtle: var(--gf-est-500-o40); --theme-success: var(--gf-success); --theme-success-rgb: var(--gf-success-rgb); --theme-success-text-emphasis: var(--gf-success-texto-osc); --theme-success-bg-subtle: var(--gf-success-tenue-osc); --theme-success-border-subtle: var(--gf-success-borde-osc); --theme-info: var(--gf-info); --theme-info-rgb: var(--gf-info-rgb); --theme-info-text-emphasis: var(--gf-info-texto-osc); --theme-info-bg-subtle: var(--gf-info-tenue-osc); --theme-info-border-subtle: var(--gf-info-borde-osc); --theme-warning: var(--gf-warning); --theme-warning-rgb: var(--gf-warning-rgb); --theme-warning-text-emphasis: var(--gf-warning-texto-osc); --theme-warning-bg-subtle: var(--gf-warning-tenue-osc); --theme-warning-border-subtle: var(--gf-warning-borde-osc); --theme-danger: var(--gf-danger); --theme-danger-rgb: var(--gf-danger-rgb); --theme-danger-text-emphasis: var(--gf-danger-texto-osc); --theme-danger-bg-subtle: var(--gf-danger-tenue-osc); --theme-danger-border-subtle: var(--gf-danger-borde-osc); --theme-purple: var(--gf-purple); --theme-purple-rgb: var(--gf-purple-rgb); --theme-purple-text-emphasis: var(--gf-purple-texto-osc); --theme-purple-bg-subtle: var(--gf-purple-tenue-osc); --theme-purple-border-subtle: var(--gf-purple-borde-osc); --theme-dark: var(--gf-est-200); --theme-dark-rgb: var(--gf-dark-rgb); --theme-dark-text-emphasis: var(--gf-est-200-c41); --theme-dark-bg-subtle: var(--gf-est-950-c21); --theme-dark-border-subtle: var(--gf-est-200-o40); --theme-light: var(--gf-est-800); --theme-light-rgb: var(--gf-light-rgb); --theme-light-text-emphasis: var(--gf-est-800-c42); --theme-light-bg-subtle: var(--gf-est-950-o33); --theme-light-border-subtle: var(--gf-est-900-o15); --theme-body-bg: var(--gf-est-950); --theme-body-bg-rgb: 21, 23, 26; --theme-body-color: var(--gf-est-200); --theme-body-color-rgb: 207, 211, 217; --theme-emphasis-color: var(--gf-hueso); --theme-secondary-color: var(--gf-est-400); --theme-secondary-bg: var(--gf-est-900); --theme-tertiary-color: var(--gf-est-500); --theme-tertiary-bg: var(--gf-est-800); --theme-heading-color: var(--gf-hueso); --theme-border-color: var(--gf-est-700); --theme-border-color-translucent: var(--gf-est-800); --theme-link-color: var(--gf-acento-claro); --theme-link-color-rgb: 212, 172, 87; --theme-link-hover-color: var(--gf-acento-claro-hover); --theme-link-hover-color-rgb: 222, 192, 127; --theme-highlight-bg: var(--gf-acento-osc-fondo); --theme-highlight-color: var(--gf-hueso); } /* Superficies en modo oscuro. Van en su propia regla con html[data-tema] porque temas.css declara --gf-papel y --gf-linea en html[data-tema=...] (especificidad 0,1,1), y eso le ganaba a [data-bs-theme=dark] (0,1,0): las tarjetas quedaban blancas con el texto claro encima. Con 0,2,1 el modo oscuro manda. --gf-hueso NO se redefine aquí a propósito: en oscuro se usa como color de texto claro (títulos, ítems activos). Oscurecerlo dejaría ese texto sin contraste. El fondo de página oscuro ya lo pone --theme-body-bg. */ html[data-tema][data-bs-theme=dark] { --gf-papel: var(--gf-est-900); --gf-linea: var(--gf-est-700); } /* ---------------------------------------------------------------- 5. MENU LATERAL Y BARRA SUPERIOR El grafito vive aqui — es cromo, no contenido. El area de trabajo queda en hueso para poder leer tablas ocho horas seguidas. ---------------------------------------------------------------- */ html[data-menu-color=dark], html[data-menu-color=gray], html[data-menu-color=light], html[data-bs-theme=dark][data-menu-color=dark], html[data-bs-theme=dark][data-menu-color=gray], html[data-bs-theme=dark][data-menu-color=light] { --theme-sidenav-bg: var(--gf-cromo-bg); --theme-sidenav-border-color: var(--gf-cromo-borde); --theme-sidenav-item-color: var(--gf-cromo-fg); --theme-sidenav-item-hover-color: var(--gf-cromo-fg-fuerte); --theme-sidenav-item-hover-bg: var(--gf-cromo-hover-bg); --theme-sidenav-item-active-color: var(--gf-cromo-activo); --theme-sidenav-item-active-bg: var(--gf-cromo-bg-2); } /* Titulos de seccion del menu: versalitas espaciadas, en oro apagado */ .side-nav .side-nav-title { font-family: var(--gf-fuente-cuerpo); font-size: .625rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gf-cromo-titulo); } /* Item activo: plomada de oro en el canto izquierdo. Es el otro eje de la misma idea — la linea horizontal cimienta, la vertical aploma. */ .side-nav .side-nav-link { position: relative; border-radius: 0 var(--gf-r-sm) var(--gf-r-sm) 0; } .side-nav .side-nav-item.active > .side-nav-link::before, .side-nav .side-nav-link.active::before, .side-nav .side-nav-link[aria-expanded=true]::before { content: ""; position: absolute; inset-inline-start: 0; inset-block: 6px; width: 3px; border-radius: 0 2px 2px 0; background: var(--gf-acento); } .side-nav .menu-icon i { transition: color .18s ease; } .side-nav .side-nav-item.active > .side-nav-link .menu-icon i, .side-nav .side-nav-link.active .menu-icon i { color: var(--gf-acento-claro); } /* El pie del menu (Cerrar sesion) esta al final del archivo, seccion 22. */ /* Marca del menu: sentada sobre su propia linea de acento */ .sidenav-menu > a.logo { position: relative; padding-block: 6px; } .sidenav-menu > a.logo::after { content: ""; position: absolute; inset-inline: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--gf-acento) 0%, rgba(var(--gf-acento-rgb), 0) 82%); } /* Barra superior La barra usa el MISMO cromo que el menu: --gf-cromo-bg. Antes iba en papel, de modo que con menu superior quedaban tres bandas de tres colores apiladas —barra blanca, menu oscuro, migas grises— antes de llegar al contenido. Con el cromo compartido, barra y menu son una sola pieza y el area de trabajo empieza donde empieza el hueso. El tema `plantilla` es la excepcion: existe para reproducir el Inspinia original, donde el cromo es claro. Ahi la barra toma --gf-hueso, que en ese tema vale exactamente el gris del data-topbar-color=gray de la plantilla, y queda separada del menu blanco de abajo. No se toca temas.css: lo genera build_temas.py y dice "no editar a mano". El token se deriva aqui de los que ya existen, asi que se mantiene la regla de cero literales de color en este archivo. */ :root { --gf-topbar-bg: var(--gf-cromo-bg); } html[data-tema=plantilla] { --gf-topbar-bg: var(--gf-hueso); } /* Sobre fondo oscuro el contenido de la barra tiene que cambiar con ella: los tokens de item pasan del gris de texto (--gf-est-600) al gris de cromo, que es el que esta calculado para leerse sobre el menu. En `plantilla` esos mismos tokens son oscuros sobre claro, asi que la regla vale para los cinco temas sin bifurcar. */ html[data-topbar-color=light], html[data-topbar-color=gray], html[data-topbar-color=dark] { --theme-topbar-bg: var(--gf-topbar-bg); --theme-topbar-item-color: var(--gf-cromo-fg); --theme-topbar-item-hover-color: var(--gf-cromo-fg-fuerte); --theme-topbar-search-bg: var(--gf-cromo-bg-2); --theme-topbar-search-border: var(--gf-cromo-borde); } /* En modo oscuro el cromo ya es oscuro: la barra sigue al menu igual que en claro, sin un juego de colores aparte. */ [data-bs-theme=dark] html[data-topbar-color=light], [data-bs-theme=dark] html[data-topbar-color=gray], html[data-bs-theme=dark] { --theme-topbar-bg: var(--gf-topbar-bg); --theme-topbar-item-color: var(--gf-cromo-fg); --theme-topbar-item-hover-color: var(--gf-cromo-fg-fuerte); } .app-topbar { border-bottom: 1px solid var(--gf-cromo-borde); } /* El fondo lo pinta .app-topbar, pero la banda que se ve es el contenedor de dentro. Con menu superior Inspinia le quita a .app-topbar el borde y la sombra, asi que sin esto no hay nada que dibuje la franja. */ .app-topbar .topbar-menu { background: var(--gf-topbar-bg); border-bottom-color: var(--gf-cromo-borde); } /* Textos sueltos de la barra. Son
, asi que heredan el color de encabezado del tema y no el de item: hay que traerlos al cromo a mano o se quedan oscuros sobre oscuro. */ .app-topbar .topbar-menu h5, .app-topbar .topbar-link, .gf-usuario-nombre { color: var(--gf-cromo-fg-fuerte); } .app-topbar .topbar-link:hover, .app-topbar .topbar-link:focus { color: var(--gf-cromo-activo); } /* El color del logotipo de la barra se define en la seccion 21, junto al resto de la marca. Ponerlo aqui tambien no servia de nada: aquella va despues en el archivo y con la misma especificidad, asi que ganaba. */ /* El boton de claro/oscuro dibuja iconos lucide con currentColor */ #light-dark-mode { color: var(--gf-cromo-fg); } #light-dark-mode:hover { color: var(--gf-cromo-activo); } /* Nombre del proyecto activo en la barra: es el dato que orienta toda la sesion, asi que se marca con oro y no con peso tipografico */ /* Nombre del proyecto activo en la barra: es el dato que orienta toda la sesion, asi que se marca con oro y no con peso tipografico. Sobre cromo el oro que lee es --gf-cromo-activo, el mismo que marca el item activo del menu; --gf-acento-profundo esta calculado para fondo claro y sobre el grafito se apaga. */ #topbar-proyecto-nombre, .app-topbar .selProyectoName { font-family: var(--gf-fuente-cuerpo); font-weight: 600; letter-spacing: .01em; color: var(--gf-cromo-activo); } /* En el menu lateral de pantalla chica el selector vive sobre el mismo cromo, asi que comparte color. */ .side-nav .selProyectoName { color: var(--gf-cromo-activo); } /* ---------------------------------------------------------------- 6. TIPOGRAFIA APLICADA ---------------------------------------------------------------- */ body { font-family: var(--gf-fuente-cuerpo); font-feature-settings: "cv05", "ss03"; -webkit-font-smoothing: antialiased; } /* Bodoni solo en display. En cuerpo o tabla dañaria la lectura. */ h1, .h1, h2, .h2, .gf-titulo, .rp-header .title, .uafe-page-hdr h1, .ec-hdr h1 { font-family: var(--gf-fuente-titulo); font-weight: 600; font-optical-sizing: auto; letter-spacing: -.005em; color: var(--theme-heading-color); } h1, .h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.15; } h2, .h2 { font-size: clamp(1.25rem, 1rem + .9vw, 1.55rem); line-height: 1.2; } /* h3-h6 y cabeceras de tarjeta se quedan en Inter Tight: son etiquetas de navegacion, no titulos de documento. */ h3, .h3, h4, .h4, h5, .h5, h6, .h6, .card-header, .card-title { font-family: var(--gf-fuente-cuerpo); font-weight: 600; letter-spacing: -.006em; } /* Antetitulo: versalita espaciada. Encabeza secciones sin gritar. */ .gf-antetitulo { font-family: var(--gf-fuente-cuerpo); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gf-acento-profundo); } [data-bs-theme=dark] .gf-antetitulo { color: var(--gf-acento-claro); } /* Cifra de display — Bodoni con numeros tabulares para KPI grandes */ .gf-cifra { font-family: var(--gf-fuente-titulo); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--theme-heading-color); } /* Identificadores: cedula, RUC, codigo de inmueble, No. de recibo. Monoespaciada porque se comparan caracter a caracter. */ .gf-id, .font-mono, code, kbd, samp { font-family: var(--gf-fuente-id); font-size: .95em; letter-spacing: -.01em; } /* Todo numero en tabla va tabular: las columnas de dinero deben alinearse en la coma sin que el ojo trabaje. */ table td, table th, .minitabla td, .minitabla th, .amount, .text-end, .gf-num { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- 7. FIRMA — LA LINEA DE GESIFLOWCION Una regla de oro de 2px bajo el titulo de pagina y bajo cada cabecera de tarjeta y de tabla. Codifica jerarquia: el contenido descansa sobre su base. Es el unico uso de oro lleno en la interfaz, y por eso no se gasta en nada mas. ---------------------------------------------------------------- */ /* Cabecera de pagina */ .rp-header, .uafe-page-hdr, .ec-hdr, .gf-header { position: relative; display: flex; align-items: center; gap: 1rem; background: var(--gf-papel); border: 1px solid var(--gf-linea); border-radius: var(--gf-r) var(--gf-r) 0 0; border-bottom: 0; padding: 1.1rem 1.35rem; margin-bottom: 1.25rem; box-shadow: var(--gf-sombra-sm); } .rp-header::after, .uafe-page-hdr::after, .ec-hdr::after, .gf-header::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: var(--gf-regla); background: var(--gf-acento); } /* El icono de la cabecera: placa de grafito, como el isotipo */ .rp-header .icon, .gf-header .icon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--gf-est-900); color: var(--gf-acento-claro); box-shadow: inset 0 0 0 1px rgba(var(--gf-acento-rgb), .32); } .rp-header .icon i, .gf-header .icon i { color: var(--gf-acento-claro) !important; } .rp-header .title, .gf-header .title { font-size: 1.4rem; line-height: 1.2; } .rp-header .sub, .gf-header .sub { font-size: .8125rem; font-weight: 500; color: var(--gf-est-500); } /* Cabecera de tarjeta: misma regla, a menor escala */ .card > .card-header { position: relative; background: var(--gf-papel); border-bottom: 1px solid var(--gf-linea); font-size: .9375rem; padding-block: .8rem; } .card > .card-header::after { content: ""; position: absolute; inset-inline-start: 0; bottom: -1px; width: 46px; height: var(--gf-regla); background: var(--gf-acento); } /* Encabezado de tabla: grafito con la regla de oro al pie */ .table > thead > tr > th, .minitabla > thead > tr > th, .table-dark2 th { background: var(--gf-cromo-tabla-bg) !important; color: var(--gf-cromo-tabla-fg) !important; font-family: var(--gf-fuente-cuerpo); font-size: .6875rem !important; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; border-bottom: var(--gf-regla) solid var(--gf-acento) !important; vertical-align: middle; } /* thead .table-light: se respeta la intencion de cabecera suave, pero sigue apoyada en su linea */ .table > thead.table-light > tr > th, .minitabla > thead.table-light > tr > th { background: var(--gf-hueso) !important; color: var(--gf-est-700) !important; border-bottom: var(--gf-regla) solid var(--gf-acento) !important; } [data-bs-theme=dark] .table > thead.table-light > tr > th, [data-bs-theme=dark] .minitabla > thead.table-light > tr > th { background: var(--gf-est-800) !important; color: var(--gf-est-200) !important; } /* ---------------------------------------------------------------- 8. BOTONES btn-primary es grafito, no oro: aparece cientos de veces por pantalla y el oro dejaria de ser un acento. Lleva la linea de acento como sombra interior, sin alterar su geometria al pasar el cursor. ---------------------------------------------------------------- */ .btn-primary { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-est-900); --theme-btn-border-color: var(--gf-est-900); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-est-900-c12); --theme-btn-hover-border-color: var(--gf-est-900-c12); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-est-900-c6); --theme-btn-active-border-color: var(--gf-est-900-c6); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-est-900); --theme-btn-disabled-border-color: var(--gf-est-900); } .btn-outline-primary { --theme-btn-color: var(--gf-est-900); --theme-btn-border-color: var(--gf-est-950-c54); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-est-900); --theme-btn-hover-border-color: var(--gf-est-900); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-est-900-c6); --theme-btn-active-border-color: var(--gf-est-900-c6); } .btn-secondary { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-secondary); --theme-btn-border-color: var(--gf-secondary); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-secondary-hover); --theme-btn-hover-border-color: var(--gf-secondary-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-est-500-o17); --theme-btn-active-border-color: var(--gf-est-500-o17); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-secondary); --theme-btn-disabled-border-color: var(--gf-secondary); } .btn-outline-secondary { --theme-btn-color: var(--gf-secondary); --theme-btn-border-color: var(--gf-secondary-borde-suave); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-secondary); --theme-btn-hover-border-color: var(--gf-secondary); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-est-500-o17); --theme-btn-active-border-color: var(--gf-est-500-o17); } .btn-success { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-success); --theme-btn-border-color: var(--gf-success); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-success-hover); --theme-btn-hover-border-color: var(--gf-success-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-success-activo); --theme-btn-active-border-color: var(--gf-success-activo); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-success); --theme-btn-disabled-border-color: var(--gf-success); } .btn-outline-success { --theme-btn-color: var(--gf-success); --theme-btn-border-color: var(--gf-success-borde-suave); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-success); --theme-btn-hover-border-color: var(--gf-success); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-success-activo); --theme-btn-active-border-color: var(--gf-success-activo); } .btn-info { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-info); --theme-btn-border-color: var(--gf-info); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-info-hover); --theme-btn-hover-border-color: var(--gf-info-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-info-activo); --theme-btn-active-border-color: var(--gf-info-activo); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-info); --theme-btn-disabled-border-color: var(--gf-info); } .btn-outline-info { --theme-btn-color: var(--gf-info); --theme-btn-border-color: var(--gf-info-borde-suave); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-info); --theme-btn-hover-border-color: var(--gf-info); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-info-activo); --theme-btn-active-border-color: var(--gf-info-activo); } .btn-warning { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-warning); --theme-btn-border-color: var(--gf-warning); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-warning-hover); --theme-btn-hover-border-color: var(--gf-warning-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-warning-activo); --theme-btn-active-border-color: var(--gf-warning-activo); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-warning); --theme-btn-disabled-border-color: var(--gf-warning); } .btn-outline-warning { --theme-btn-color: var(--gf-warning); --theme-btn-border-color: var(--gf-warning-borde-suave); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-warning); --theme-btn-hover-border-color: var(--gf-warning); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-warning-activo); --theme-btn-active-border-color: var(--gf-warning-activo); } .btn-danger { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-danger); --theme-btn-border-color: var(--gf-danger); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-danger-hover); --theme-btn-hover-border-color: var(--gf-danger-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-danger-activo); --theme-btn-active-border-color: var(--gf-danger-activo); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-danger); --theme-btn-disabled-border-color: var(--gf-danger); } .btn-outline-danger { --theme-btn-color: var(--gf-danger); --theme-btn-border-color: var(--gf-danger-borde-suave); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-danger); --theme-btn-hover-border-color: var(--gf-danger); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-danger-activo); --theme-btn-active-border-color: var(--gf-danger-activo); } .btn-purple { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-purple); --theme-btn-border-color: var(--gf-purple); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-purple-hover); --theme-btn-hover-border-color: var(--gf-purple-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-purple-activo); --theme-btn-active-border-color: var(--gf-purple-activo); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-purple); --theme-btn-disabled-border-color: var(--gf-purple); } .btn-outline-purple { --theme-btn-color: var(--gf-purple); --theme-btn-border-color: var(--gf-purple-borde-suave); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-purple); --theme-btn-hover-border-color: var(--gf-purple); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-purple-activo); --theme-btn-active-border-color: var(--gf-purple-activo); } .btn-dark { --theme-btn-color: var(--gf-hueso); --theme-btn-bg: var(--gf-est-900); --theme-btn-border-color: var(--gf-est-900); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-est-900-c12); --theme-btn-hover-border-color: var(--gf-est-900-c12); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-est-900-c6); --theme-btn-active-border-color: var(--gf-est-900-c6); --theme-btn-disabled-color: var(--gf-hueso); --theme-btn-disabled-bg: var(--gf-est-900); --theme-btn-disabled-border-color: var(--gf-est-900); } .btn-outline-dark { --theme-btn-color: var(--gf-est-900); --theme-btn-border-color: var(--gf-est-950-c54); --theme-btn-hover-color: var(--gf-hueso); --theme-btn-hover-bg: var(--gf-est-900); --theme-btn-hover-border-color: var(--gf-est-900); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-hueso); --theme-btn-active-bg: var(--gf-est-900-c6); --theme-btn-active-border-color: var(--gf-est-900-c6); } .btn-light { --theme-btn-color: var(--gf-est-900); --theme-btn-bg: var(--gf-hueso); --theme-btn-border-color: var(--gf-hueso); --theme-btn-hover-color: var(--gf-est-900); --theme-btn-hover-bg: var(--gf-hueso-hover); --theme-btn-hover-border-color: var(--gf-hueso-hover); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-est-900); --theme-btn-active-bg: var(--gf-hueso-activo); --theme-btn-active-border-color: var(--gf-hueso-activo); --theme-btn-disabled-color: var(--gf-est-900); --theme-btn-disabled-bg: var(--gf-hueso); --theme-btn-disabled-border-color: var(--gf-hueso); } .btn-outline-light { --theme-btn-color: var(--gf-hueso-o12); --theme-btn-border-color: var(--gf-hueso-c51); --theme-btn-hover-color: var(--gf-est-900); --theme-btn-hover-bg: var(--gf-hueso); --theme-btn-hover-border-color: var(--gf-hueso); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); --theme-btn-active-color: var(--gf-est-900); --theme-btn-active-bg: var(--gf-hueso-activo); --theme-btn-active-border-color: var(--gf-hueso-activo); } /* Modo oscuro: outline-primary y outline-dark usan la estructura (navy/grafito) como color de texto y borde, que sobre el fondo oscuro desaparece. En oscuro pasan al acento claro y a la estructura clara. */ [data-bs-theme=dark] .btn-outline-primary { --theme-btn-color: var(--gf-acento-claro); --theme-btn-border-color: var(--gf-acento-claro); --theme-btn-hover-color: var(--gf-est-950); --theme-btn-hover-bg: var(--gf-acento-claro); --theme-btn-hover-border-color: var(--gf-acento-claro); --theme-btn-active-color: var(--gf-est-950); --theme-btn-active-bg: var(--gf-acento-claro); --theme-btn-active-border-color: var(--gf-acento-claro); } [data-bs-theme=dark] .btn-outline-dark { --theme-btn-color: var(--gf-est-300); --theme-btn-border-color: var(--gf-est-500); --theme-btn-hover-color: var(--gf-est-950); --theme-btn-hover-bg: var(--gf-est-300); --theme-btn-hover-border-color: var(--gf-est-300); --theme-btn-active-color: var(--gf-est-950); --theme-btn-active-bg: var(--gf-est-300); --theme-btn-active-border-color: var(--gf-est-300); } .btn { font-family: var(--gf-fuente-cuerpo); font-weight: 600; letter-spacing: .005em; border-radius: var(--gf-r-sm); } /* La linea de acento del boton principal */ .btn-primary, .btn-dark { box-shadow: inset 0 -2px 0 rgba(var(--gf-acento-rgb), .85); } .btn-primary:hover, .btn-dark:hover { box-shadow: inset 0 -2px 0 var(--gf-acento-claro); } .btn-primary:active, .btn-primary.active, .btn-dark:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, .28); } /* Accion principal de una pantalla: oro lleno, texto grafito. Reservado para un solo boton por vista (entrar, guardar venta, registrar pago). Texto grafito porque el blanco sobre oro da 2.9:1 y no pasa AA. */ .btn-oro { --theme-btn-color: var(--gf-est-900); --theme-btn-bg: var(--gf-acento); --theme-btn-border-color: var(--gf-acento); --theme-btn-hover-color: var(--gf-est-900); --theme-btn-hover-bg: var(--gf-acento-claro); --theme-btn-hover-border-color: var(--gf-acento-claro); --theme-btn-active-color: var(--gf-est-900); --theme-btn-active-bg: var(--gf-acento-activo); --theme-btn-active-border-color: var(--gf-acento-activo); --theme-btn-disabled-color: var(--gf-est-900); --theme-btn-disabled-bg: var(--gf-acento); --theme-btn-disabled-border-color: var(--gf-acento); --theme-btn-focus-shadow-rgb: var(--gf-acento-rgb); color: var(--gf-est-900); font-weight: 700; } .btn-link { color: var(--theme-link-color); font-weight: 600; } /* ---------------------------------------------------------------- 9. INSIGNIAS, ALERTAS Y UTILIDADES DE COLOR ---------------------------------------------------------------- */ .bg-primary { background-color: var(--gf-est-900) !important; } .text-bg-primary { background-color: var(--gf-est-900) !important; color: var(--gf-hueso) !important; } .badge.bg-primary { color: var(--gf-hueso) !important; } .border-primary { border-color: var(--gf-est-900) !important; } .text-primary { color: var(--gf-est-900) !important; } .alert-primary { --theme-alert-color: var(--gf-est-950-c1); --theme-alert-bg: var(--gf-est-900-c90); --theme-alert-border-color: var(--gf-est-900-c68); } .table-primary { --theme-table-color: var(--gf-est-900-o26); --theme-table-bg: var(--gf-est-900-c90); --theme-table-border-color: var(--gf-est-950-c75); } .bg-secondary { background-color: var(--gf-secondary) !important; } .text-bg-secondary { background-color: var(--gf-secondary) !important; color: var(--gf-hueso) !important; } .badge.bg-secondary { color: var(--gf-hueso) !important; } .border-secondary { border-color: var(--gf-secondary) !important; } .text-secondary { color: var(--gf-secondary) !important; } .alert-secondary { --theme-alert-color: var(--gf-secondary-enfasis); --theme-alert-bg: var(--gf-est-500-c90); --theme-alert-border-color: var(--gf-secondary-borde); } .table-secondary { --theme-table-color: var(--gf-secondary-texto-tabla); --theme-table-bg: var(--gf-est-500-c90); --theme-table-border-color: var(--gf-est-400-c65); } .bg-success { background-color: var(--gf-success) !important; } .text-bg-success { background-color: var(--gf-success) !important; color: var(--gf-hueso) !important; } .badge.bg-success { color: var(--gf-hueso) !important; } .border-success { border-color: var(--gf-success) !important; } .text-success { color: var(--gf-success) !important; } .alert-success { --theme-alert-color: var(--gf-success-enfasis); --theme-alert-bg: var(--gf-success-tenue); --theme-alert-border-color: var(--gf-success-borde); } .table-success { --theme-table-color: var(--gf-success-texto-tabla); --theme-table-bg: var(--gf-success-tenue); --theme-table-border-color: var(--gf-success-borde-tabla); } .bg-info { background-color: var(--gf-info) !important; } .text-bg-info { background-color: var(--gf-info) !important; color: var(--gf-hueso) !important; } .badge.bg-info { color: var(--gf-hueso) !important; } .border-info { border-color: var(--gf-info) !important; } .text-info { color: var(--gf-info) !important; } .alert-info { --theme-alert-color: var(--gf-info-enfasis); --theme-alert-bg: var(--gf-info-tenue); --theme-alert-border-color: var(--gf-info-borde); } .table-info { --theme-table-color: var(--gf-info-texto-tabla); --theme-table-bg: var(--gf-info-tenue); --theme-table-border-color: var(--gf-info-borde-tabla); } .bg-warning { background-color: var(--gf-warning) !important; } .text-bg-warning { background-color: var(--gf-warning) !important; color: var(--gf-hueso) !important; } .badge.bg-warning { color: var(--gf-hueso) !important; } .border-warning { border-color: var(--gf-warning) !important; } .text-warning { color: var(--gf-warning) !important; } .alert-warning { --theme-alert-color: var(--gf-warning-enfasis); --theme-alert-bg: var(--gf-warning-tenue); --theme-alert-border-color: var(--gf-warning-borde); } .table-warning { --theme-table-color: var(--gf-warning-texto-tabla); --theme-table-bg: var(--gf-warning-tenue); --theme-table-border-color: var(--gf-warning-borde-tabla); } .bg-danger { background-color: var(--gf-danger) !important; } .text-bg-danger { background-color: var(--gf-danger) !important; color: var(--gf-hueso) !important; } .badge.bg-danger { color: var(--gf-hueso) !important; } .border-danger { border-color: var(--gf-danger) !important; } .text-danger { color: var(--gf-danger) !important; } .alert-danger { --theme-alert-color: var(--gf-danger-enfasis); --theme-alert-bg: var(--gf-danger-tenue); --theme-alert-border-color: var(--gf-danger-borde); } .table-danger { --theme-table-color: var(--gf-danger-texto-tabla); --theme-table-bg: var(--gf-danger-tenue); --theme-table-border-color: var(--gf-danger-borde-tabla); } .bg-purple { background-color: var(--gf-purple) !important; } .text-bg-purple { background-color: var(--gf-purple) !important; color: var(--gf-hueso) !important; } .badge.bg-purple { color: var(--gf-hueso) !important; } .border-purple { border-color: var(--gf-purple) !important; } .text-purple { color: var(--gf-purple) !important; } .alert-purple { --theme-alert-color: var(--gf-purple-enfasis); --theme-alert-bg: var(--gf-purple-tenue); --theme-alert-border-color: var(--gf-purple-borde); } .table-purple { --theme-table-color: var(--gf-purple-texto-tabla); --theme-table-bg: var(--gf-purple-tenue); --theme-table-border-color: var(--gf-purple-borde-tabla); } .bg-dark { background-color: var(--gf-est-900) !important; } .text-bg-dark { background-color: var(--gf-est-900) !important; color: var(--gf-hueso) !important; } .badge.bg-dark { color: var(--gf-hueso) !important; } .border-dark { border-color: var(--gf-est-900) !important; } .text-dark { color: var(--gf-est-900) !important; } .alert-dark { --theme-alert-color: var(--gf-est-950-c1); --theme-alert-bg: var(--gf-est-900-c90); --theme-alert-border-color: var(--gf-est-900-c68); } .table-dark { --theme-table-color: var(--gf-est-900-o26); --theme-table-bg: var(--gf-est-900-c90); --theme-table-border-color: var(--gf-est-950-c75); } .bg-light { background-color: var(--gf-hueso) !important; } .text-bg-light { background-color: var(--gf-hueso) !important; color: var(--gf-est-900) !important; } .badge.bg-light { color: var(--gf-est-900) !important; } .border-light { border-color: var(--gf-hueso) !important; } .text-light { color: var(--gf-hueso-texto) !important; } .alert-light { --theme-alert-color: var(--gf-hueso-enfasis); --theme-alert-bg: var(--gf-est-500-c99); --theme-alert-border-color: var(--gf-hueso-c66); } .table-light { --theme-table-color: var(--gf-hueso-texto-tabla); --theme-table-bg: var(--gf-est-500-c99); --theme-table-border-color: var(--gf-hueso-borde-tabla); } .badge { font-family: var(--gf-fuente-cuerpo); font-weight: 600; letter-spacing: .03em; border-radius: var(--gf-r-sm); } .text-muted { color: var(--gf-est-600) !important; } [data-bs-theme=dark] .text-muted { color: var(--gf-est-400) !important; } /* Oro como utilidad, para los pocos sitios que lo necesitan */ .text-oro { color: var(--gf-acento-profundo) !important; } [data-bs-theme=dark] .text-oro { color: var(--gf-acento-claro) !important; } .bg-oro { background-color: var(--gf-acento) !important; color: var(--gf-est-900) !important; } .bg-oro-tenue { background-color: var(--gf-acento-tenue) !important; } /* Enlaces */ a { font-weight: 600; transition: color .18s ease; } a, a:hover, a:focus, a:active { text-decoration: none; } a:hover { color: var(--theme-link-hover-color); } a.text-success:hover { color: var(--gf-success-enlace-hover) !important; } a.text-danger:hover { color: var(--gf-danger-enlace-hover) !important; } /* Tarjeta-enlace */ .link-card { display: block; padding: 1rem; border-radius: var(--gf-r); background: var(--gf-papel); border: 1px solid var(--gf-linea); box-shadow: inset 0 -2px 0 transparent; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .link-card:hover { border-color: var(--gf-acento-texto-osc); box-shadow: inset 0 -2px 0 var(--gf-acento), var(--gf-sombra); transform: translateY(-2px); } /* ---------------------------------------------------------------- 10. TABLAS ---------------------------------------------------------------- */ .table { --theme-table-border-color: var(--gf-linea); --theme-table-striped-bg: rgba(var(--gf-est-900-rgb), .022); --theme-table-hover-bg: var(--gf-acento-tenue); --theme-table-hover-color: var(--gf-est-900); --theme-table-active-bg: var(--gf-acento-tenue); } [data-bs-theme=dark] .table { --theme-table-striped-bg: rgba(255, 255, 255, .026); --theme-table-hover-bg: var(--gf-acento-osc-tabla); --theme-table-hover-color: var(--gf-hueso); } /* Fila de total / subtotal: se distingue por la linea de oro que la sostiene, no por relleno de color */ .table tfoot > tr > td, .table tfoot > tr > th, .minitabla tfoot > tr > td, .minitabla tfoot > tr > th, tr.total-row > td, tr.total-row > th, tr.subtotal > td, tr.subtotal > th { background: var(--gf-hueso); font-weight: 700; border-top: var(--gf-regla) solid var(--gf-acento); color: var(--gf-est-900); } [data-bs-theme=dark] .table tfoot > tr > td, [data-bs-theme=dark] .table tfoot > tr > th, [data-bs-theme=dark] .minitabla tfoot > tr > td, [data-bs-theme=dark] .minitabla tfoot > tr > th { background: var(--gf-est-800); color: var(--gf-hueso); } /* Encabezado fijo: debe tapar lo que pasa por debajo */ .tableFixHead thead th { position: sticky; top: 0; z-index: 2; } /* ---------------------------------------------------------------- 11. FORMULARIOS ---------------------------------------------------------------- */ .form-control, .form-select { border-radius: var(--gf-r-sm); border-color: var(--gf-linea); background-color: var(--gf-papel); color: var(--theme-body-color); transition: border-color .16s ease, box-shadow .16s ease; } .form-control:focus, .form-select:focus { border-color: var(--gf-acento-foco); box-shadow: 0 0 0 3px rgba(var(--gf-acento-rgb), .18); } .form-control:read-only:not([type=date]), input.readonly { background-color: var(--gf-hueso); color: var(--gf-est-600); opacity: 1; } .form-label { font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--gf-est-600); margin-bottom: .3rem; } [data-bs-theme=dark] .form-label { color: var(--gf-est-300); } .form-check-input:checked { background-color: var(--gf-acento); border-color: var(--gf-acento); } .form-check-input:focus { box-shadow: 0 0 0 3px rgba(var(--gf-acento-rgb), .22); } label.error, .invalid-feedback { color: var(--gf-danger); font-weight: 600; font-size: .75rem; } /* Selector de proyecto (bootstrap-select) */ .bootstrap-select .dropdown-toggle { border-radius: var(--gf-r-sm) !important; } .dropdown-menu { border-color: var(--gf-linea); border-radius: var(--gf-r); box-shadow: var(--gf-sombra); } .dropdown-item.active, .dropdown-item:active { background-color: var(--gf-acento-tenue); color: var(--gf-est-900); } [data-bs-theme=dark] .dropdown-item.active, [data-bs-theme=dark] .dropdown-item:active { background-color: var(--gf-acento-tenue-osc); color: var(--gf-hueso); } /* ---------------------------------------------------------------- 12. TARJETAS ---------------------------------------------------------------- */ .card { --theme-card-bg: var(--gf-papel); --theme-card-border-color: var(--gf-linea); --theme-card-border-radius: var(--gf-r); --theme-card-cap-bg: var(--gf-papel); box-shadow: var(--gf-sombra-sm); } .card.shadow, .card.rp { box-shadow: var(--gf-sombra); } /* La cabecera de .card.rp es oscura con texto blanco (nuevoEstilo.css), pero un
adentro tomaba el color de encabezado de la plantilla y quedaba oscuro sobre oscuro: el título no se veía (Legal → Procesos, cotizador). */ .card.rp > .card-header :is(h1, h2, h3, h4, h5, h6) { color: inherit; } /* La tarjeta que sigue a una cabecera de pagina se acopla a ella */ .rp-header + .card, .gf-header + .card { border-top-left-radius: 0; border-top-right-radius: 0; } .footer { background: var(--gf-papel); border-top: 1px solid var(--gf-linea); color: var(--gf-est-500); font-size: .75rem; } /* ---------------------------------------------------------------- 14. ACCESO La pantalla de entrada es lo unico que no es una herramienta de trabajo, asi que es donde el Bodoni y el oro pueden respirar. Fondo: grafito con una veta de oro, sin fotografia de archivo. ---------------------------------------------------------------- */ .gf-acceso { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(120% 90% at 78% 6%, rgba(var(--gf-acento-rgb), .16) 0%, rgba(var(--gf-acento-rgb), 0) 52%), linear-gradient(168deg, var(--gf-est-800) 0%, var(--gf-est-950) 62%, var(--gf-est-950) 100%); } /* Las hiladas del isotipo, a escala de pagina, tras la tarjeta. Repite la firma sin repetir el logotipo. */ .gf-acceso::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(90deg, rgba(var(--gf-acento-rgb), .11) 0 34%, transparent 34%), linear-gradient(90deg, rgba(var(--gf-acento-rgb), .07) 0 46%, transparent 46%), linear-gradient(90deg, rgba(var(--gf-acento-rgb), .05) 0 58%, transparent 58%); background-repeat: no-repeat; background-size: 100% 2px, 100% 2px, 100% 2px; background-position: 0 calc(50% + 118px), 0 calc(50% + 132px), 0 calc(50% + 146px); } .gf-acceso__caja { width: 100%; max-width: 27rem; position: relative; } .gf-acceso__marca { text-align: center; margin-bottom: 1.75rem; } .gf-acceso__marca img { width: 100%; max-width: 15.5rem; height: auto; } .gf-acceso__lema { margin: .9rem 0 0; font-family: var(--gf-fuente-cuerpo); font-size: .6875rem; font-weight: 600; letter-spacing: .19em; text-transform: uppercase; color: var(--gf-acceso-lema); } .gf-acceso__tarjeta { background: var(--gf-papel); border-radius: var(--gf-r-lg); border: 1px solid rgba(var(--gf-acento-rgb), .18); padding: 1.85rem 1.65rem 1.6rem; box-shadow: 0 24px 60px rgba(0, 0, 0, .42); } [data-bs-theme=dark] .gf-acceso__tarjeta { background: var(--gf-est-900); } .gf-acceso__titulo { font-family: var(--gf-fuente-titulo); font-weight: 600; font-size: 1.5rem; line-height: 1.15; margin: 0 0 .25rem; color: var(--gf-est-900); } [data-bs-theme=dark] .gf-acceso__titulo { color: var(--gf-hueso); } .gf-acceso__ayuda { margin: 0 0 1.4rem; font-size: .8125rem; color: var(--gf-est-500); } .gf-acceso__pie { margin: 1.5rem 0 0; text-align: center; font-size: .75rem; color: var(--gf-est-400-o15); } .gf-acceso__nota { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--gf-linea); text-align: center; font-size: .75rem; color: var(--gf-est-500); } .gf-acceso__demo { display: inline-block; margin-top: .75rem; padding: .18rem .6rem; border: 1px solid rgba(var(--gf-acento-rgb), .5); border-radius: 50rem; font-size: .625rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gf-acento-claro); } /* ---------------------------------------------------------------- 16. ACCESIBILIDAD Y RESPONSIVE ---------------------------------------------------------------- */ :where(a, button, [role=button], input, select, textarea, summary):focus-visible { outline: 3px solid rgba(var(--gf-acento-rgb), .55); outline-offset: 2px; border-radius: var(--gf-r-sm); } /* La firma nunca depende solo del color: en alto contraste engorda */ @media (prefers-contrast: more) { :root { --gf-regla: 3px; } .card > .card-header::after { width: 64px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .link-card:hover { transform: none; } } @media (max-width: 575.98px) { .rp-header, .gf-header, .uafe-page-hdr, .ec-hdr { flex-wrap: wrap; gap: .75rem; padding: .9rem 1rem; } .rp-header .title, .gf-header .title { font-size: 1.15rem; } .gf-acceso__tarjeta { padding: 1.4rem 1.15rem 1.25rem; } .gf-acceso::before { display: none; } } /* Impresion: el oro no imprime bien, la firma pasa a grafito */ @media print { :root { --gf-acento: var(--gf-est-900); --gf-acento-tenue: var(--gf-papel); } .sidenav-menu, .app-topbar, .footer { display: none !important; } .card { box-shadow: none; border-color: var(--gf-est-300); } } /* ---------------------------------------------------------------- 18. DENSIDAD DE TABLAS Preferencia "densidad". Compacta cabe ~40% mas filas en pantalla, que en cartera y cobranza es la diferencia entre desplazarse y no. ---------------------------------------------------------------- */ html[data-densidad=compacta] .table > :not(caption) > * > *, html[data-densidad=compacta] .minitabla > :not(caption) > * > * { padding-block: .22rem; padding-inline: .4rem; } html[data-densidad=compacta] { --theme-body-font-size: .78125rem; } html[data-densidad=compacta] .card-body { padding: .85rem; } html[data-densidad=compacta] .badge { padding: .18em .42em; } /* ---------------------------------------------------------------- 19. PANTALLA DE PREFERENCIAS ---------------------------------------------------------------- */ .gf-pref { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: flex-start; justify-content: space-between; padding-block: 1rem; } .gf-pref--sep { border-bottom: 1px solid var(--gf-linea); } .gf-pref__texto { flex: 1 1 16rem; min-width: 0; } .gf-pref__etiqueta { display: block; font-weight: 600; font-size: .875rem; color: var(--theme-heading-color); margin-bottom: .15rem; } .gf-pref__ayuda { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--gf-est-600); } .gf-pref__control { flex: 0 1 auto; } .gf-pref__num { width: 6.5rem; } .gf-pref__aviso { font-size: .78rem; font-weight: 600; color: var(--gf-warning-texto); } /* — Selector de paleta — */ .gf-temas { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; width: min(100%, 34rem); } .gf-tema { display: block; text-align: left; padding: .7rem .8rem .75rem; background: var(--gf-papel); border: 1px solid var(--gf-linea); border-radius: var(--gf-r); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .gf-tema:hover { border-color: var(--gf-acento-borde); transform: translateY(-1px); } /* El tema activo se marca con la linea de acento, igual que cualquier otra cabecera del sistema. */ .gf-tema.is-activo { border-color: var(--gf-acento); box-shadow: inset 0 -2px 0 var(--gf-acento); } .gf-tema__muestra { display: flex; height: 2.1rem; border-radius: var(--gf-r-sm); overflow: hidden; margin-bottom: .5rem; box-shadow: inset 0 0 0 1px rgba(var(--gf-est-900-rgb), .10); } .gf-tema__muestra > span { flex: 1; } .gf-tema__muestra > span:first-child { flex: 1.5; } .gf-tema__nombre { display: block; font-weight: 600; font-size: .8125rem; color: var(--theme-heading-color); } .gf-tema__ayuda { display: block; font-size: .72rem; color: var(--gf-est-600); margin-top: .1rem; } /* — Botones segmentados — */ .gf-seg { display: inline-flex; padding: 2px; background: var(--gf-hueso); border: 1px solid var(--gf-linea); border-radius: var(--gf-r-sm); } .gf-seg__btn { appearance: none; border: 0; background: transparent; padding: .34rem .8rem; border-radius: 4px; font-family: var(--gf-fuente-cuerpo); font-size: .8125rem; font-weight: 600; color: var(--gf-est-600); cursor: pointer; transition: background .16s ease, color .16s ease; white-space: nowrap; } .gf-seg__btn:hover { color: var(--theme-heading-color); } .gf-seg__btn.is-activo { background: var(--gf-primary); color: var(--gf-primary-fg); box-shadow: inset 0 -2px 0 rgba(var(--gf-acento-rgb), .85); } @media (max-width: 575.98px) { .gf-pref { flex-direction: column; } .gf-pref__control { width: 100%; } .gf-temas { width: 100%; } .gf-seg { width: 100%; } .gf-seg__btn { flex: 1; } } /* ---------------------------------------------------------------- 20. MENU SUPERIOR (preferencia menu_posicion = superior) Inspinia 5.0.0 resuelve el layout `data-layout=topnav` por completo: la barra sticky bajo el topbar, los desplegables al pasar el cursor y los submenus anidados. Aqui solo se aporta identidad. El menu superior se pinta con las variables --theme-sidenav-*, las mismas del menu lateral, asi que hereda el grafito de la seccion 5 sin trabajo extra: el cromo sigue siendo oscuro en los dos modos. La firma cambia de eje. En el menu lateral el item activo lleva una plomada de oro a la izquierda; en la barra horizontal lleva la linea de acento debajo. Mismo gesto girado 90 grados. ---------------------------------------------------------------- */ /* Ancho completo con menu superior. Inspinia limita TODOS los contenedores al 85% cuando data-layout=topnav a partir de 1400px: @media (min-width: 1400px) { html[data-layout=topnav] .container-fluid, ... { max-width: 85%; } } Eso encoge a la vez la barra superior, el menu y el area de contenido, y deja 15% de la pantalla en blanco a los lados. En un sistema de cobranza ese ancho es justamente lo que se gana al pasar el menu arriba, asi que se recupera. Se anula sin media query para que valga en cualquier resolucion presente o futura. Si algun dia se prefiere el contenido centrado y mas estrecho, basta con borrar este bloque. */ html[data-layout=topnav] .container-fluid, html[data-layout=topnav] .container-sm, html[data-layout=topnav] .container-md, html[data-layout=topnav] .container-lg, html[data-layout=topnav] .container-xl, html[data-layout=topnav] .container-xxl { max-width: 100%; } /* reportes.css lleva una regla global `table { max-width: 1200px; margin: 0 auto }` que centra y estrecha TODAS las tablas de reporte, asi que el ancho recuperado arriba no llegaba a ellas. Esa hoja se carga despues de esta (va dentro del ), de modo que no basta el orden: se gana por especificidad, `html[data-layout=topnav] table` (0,1,2) contra `table` (0,0,1). Solo aplica con menu superior. Con menu lateral el tope de 1200px se mantiene como estaba. */ html[data-layout=topnav] table { max-width: none; margin-inline: 0; } /* El area de trabajo tambien: sin sidenav no hay margen izquierdo que compensar. */ html[data-layout=topnav] .content-page { width: 100%; max-width: 100%; margin-inline: 0; } html[data-layout=topnav] .topnav { border-bottom: 1px solid var(--gf-cromo-borde); } /* Item activo: la linea de acento al pie */ html[data-layout=topnav] .topnav .navbar-nav > .nav-item > .nav-link { position: relative; } html[data-layout=topnav] .topnav .navbar-nav > .nav-item.active > .nav-link::after, html[data-layout=topnav] .topnav .navbar-nav > .nav-item.show > .nav-link::after { content: ""; position: absolute; inset-inline: calc(var(--theme-sidenav-item-padding-x) * 1.5); bottom: 0; height: var(--gf-regla); background: var(--gf-acento); } html[data-layout=topnav] .topnav .navbar-nav > .nav-item.active > .nav-link, html[data-layout=topnav] .topnav .navbar-nav > .nav-item.show > .nav-link, html[data-layout=topnav] .topnav .navbar-nav > .nav-item.active > .nav-link .menu-icon i { color: var(--gf-cromo-activo); } /* Desplegables */ html[data-layout=topnav] .topnav .dropdown-menu { border-color: var(--gf-linea); border-radius: var(--gf-r); box-shadow: var(--gf-sombra); } html[data-layout=topnav] .topnav .dropdown-item.active, html[data-layout=topnav] .topnav .dropdown-item:active { background-color: var(--gf-acento-tenue); color: var(--gf-est-900); box-shadow: inset 2px 0 0 var(--gf-acento); } /* Tercer nivel (sección → grupo → página). Inspinia pinta el grupo abierto o con el puntero encima con el color de hover del menú lateral, con !important. Ese color es claro porque está pensado para fondo oscuro, y sobre el desplegable claro el texto desaparecía. En pantalla chica el menú es una columna sobre fondo oscuro y ahí ese color sí es el correcto, por eso solo se corrige en escritorio. */ @media (min-width: 992px) { html[data-layout=topnav] .topnav .dropdown-menu > .dropdown > .dropdown-item:hover, html[data-layout=topnav] .topnav .dropdown-menu > .dropdown > .dropdown-item.show, html[data-layout=topnav] .topnav .dropdown:hover > .dropdown-menu > .dropdown:hover > .dropdown-item, html[data-layout=topnav] .topnav .dropdown-menu > .dropdown.active > .dropdown-item { color: var(--theme-dropdown-link-hover-color) !important; background-color: var(--theme-dropdown-link-hover-bg); } html[data-layout=topnav] .topnav .dropdown-menu > .dropdown.active > .dropdown-item { box-shadow: inset 2px 0 0 var(--gf-acento); } } html[data-layout=topnav] .topnav .dropdown-header { font-size: .625rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--gf-acento-profundo); } /* — Pantalla chica: el menu se despliega en vertical — */ @media (max-width: 991.98px) { /* En columna, una linea inferior se leeria como separador: el item activo vuelve a la plomada vertical. */ html[data-layout=topnav] .topnav .navbar-nav > .nav-item.active > .nav-link::after, html[data-layout=topnav] .topnav .navbar-nav > .nav-item.show > .nav-link::after { inset-inline: 0 auto; inset-block: 5px; width: 3px; height: auto; border-radius: 0 2px 2px 0; } } /* Inspinia esconde .logo-topbar bajo 375px, pero con menu superior es el unico sitio donde vive el logotipo. */ @media (max-width: 375px) { html[data-layout=topnav] .logo-topbar { display: block !important; } html[data-layout=topnav] .logo-topbar span.logo-sm { display: block; } html[data-layout=topnav] .logo-topbar span.logo-lg { display: none; } } /* — Barra de migas con menu superior — Inspinia le da a .page-title-head un fondo gris (--theme-light-bg-subtle) y 40px de alto. Con menu lateral funciona: separa el area de trabajo del cromo. Con menu superior no, porque encima ya hay dos bandas apiladas (barra + menu) y una tercera franja gris convierte el encabezado en un muro de tres pisos antes de llegar al contenido. Aqui la barra de migas pasa a papel y se achica: deja de ser una banda y vuelve a ser lo que es, una linea de orientacion. El borde inferior se conserva porque sigue haciendo falta el corte contra el contenido. */ html[data-layout=topnav] .page-title-head { background-color: var(--gf-papel); min-height: 32px; margin-block-end: .75rem; border-bottom-color: var(--gf-linea); } html[data-layout=topnav] .page-title-head .breadcrumb { font-size: .8125rem; } /* El titulo de pagina de la derecha acompaña la reduccion: con 32px de alto, el fs-sm original queda apretado contra el borde. */ html[data-layout=topnav] .page-title-head h4 { font-size: .75rem; letter-spacing: .08em; } /* En modo oscuro el papel es oscuro y la regla anterior ya sirve: no hace falta un caso aparte para las migas. */ /* — Item de cierre al extremo derecho — El mismo gesto de la seccion 5 girado 90 grados: en columna el item se va abajo, en fila se va a la derecha. Un solo margen automatico se come todo el espacio libre de la barra. Para que ese margen tenga espacio que repartir, la lista tiene que ocupar el ancho. No lo hacia: Bootstrap estira .navbar-collapse (flex-grow: 1) pero el