/* =========================================== Estilos Personalizados - NetGob (Light/Dark) Activa dark mode con: =========================================== */ /* Fuente (Google Fonts) */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); /* ---------- Variables de tema ---------- */ :root { --bg: #f8f9fa; --bg-soft: #f1f3f5; --text: #222; --text-muted: #6c757d; --card: #ffffff; --border: #e5e7eb; --link: #0d6efd; --link-hover: #0a58ca; --table-hover: #e8f4ff; --input-bg: #fff; --input-text: #222; --input-border: #ced4da; --modal-backdrop: rgba(0, 0, 0, .5); --nav-bg: #0f172a; /* similar al side (slate oscuro) */ --nav-border: rgba(255, 255, 255, .06); --nav-text: #e5e7eb; --nav-muted: #9ca3af; --nav-accent: #2a9d8f; /* tu acento ya usado en headers */ --nav-hover: rgba(255, 255, 255, .06); --sidebar-w: 260px; --topbar-h: 56px; /* ajusta si tu navbar es más alta */ } .dark-mode { --bg: #0f141a; --bg-soft: #161b22; --text: #e6e8eb; --text-muted: #9aa4b2; --card: #111820; --border: #2a3139; --link: #4ea1ff; --link-hover: #79b7ff; --table-hover: #1a2633; --input-bg: #0f141a; --input-text: #e6e8eb; --input-border: #2a3139; --modal-backdrop: rgba(0, 0, 0, .7); } /* Transiciones suaves */ html, body, .card, .modal-content, .table, .dropdown-menu { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ---------- Base ---------- */ body { font-family: "Poppins", Arial, sans-serif !important; font-size: 15px; color: var(--text); background-color: var(--bg); } h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif !important; font-weight: 600; color: var(--text); } .text-muted { color: var(--text-muted) !important; } a { color: var(--link); text-decoration: none; } a:hover { color: var(--link-hover); text-decoration: underline; } /* ---------- Contenedores ---------- */ .card { background-color: var(--card); border-color: var(--border); border-radius: 1rem; } hr, .border, .table, .modal-content, .dropdown-menu, .list-group-item, .form-control, .input-group-text { border-color: var(--border) !important; } /* ---------- Tablas ---------- */ table, td, th { font-size: 14px; color: var(--text); } .table thead th { background-color: var(--bg-soft); border-bottom-color: var(--border); } .table-hover tbody tr:hover { background-color: var(--table-hover) !important; } /* DataTables puntuales (si usas DT BS4/BS5) */ .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { background: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); } .dataTables_wrapper .dataTables_paginate .page-link { background: var(--card); color: var(--text); border-color: var(--border); } /* ---------- Formularios ---------- */ input, button, select, textarea { font-family: inherit; } .form-control, .form-select { background-color: var(--input-bg) !important; color: var(--input-text) !important; border-color: var(--input-border) !important; } .form-control::placeholder { color: var(--text-muted); } .input-group-text { background-color: var(--bg-soft); color: var(--text); } /* ---------- Botones ---------- */ .btn { border-radius: .4rem; } /* ---------- Navbars y dropdowns ---------- */ .navbar, .dropdown-menu { background-color: var(--card); color: var(--text); } /* ---------- Modales ---------- */ .modal-content { background-color: var(--card); color: var(--text); border-radius: .5rem; } .modal-backdrop.show { background-color: var(--modal-backdrop); } /* ---------- Toasts ---------- */ .toast { font-size: 14px; background-color: var(--card); color: var(--text); } /* ---------- SweetAlert2 ---------- */ .swal2-popup { background: var(--card) !important; color: var(--text) !important; border: 1px solid var(--border) !important; } .swal2-title { color: var(--text) !important; } .swal2-html-container { color: var(--text) !important; } /* ---------- Helpers ---------- */ .table-striped tbody tr:nth-of-type(odd) { background-color: color-mix(in oklab, var(--bg) 92%, #000 8%); } .dark-mode .table-striped tbody tr:nth-of-type(odd) { background-color: #121922; } .pull-left { float: left !important; } .pull-right { float: right !important; } /* ================================ NAVBAR NetGob – mejoras visuales (pegar al final del archivo) ================================ */ /* Fondo, borde y sombra (light/dark heredan de variables) */ .navbar.navbar-dark.bg-dark { background-color: #243447 !important; /* azul gris oscuro sobrio */ border-bottom: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); } /* Altura y espaciados más cómodos */ .navbar .navbar-brand { font-weight: 600; letter-spacing: .2px; color: #f5f5f5 !important; padding-top: .4rem; padding-bottom: .4rem; } .navbar .navbar-brand i, .navbar .navbar-brand .fas, .navbar .navbar-brand .fa { margin-right: .5rem; } .navbar .nav-link { color: #e4e6eb !important; font-weight: 500; opacity: .9; padding: .6rem .9rem; border-radius: .45rem; transition: background-color .2s ease, color .2s ease, opacity .2s ease; } .navbar .nav-link:hover, .navbar .nav-link:focus { opacity: 1; background-color: rgba(255, 255, 255, .1); color: #ffffff !important; } /* Estado “activo” más visible (si lo aplicas via JS o server) */ .navbar .nav-item.active>.nav-link, .navbar .nav-link.active { background-color: rgba(42, 157, 143, .2); /* verde esmeralda translúcido */ color: #2a9d8f !important; } /* Botón toggler (hamburguesa) visible en ambos temas */ .navbar .navbar-toggler { border-color: var(--border); border-radius: .5rem; padding: .35rem .6rem; } .navbar .navbar-toggler:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .15); } /* Icono de hamburguesa personalizado para que no se pierda en dark */ .navbar .navbar-toggler-icon { background-image: none; position: relative; width: 1.4rem; height: 1rem; } .navbar .navbar-toggler-icon::before, .navbar .navbar-toggler-icon::after, .navbar .navbar-toggler-icon span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--text); border-radius: 2px; } .navbar .navbar-toggler-icon::before { top: 0; } .navbar .navbar-toggler-icon span { top: calc(50% - 1px); } .navbar .navbar-toggler-icon::after { bottom: 0; } /* Asegura el span intermedio */ .navbar .navbar-toggler .navbar-toggler-icon span { display: block; } /* Dropdowns: contraste y separación */ .navbar .dropdown-menu { background-color: #2f3e52; border: 1px solid rgba(255, 255, 255, .15); border-radius: .6rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); } .navbar .dropdown-item { color: #e4e6eb !important; transition: background-color .2s ease; } .navbar .dropdown-item:hover { background-color: rgba(255, 255, 255, .08); color: #fff !important; } .navbar .dropdown-item { color: var(--text); padding: .55rem .8rem; border-radius: .45rem; display: flex; align-items: center; gap: .55rem; } .navbar .dropdown-item i, .navbar .dropdown-item .fa, .navbar .dropdown-item .fas, .navbar .dropdown-item .bi { width: 1.1rem; text-align: center; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: color-mix(in oklab, var(--bg) 85%, #000 15%); color: var(--text); } /* Divisor más sutil */ .navbar .dropdown-divider { border-top-color: var(--border); opacity: .75; } /* Badges/labels dentro del brand (tu versión) */ .navbar .navbar-brand .version-badge { background: color-mix(in oklab, var(--bg) 60%, #000 40%); color: var(--text); padding: .1rem .4rem; border-radius: .35rem; font-size: .75rem; margin-left: .35rem; } /* Mejoras responsive */ @media (max-width: 991.98px) { .navbar .nav-link { padding: .65rem .8rem; } .navbar .dropdown-menu { border-radius: .5rem; min-width: 100%; } } /* Variante compacta opcional (si algún día agregas .navbar--compact a