/* ==========================================================
   LUMEXA · IDENTIDAD CORPORATIVA 2026
   ========================================================== */

:root{

    /* Marca */
    --lx-deep:#12004d;
    --lx-deep-2:#1b0868;
    --lx-primary:#3518a5;
    --lx-violet:#5d2ed1;
    --lx-purple:#8750ed;
    --lx-lilac:#b88cff;

    /* Fondos */
    --lx-bg:#f8f6fc;
    --lx-bg-soft:#f3effb;
    --lx-bg-card:#ffffff;

    /* Textos */
    --lx-ink:#21184b;
    --lx-text:#352d50;
    --lx-muted:#786f93;

    /* Bordes */
    --lx-line:#e4ddf1;
    --lx-line-strong:#d2c6e9;

    /* Compatibilidad con estilos existentes LUMEXA */
    --navy:#12004d !important;
    --navy2:#1b0868 !important;
    --blue:#5d2ed1 !important;
    --cyan:#8750ed !important;
    --ink:#21184b !important;
    --muted:#786f93 !important;
    --line:#e4ddf1 !important;
    --bg:#f8f6fc !important;

    /* Bootstrap si está presente */
    --bs-primary:#5d2ed1;
    --bs-primary-rgb:93,46,209;
    --bs-link-color:#5d2ed1;
    --bs-link-hover-color:#3518a5;
}


/* ==========================================================
   ESTRUCTURA GENERAL
   ========================================================== */

html,
body{
    background:#f8f6fc !important;
    color:var(--lx-text);
}

body{
    accent-color:var(--lx-violet);
}


/* zona principal */

.main-content,
.content,
.content-wrapper,
.page-content,
.app-content,
.dashboard-content,
main{
    background:
        linear-gradient(
            145deg,
            #fbfaff 0%,
            #f7f4fc 60%,
            #f2eef9 100%
        ) !important;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.sidebar,
.app-sidebar,
.main-sidebar,
.side-menu,
#sidebar{

    background:
        radial-gradient(
            circle at 20% 0%,
            rgba(184,140,255,.20),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #12004d 0%,
            #1b0868 42%,
            #3518a5 100%
        ) !important;

    border-right:
        1px solid rgba(190,160,255,.12) !important;

    box-shadow:
        12px 0 35px rgba(29,8,104,.07) !important;
}


/* logo / encabezado sidebar */

.sidebar-brand,
.sidebar-header,
.brand-area,
.logo-area{
    border-bottom:
        1px solid rgba(255,255,255,.08) !important;
}


/* links sidebar */

.sidebar a,
.sidebar .nav-link,
.sidebar .menu-link,
.sidebar .menu-item,
.app-sidebar a,
.main-sidebar a,
.side-menu a,
#sidebar a{

    color:
        rgba(255,255,255,.75) !important;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease !important;
}


/* hover */

.sidebar a:hover,
.sidebar .nav-link:hover,
.sidebar .menu-link:hover,
.app-sidebar a:hover,
.main-sidebar a:hover,
.side-menu a:hover,
#sidebar a:hover{

    color:#fff !important;

    background:
        rgba(184,140,255,.12) !important;
}


/* activo */

.sidebar .active,
.sidebar .nav-link.active,
.sidebar .menu-link.active,
.app-sidebar .active,
.main-sidebar .active,
.side-menu .active,
#sidebar .active{

    color:#fff !important;

    background:
        linear-gradient(
            90deg,
            rgba(125,70,230,.42),
            rgba(164,111,245,.22)
        ) !important;

    border-color:
        rgba(197,163,255,.30) !important;

    box-shadow:
        inset 3px 0 0 #b88cff !important;
}


/* iconos sidebar */

.sidebar svg,
.sidebar i,
.app-sidebar svg,
.app-sidebar i,
.main-sidebar svg,
.main-sidebar i{

    color:#c9a9ff !important;
}


/* ==========================================================
   TOPBAR / NAVBAR
   ========================================================== */

.topbar,
.top-bar,
.navbar,
.header,
.app-header,
.main-header{

    background:
        rgba(255,255,255,.96) !important;

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

    box-shadow:
        0 5px 22px rgba(44,20,100,.045) !important;
}


.topbar h1,
.topbar h2,
.navbar h1,
.navbar h2,
.header h1,
.header h2{

    color:
        var(--lx-ink) !important;
}


/* ==========================================================
   TITULOS
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    color:
        var(--lx-ink);
}


.page-title,
.section-title,
.content-title{

    color:
        var(--lx-ink) !important;
}


/* ==========================================================
   LINKS
   ========================================================== */

a{
    color:
        var(--lx-violet);
}

a:hover{
    color:
        var(--lx-primary);
}


/* ==========================================================
   CARDS
   ========================================================== */

.card,
.panel,
.widget,
.stat-card,
.metric-card,
.kpi-card,
.dashboard-card,
.info-card{

    background:
        rgba(255,255,255,.98) !important;

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

    box-shadow:
        0 10px 32px rgba(47,23,105,.065) !important;
}


.card:hover,
.stat-card:hover,
.metric-card:hover,
.kpi-card:hover{

    border-color:
        #d3c4ee !important;

    box-shadow:
        0 14px 38px rgba(47,23,105,.09) !important;
}


