

        /* Variables de color */

        :root {

            --background: #f0f0f1;

            --border: #0e0f11;

            --text: #0e0f11;

            --navtext: #0e0f11;

            --nav: #f0f0f1;

            --head: #f0f0f1;

            --footer: #babad1;

            --btn-primary-bg: #d0ff71;

            --btn-primary-border: #0e0f11;

            --btn-outline-secondary-border: #0e0f11;

            --btn-outline-secondary-bg: #d0ff71;

            --menu-bg: #22252a;

            --link-color: #d0ff71;

            --nav-bar-bg: #0e0f11;

            --card-header-color: #70b580;

        }

    

        /* Estilos generales */

        .card,

        .module-addons-item-grid .module-addons-item-wrapper-grid,

        .module-item-wrapper-grid,

        .module-placeholders-wrapper .timeline-item-wrapper {

            background-color: var(--background) !important;

            border: 1px solid var(--border) !important;

            color: var(--text) !important;

        }

    

        /* Estilo para dispositivos más grandes */

        @media (min-width: 544px) {

            .form-horizontal .form-group.row > .form-control-label:first-of-type:not(.label-on-top) {

                color: var(--navtext) !important;

            }

        }

    

        /* Navegación */

        .nav-pills {

            border-top: solid 1px var(--navtext) !important;

            border-bottom: solid 1px #dfdfdf !important;

        }

    

        .nav-bar {

            background: var(--nav-bar-bg) !important;

        }

    

        .main-menu {

            padding: 0 0 10.825rem;

            margin: 0;

            background-color: var(--menu-bg) !important;

        }

    

        .menu-collapse {

            color: var(--link-color) !important;

            background-color: var(--menu-bg) !important;

        }

    

        .main-header #header-search-container .nav-bar .input-group::before,

        .nav-bar .main-header #header-search-container .input-group::before,

        .nav-bar .material-icons,

        .nav-bar .ps-tree-items .tree-name button::before,

        .ps-tree-items .tree-name .nav-bar button::before {

            color: var(--link-color) !important;

        }

    

        .main-menu .link-levelone>.link {

            color: var(--link-color) !important;

        }

    

        .main-menu .link-active.link-leveltwo>.link,

        .main-menu .link-hover.link-leveltwo>.link,

        .main-menu .link-levelone.link-active>.link,

        .main-menu .link-levelone.link-hover>.link,

        .main-menu .link-levelone.ul-open>.link,

        .main-menu .ul-open.link-leveltwo>.link {

            background: var(--menu-bg) !important;

        }

    

        /* Encabezados y pies */

        .page-head-tabs,

        body {

            background: var(--nav) !important;

        }

    

        .card-header {

            background-color: var(--head) !important;

            border-bottom: 1px solid #0e0f11;

        }

    

        .card-footer {

            background-color: var(--footer) !important;

        }

    

        /* Botones */

        .btn-primary {

            color: #0e0f11 !important;

            background-color: var(--btn-primary-bg) !important;

            border-color: var(--btn-primary-border) !important;

        }

    

        .btn-outline-secondary.disabled,

        .btn-outline-secondary:disabled {

            border-color: var(--btn-outline-secondary-border) !important;

        }

    

        .btn-outline-secondary {

            color: #172308;

            background-color: var(--btn-outline-secondary-bg);

            background-image: none;

            border-color: var(--btn-outline-secondary-border);

            border-radius: 50px;

        }

    

        /* Iconos y botones dentro de tarjetas */

        .card-header .main-header #header-search-container .input-group::before,

        .card-header .material-icons,

        .card-header .ps-tree-items .tree-name button::before,

        .main-header #header-search-container .card-header .input-group::before,

        .ps-tree-items .tree-name .card-header button::before {

            color: var(--card-header-color) !important;

        }

    