.chart-container { position: relative; width: 100%; /* Ensure full width for responsiveness per Echarts */ height: 250px; /* Fixed height as per Echarts recommendation for initial render */ } .chart-container-institution { max-width: 100%; } .chart-container-institution-inner { width: 100%; /* Align with Falcon's responsive card layout */ min-height: 200px; /* Min-height for flexibility, allowing Echarts resize to handle dynamic content */ } .gauge-container { position: relative; width: 100%; /* Full width for Bootstrap card integration */ min-height: 300px; /* Min-height per Echarts for gauge rendering, allowing resize for responsiveness */ } /* Formatted for readability */ .metric-card { border-right: 1px solid #dee2e6; padding: 1rem; text-align: center; } @media (max-width: 767.98px) { .metric-card { border-right: none; } } .card-section { margin-bottom: 1rem; } @media (min-width: 992px) { .card-section { flex: 0 0 50%; max-width: 50%; padding-right: 1rem; } } .table-registros-acumulados th:first-child { width: 40%; } .table-registros-acumulados th:not(:first-child) { width: 20%; } .totals-container { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; } .total-item { flex: 1; text-align: center; padding: 1rem; } @media (max-width: 767.98px) { .totals-container { flex-direction: column; } } @media (max-width: 767.98px) { .total-item { border-right: none; flex: 0 0 100%; } } /* Glass effect reinforcement (if not already in Falcon) */ .navbar-glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); } /* Dynamic hover transitions for nav links */ .nav-link { transition: color 0.3s ease, transform 0.2s ease; } .nav-link:hover { color: #0056b3; /* Falcon primary color example; adjust to theme */ transform: translateY(-2px); } .nav-link.active { font-weight: 600; border-bottom: 2px solid #0056b3; } /* Scrollable dropdown for Anual */ .dropdown-menu-scroll { max-height: 300px; overflow-y: auto; border-radius: 0.5rem; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); } /* Icon scaling on hover for added dynamism */ .nav-link i { transition: transform 0.2s ease; } .nav-link:hover i { transform: scale(1.1); } /* Ajustes dark theme — .navbar-glass de arriba fija fondo blanco fijo, lo que rompe el modo oscuro; se restaura la variable nativa de Falcon. El hero usaba bg-dark, que en modo oscuro se invierte a claro; se fija en navy. */ .navbar-glass { background-color: var(--falcon-bg-navbar-glass) !important; } .hero-navy { background-color: #0b1727 !important; } /* Estandariza el tamaño de texto de todas las tablas (Bootstrap .table.fs--1 y el grid de Grid.js #gridPolAnual, que por defecto hereda 1rem del body en vez de los 0.8333rem de fs--1). Dentro de .fs--1, .badge hereda 0.75em de Bootstrap y queda visualmente más chico que el resto de la celda. */ .fs--1 .badge { font-size: 1em; } /* Grid.js #gridPolAnual — ancho de columnas: "Estado" 20%, el resto (7 años + Total + VNEF %, 9 columnas) reparte el 80% restante en partes iguales. table-layout:fixed ya viene del tema mermaid de Grid.js, así que estos porcentajes en th/td sí determinan el ancho real. */ #gridPolAnual th.gridjs-th:first-child, #gridPolAnual td.gridjs-td:first-child { width: 20%; } #gridPolAnual th.gridjs-th:not(:first-child), #gridPolAnual td.gridjs-td:not(:first-child) { width: 8.8889%; } /* El padding por defecto del tema (14px/12px 24px) deja casi sin espacio de contenido en columnas de ~8.9% (p.ej. "2019" se truncaba a "2"). */ #gridPolAnual th.gridjs-th, #gridPolAnual td.gridjs-td { padding: 8px 6px; } #gridPolAnual th.gridjs-th:first-child, #gridPolAnual td.gridjs-td:first-child { padding-left: 16px; } /* Grid.js #gridPolAnual en modo oscuro — el tema "mermaid" del CDN es siempre claro (fondo/texto/bordes fijos), así que se sobrescribe con las variables de Falcon cuando trae la clase .dark. */ html.dark #gridPolAnual .gridjs-container, html.dark #gridPolAnual .gridjs-tbody, html.dark #gridPolAnual td.gridjs-td { background-color: var(--falcon-card-bg); color: var(--falcon-body-color); } html.dark #gridPolAnual .gridjs-wrapper { border-color: var(--falcon-border-color); box-shadow: none; } html.dark #gridPolAnual td.gridjs-td { border-color: var(--falcon-border-color); } html.dark #gridPolAnual th.gridjs-th { background-color: var(--falcon-body-bg); color: var(--falcon-gray-1100); border-color: var(--falcon-border-color); } html.dark #gridPolAnual th.gridjs-th-sort:hover, html.dark #gridPolAnual th.gridjs-th-sort:focus { background-color: var(--falcon-gray-200); } html.dark #gridPolAnual button.gridjs-sort { filter: invert(1) opacity(0.6); } html.dark #gridPolAnual input.gridjs-input { background-color: var(--falcon-input-bg); border-color: var(--falcon-input-border-color); color: var(--falcon-input-color); } html.dark #gridPolAnual .gridjs-footer { background-color: var(--falcon-card-bg); border-color: var(--falcon-border-color); box-shadow: none; } html.dark #gridPolAnual .gridjs-pagination { color: var(--falcon-body-color); } /* Contraste de .text-muted en modo oscuro — theme.min.css fija el color en #9da9bb (gray-700) con !important; en texto pequeño (small, fs--2) dentro de las cards se percibe apagado, así que se sube a gray-1100 (casi blanco) para facilitar la lectura. Requiere !important y un selector más específico para ganarle al !important de theme.min.css. */ html.dark .text-muted { color: var(--falcon-gray-1100) !important; } /*# sourceMappingURL=user.min.css.map */