/* encabezado tarjetas */

.card-header,
.panel-heading{

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #faf8fe
        ) !important;

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

    color:
        var(--lx-ink) !important;
}


/* ==========================================================
   BOTONES PRIMARIOS
   ========================================================== */

.btn-primary,
.button-primary,
.primary-button,
button.primary{

    background:
        linear-gradient(
            135deg,
            #3518a5 0%,
            #5d2ed1 48%,
            #8750ed 100%
        ) !important;

    border-color:
        transparent !important;

    color:#fff !important;

    box-shadow:
        0 8px 20px rgba(81,34,191,.20) !important;
}


.btn-primary:hover,
.button-primary:hover,
.primary-button:hover,
button.primary:hover{

    background:
        linear-gradient(
            135deg,
            #2b108f,
            #5024c4,
            #7942e4
        ) !important;

    box-shadow:
        0 11px 26px rgba(81,34,191,.28) !important;
}


/* botones outline */

.btn-outline-primary{

    color:
        var(--lx-violet) !important;

    border-color:
        #bba5e8 !important;
}

.btn-outline-primary:hover{

    color:#fff !important;

    background:
        var(--lx-violet) !important;

    border-color:
        var(--lx-violet) !important;
}


/* botones suaves */

.btn-light,
.btn-secondary{

    border-color:
        var(--lx-line) !important;
}


/* ==========================================================
   INPUT / SELECT / TEXTAREA
   ========================================================== */

.form-control,
.form-select,
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{

    border-color:
        var(--lx-line) !important;

    color:
        var(--lx-ink);

    background:#fff;
}


.form-control:hover,
.form-select:hover,
input:hover,
select:hover,
textarea:hover{

    border-color:
        #cabbe7 !important;
}


.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus{

    border-color:
        #8151dd !important;

    box-shadow:
        0 0 0 4px rgba(93,46,209,.08) !important;

    outline:none !important;
}


label,
.form-label{

    color:
        #51486a !important;
}


/* ==========================================================
   TABLAS
   ========================================================== */

.table,
table{

    color:
        var(--lx-text);
}


.table thead th,
table thead th{

    background:
        #f4f0fa !important;

    color:
        #493e68 !important;

    border-color:
        var(--lx-line) !important;
}


.table td,
.table th,
table td,
table th{

    border-color:
        #eee9f5 !important;
}


.table tbody tr:hover,
table tbody tr:hover{

    background:
        #faf8fe !important;
}


/* ==========================================================
   BADGES / ESTADOS
   ========================================================== */

.badge-primary,
.badge.bg-primary,
.bg-primary{

    background:
        var(--lx-violet) !important;
}


.text-primary{

    color:
        var(--lx-violet) !important;
}


.border-primary{

    border-color:
        var(--lx-violet) !important;
}


/* badge violeta suave */

.badge-soft-primary,
.badge-purple{

    color:
        #5423bd !important;

    background:
        #eee7fb !important;

    border:
        1px solid #d9c9f4 !important;
}


/* ==========================================================
   PAGINACION
   ========================================================== */

.page-link{

    color:
        var(--lx-violet) !important;

    border-color:
        var(--lx-line) !important;
}


.page-item.active .page-link{

    color:#fff !important;

    background:
        var(--lx-violet) !important;

    border-color:
        var(--lx-violet) !important;
}


/* ==========================================================
   DROPDOWNS
   ========================================================== */

.dropdown-menu{

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

    box-shadow:
        0 15px 40px rgba(46,22,105,.12) !important;
}


.dropdown-item:hover{

    background:
        #f4effc !important;

    color:
        var(--lx-primary) !important;
}


/* ==========================================================
   MODALES
   ========================================================== */

.modal-content{

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

    box-shadow:
        0 28px 80px rgba(36,15,87,.18) !important;
}


.modal-header{

    border-bottom:
        1px solid var(--lx-line) !important;
}


.modal-footer{

    border-top:
        1px solid var(--lx-line) !important;
}


/* ==========================================================
   ALERTAS
   ========================================================== */

.alert-info{

    color:
        #45207f !important;

    background:
        #f2eafd !important;

    border-color:
        #dac7f5 !important;
}


/* ==========================================================
   PROGRESS
   ========================================================== */

.progress-bar{

    background:
        linear-gradient(
            90deg,
            #5122bf,
            #8750ed
        ) !important;
}


/* ==========================================================
   TABS
   ========================================================== */

.nav-tabs{

    border-bottom-color:
        var(--lx-line) !important;
}


.nav-tabs .nav-link{

    color:
        var(--lx-muted) !important;
}


.nav-tabs .nav-link.active{

    color:
        var(--lx-violet) !important;

    border-color:
        var(--lx-line)
        var(--lx-line)
        #fff !important;
}


/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{
    width:9px;
    height:9px;
}

::-webkit-scrollbar-track{
    background:#f2eef8;
}

::-webkit-scrollbar-thumb{

    background:
        #c2afe5;

    border-radius:
        20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#9d7bd9;
}


/* ==========================================================
   SELECCION TEXTO
   ========================================================== */

::selection{

    background:
        #d7c4f7;

    color:
        #28105e;
}