/* ========================================================================== PractiEmpresa · capa de tema -------------------------------------------------------------------------- Va DESPUES de styles.css y no la reemplaza. Se hizo asi a proposito: la hoja original tiene 2.100 lineas repartidas en 116 pantallas, y reescribirla a ciegas romperia pantallas que nadie ha revisado. Aqui solo se redefinen las variables que la hoja original ya usa, y se afinan las pocas clases que de verdad existen en el HTML (se contaron antes de escribir esto). Para volver atras basta con quitar la linea que la carga. Direccion: base de panel de control (B) con tratamiento de estado financiero (A) en las pantallas de informes, que llevan la clase `pantalla-informe` en el . ========================================================================== */ :root { /* --- Marca, tomada de practiempresa.com ------------------------------- Los verdes de la landing, no los que se habian ido desviando. */ --brand-900: #14201A; /* tinta */ --brand-700: #2C4A10; --brand-600: #356801; /* verde oscuro de la marca */ --brand-500: #669A00; /* verde claro de la marca */ --brand-300: #8FBF2E; --brand-100: #EDF4E3; --brand-050: #F5F8EF; /* Se conservan los nombres viejos: 106 pantallas los usan. */ --primary-dark: var(--brand-600); --primary-medium: var(--brand-500); --primary-light: var(--brand-300); /* --- Neutros ----------------------------------------------------------- Llevan una pizca de verde. Un gris puro al lado de un verde se ve prestado; estos se ven elegidos. */ --ink-900: #14201A; --ink-700: #3A453A; --ink-500: #566055; --ink-400: #7C857A; --ink-200: #C7CCC4; --linea: #E5E6E1; --papel: #FBFBFA; --papel-2: #F3F3EF; --text-dark: var(--ink-900); --text-medium: var(--ink-500); --text-light: var(--ink-400); --background: var(--papel); --white: #FFFFFF; --border-color: var(--linea); /* --- Estados ----------------------------------------------------------- Se van los colores por defecto de Bootstrap (#dc3545, #ffc107, #17a2b8): son los que llevan miles de plantillas y por eso la pantalla se leia como una plantilla. Estos son apagados, conviven con el verde y ademas se diferencian por claridad, no solo por tono, para que tambien los distinga quien no separa bien los colores. */ --error: #7A2C21; --error-fondo: #F8E7E4; --success: #2C4A10; --success-fondo: #EDF4E3; --warning: #6B4E0C; --warning-fondo: #FAF0DC; --info: #234A5C; --info-fondo: #E4EEF3; /* --- Relieve ----------------------------------------------------------- El borde hace el trabajo; la sombra solo despega lo que flota de verdad (un menu, una ventana). Las sombras repartidas en todas las tarjetas son lo que da el aire de plantilla. */ --shadow-sm: 0 1px 2px rgba(20, 32, 26, 0.05); --shadow-md: 0 2px 6px rgba(20, 32, 26, 0.07); --shadow-lg: 0 12px 32px rgba(20, 32, 26, 0.14); /* Radios mas contenidos y con menos escalones. */ --radius-sm: 5px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 12px; /* --- Tipografia -------------------------------------------------------- */ --font-ui: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-titulo: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; } /* ========================================================================== Base ========================================================================== */ body { font-family: var(--font-ui); color: var(--ink-900); background: var(--papel); -webkit-font-smoothing: antialiased; } /* Toda cifra alineada en columna necesita digitos del mismo ancho, o los miles bailan de fila en fila. */ .stat-value, table td, table th, .badge, input[type="number"] { font-variant-numeric: tabular-nums; } /* Los titulos HEREDAN el color, no lo imponen. styles.css fija "color: var(--text-dark)" sobre todos los h1..h6. Esa regla es explicita, y una regla explicita siempre gana sobre un color heredado. Por eso un titulo dentro de una banda oscura que hace "color: #fff" salia oscuro sobre oscuro: el contenedor se tenia de blanco, pero el titulo no. Pasaba en 38 pantallas; la mas visible, el panel de Proyecto de Vida, tenia el titulo practicamente ilegible. Con "inherit" el titulo toma el color de quien lo contiene: tinta dentro del contenido normal, que lo hereda del body, y blanco dentro de una banda oscura. Una linea arregla las 38 sin tocar styles.css. */ h1, h2, h3, h4, h5, h6 { color: inherit; letter-spacing: -0.01em; } .text-muted { color: var(--ink-400) !important; } .eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-500); } /* ========================================================================== Estructura ========================================================================== */ /* Sin esto la aplicacion entera se desborda a lo ancho: un elemento flexible se niega a encogerse por debajo de su contenido mientras no se le fije min-width en cero. */ .main-content, .main-body { min-width: 0; } .sidebar { background: var(--white); border-right: 1px solid var(--linea); box-shadow: none; } .main-header { background: var(--white); border-bottom: 1px solid var(--linea); box-shadow: none; } .header-title { font-size: 15px; font-weight: 600; color: var(--ink-900); } /* ========================================================================== Tarjetas ========================================================================== */ .card { background: var(--white); border: 1px solid var(--linea); border-radius: var(--radius-lg); box-shadow: none; } .card-header { padding: 13px 18px; border-bottom: 1px solid var(--papel-2); background: transparent; } .card-header h3 { font-size: 14px; font-weight: 650; margin: 0; } .stat-card { background: var(--white); border: 1px solid var(--linea); border-radius: var(--radius-lg); box-shadow: none; } .stat-card h4 { font-size: 11.5px; font-weight: 600; letter-spacing: 0.3px; color: var(--ink-500); text-transform: none; } .stat-value { font-size: 23px; font-weight: 650; letter-spacing: -0.5px; color: var(--ink-900); } /* ========================================================================== Botones ========================================================================== */ .btn { font-family: var(--font-ui); font-weight: 600; border-radius: var(--radius-md); box-shadow: none; transition: background-color .12s ease, border-color .12s ease; /* Un control que se toca con el dedo necesita alto suficiente. */ min-height: 36px; } .btn-sm { min-height: 31px; font-size: 12.5px; } .btn-primary { background: var(--brand-600); border: 1px solid var(--brand-600); color: #FFFFFF; } .btn-primary:hover { background: #2A5300; border-color: #2A5300; } .btn-secondary { background: var(--white); border: 1px solid var(--ink-200); color: var(--ink-900); } .btn-secondary:hover { background: var(--papel-2); } /* El foco del teclado tiene que verse: quien navega con tabulador necesita saber donde esta parado. */ .btn:focus-visible, .form-control:focus-visible, a:focus-visible, .tab-btn:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; } /* ========================================================================== Formularios ========================================================================== */ .form-label { font-size: 12.5px; font-weight: 600; color: var(--ink-700); } .form-control { font-family: var(--font-ui); font-size: 13.5px; min-height: 36px; border: 1px solid var(--ink-200); border-radius: var(--radius-md); background: var(--white); color: var(--ink-900); box-shadow: none; } .form-control:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(102, 154, 0, 0.13); } .form-control::placeholder { color: var(--ink-400); } .filter-bar { gap: 9px; } /* ========================================================================== Pestañas ========================================================================== */ /* Con muchas pestañas no deben apilarse en varias filas: se desplazan. Apiladas empujan el contenido hacia abajo y la pantalla pierde el hilo. */ .tabs-container { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; min-width: 0; gap: 2px; border-bottom: 1px solid var(--linea); scrollbar-width: thin; } .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 10px 13px; border: none; border-radius: 0; background: transparent; font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--ink-500); box-shadow: none; cursor: pointer; } .tab-btn:hover { color: var(--ink-900); background: var(--papel-2); } .tab-btn.active { background: transparent; color: var(--ink-900); font-weight: 650; box-shadow: inset 0 -2px 0 var(--brand-600); } /* ========================================================================== Tablas ========================================================================== */ table { border-collapse: collapse; width: 100%; } table th { padding: 9px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; color: var(--ink-500); background: var(--papel-2); border-bottom: 1px solid var(--linea); text-align: left; } table td { padding: 9px 12px; font-size: 13.5px; color: var(--ink-700); border-bottom: 1px solid var(--papel-2); } table tbody tr:hover td { background: var(--brand-050); } /* ========================================================================== Distintivos y avisos ========================================================================== */ .badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.1px; text-transform: none; } .badge-success, .badge-activo { background: var(--success-fondo); color: var(--success); } .badge-warning, .badge-pendiente { background: var(--warning-fondo); color: var(--warning); } .badge-danger, .badge-inactivo { background: var(--error-fondo); color: var(--error); } .badge-info { background: var(--info-fondo); color: var(--info); } .alert { border: 1px solid transparent; border-radius: var(--radius-md); padding: 11px 14px; font-size: 13.5px; box-shadow: none; } .alert-success { background: var(--success-fondo); border-color: #CDE0B6; color: var(--success); } .alert-warning { background: var(--warning-fondo); border-color: #E8D6AE; color: var(--warning); } .alert-danger { background: var(--error-fondo); border-color: #E8C8C2; color: var(--error); } .alert-info { background: var(--info-fondo); border-color: #C4D9E3; color: var(--info); } .empty-state { padding: 34px 20px; text-align: center; color: var(--ink-400); } .empty-state h3 { font-size: 15px; font-weight: 600; color: var(--ink-500); margin: 0 0 4px; } /* ========================================================================== Fichas de opcion (chip) ========================================================================== */ .chip { border: 1px solid var(--linea); border-radius: var(--radius-md); background: var(--white); box-shadow: none; } .chip:hover { border-color: var(--brand-300); } .chip.selected, .chip.active, .chip[aria-pressed="true"] { border-color: var(--brand-600); background: var(--brand-050); } .chip-label { font-size: 13px; font-weight: 600; color: var(--ink-900); } .chip-sublabel { font-size: 12px; color: var(--ink-500); } /* ========================================================================== Ventanas ========================================================================== */ .modal-overlay { background: rgba(20, 32, 26, 0.34); } .modal, .modal-content { border: 1px solid var(--linea); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } /* ========================================================================== Pantallas de informe · tratamiento de estado financiero -------------------------------------------------------------------------- Solo donde el lleva `pantalla-informe`. Aqui la tarjeta estorba: un balance se lee mejor con reglas finas y la cifra grande, como en un informe de auditoria. ========================================================================== */ .pantalla-informe h1, .pantalla-informe h2 { font-family: var(--font-titulo); font-weight: 700; letter-spacing: 0; } .pantalla-informe h1 { font-size: 31px; } .pantalla-informe h2 { font-size: 26px; } .pantalla-informe .card { border-radius: var(--radius-sm); } .pantalla-informe table td { border-bottom: 1px solid #EDEDE7; } /* La fila de total se destaca sola, sin necesidad de pintarle fondo. */ .pantalla-informe table tr[style*="font-weight:600"] td, .pantalla-informe table tr[style*="font-weight: 600"] td { border-top: 1.5px solid var(--ink-900); border-bottom: none; padding-top: 10px; font-size: 15px; color: var(--ink-900); } /* Los encabezados de bloque (Activos, Pasivos, Patrimonio) */ .pantalla-informe table th[colspan] { background: transparent; padding-top: 15px; padding-bottom: 5px; font-size: 11px; letter-spacing: 1.1px; color: var(--brand-600); border-bottom: 1.5px solid var(--ink-900); } .pantalla-informe .stat-value { font-family: var(--font-titulo); font-size: 29px; font-weight: 700; letter-spacing: 0; } /* -------------------------------------------------------------------------- El estado financiero se lee en dos columnas -------------------------------------------------------------------------- Un balance tiene solo dos datos por linea: el concepto y la cifra. Estirado a mil pixeles, la cifra queda lejisimos de su concepto y el ojo se pierde al cruzar. Por eso los balances impresos van a dos columnas: se acota la medida y el bloque se reparte. Solo aplica a las tablas de estado financiero. Los consolidados de ventas o de compras tienen muchas columnas y si necesitan todo el ancho. -------------------------------------------------------------------------- */ .pantalla-informe .estado-financiero { max-width: 660px; } @media (min-width: 1180px) { .pantalla-informe .estado-financiero { max-width: none; /* Sin esto no hay dos columnas: column-count no tiene efecto sobre un elemento que conserva el modelo de tabla. */ display: block; /* Dos columnas reales: el navegador reparte las filas entre ellas y respeta los bloques sin cortar un grupo por la mitad. */ column-count: 2; column-gap: 52px; column-rule: 1px solid var(--linea); } .pantalla-informe .estado-financiero tbody { display: block; } .pantalla-informe .estado-financiero tr { display: flex; align-items: baseline; gap: 12px; break-inside: avoid; } .pantalla-informe .estado-financiero td:first-child, .pantalla-informe .estado-financiero th:first-child { flex-grow: 1; min-width: 0; } .pantalla-informe .estado-financiero td:last-child { white-space: nowrap; } }