/*
|--------------------------------------------------------------------------
| DISAYM ERP — DESIGN SYSTEM
|--------------------------------------------------------------------------
|
| Identidad:
|   Verde + verde profundo + carbón + neutros.
|
| Regla:
|   Sin azules / cian / índigo como colores de interfaz.
|
| Este archivo no contiene lógica comercial.
|--------------------------------------------------------------------------
*/

:root {

    /* Marca */
    --disaym-green: #0C8B5B;
    --disaym-green-strong: #087348;
    --disaym-green-soft: #16B978;
    --disaym-lime: #79B943;
    --disaym-deep: #123426;

    /* Fondos claros */
    --disaym-bg-light: #F4F7F5;
    --disaym-surface-light: #FFFFFF;
    --disaym-elevated-light: #F8FAF8;
    --disaym-border-light: #DCE5DF;

    /* Fondos oscuros */
    --disaym-bg-dark: #090D0B;
    --disaym-surface-dark: #111613;
    --disaym-elevated-dark: #171E1A;
    --disaym-border-dark: #28322C;

    /* Texto */
    --disaym-text-dark: #172019;
    --disaym-text-muted-light: #657168;
    --disaym-text-light: #F2F6F3;
    --disaym-text-muted-dark: #9EA9A2;

    /* Estados */
    --disaym-warning: #C68D2D;
    --disaym-danger: #D65049;
    --disaym-success: #16B978;

    /*
    |--------------------------------------------------------------------------
    | COMPATIBILIDAD CON VARIABLES EXISTENTES
    |--------------------------------------------------------------------------
    */

    --corp-green: var(--disaym-green);
    --corp-green-light: var(--disaym-green-soft);

    --neon-green: var(--disaym-green-soft);
    --neon-green-dim: var(--disaym-green-strong);

    /*
     * Aunque algunos archivos todavía usan nombres heredados
     * "accent-blue", visualmente YA NO SON AZULES.
     */
    --accent-blue: var(--disaym-green);
    --accent-teal: var(--disaym-green-soft);
    --accent-purple: #608067;
    --accent-orange: var(--disaym-warning);
    --accent-red: var(--disaym-danger);

    --warning-gold: var(--disaym-warning);

    --bg-body: var(--disaym-bg-light);
    --bg-surface: var(--disaym-surface-light);
    --bg-elevated: var(--disaym-elevated-light);

    --text-main: var(--disaym-text-dark);
    --text-muted: var(--disaym-text-muted-light);

    --border-color: var(--disaym-border-light);
    --glass-border: var(--disaym-border-light);

    --header-bg: #EEF4F0;
    --hover-bg: #E9F3ED;

    --input-bg: #F7FAF8;

    --input-focus-shadow:
        rgba(12, 139, 91, 0.20);
}


[data-theme="dark"] {

    --bg-body: var(--disaym-bg-dark);
    --bg-surface: var(--disaym-surface-dark);
    --bg-elevated: var(--disaym-elevated-dark);

    --text-main: var(--disaym-text-light);
    --text-muted: var(--disaym-text-muted-dark);

    --border-color: var(--disaym-border-dark);
    --glass-border: var(--disaym-border-dark);

    --header-bg: #151B17;
    --hover-bg: #1B241E;

    --input-bg: #111713;

    --input-focus-shadow:
        rgba(22, 185, 120, 0.18);
}


/*
|--------------------------------------------------------------------------
| BASE
|--------------------------------------------------------------------------
*/

html {
    accent-color: var(--disaym-green);
}

body {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

::selection {
    background:
        rgba(22, 185, 120, 0.28);

    color: inherit;
}


/*
|--------------------------------------------------------------------------
| BOTONES
|--------------------------------------------------------------------------
*/

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

    background:
        linear-gradient(
            135deg,
            var(--disaym-green-soft),
            var(--disaym-green)
        ) !important;

    border-color:
        var(--disaym-green) !important;

    color:
        #FFFFFF !important;

    box-shadow:
        0 7px 20px
        rgba(12, 139, 91, 0.18) !important;
}

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

    background:
        linear-gradient(
            135deg,
            var(--disaym-green),
            var(--disaym-green-strong)
        ) !important;

    box-shadow:
        0 10px 25px
        rgba(12, 139, 91, 0.28) !important;
}


/*
|--------------------------------------------------------------------------
| LINKS / FOCUS
|--------------------------------------------------------------------------
*/

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {

    outline:
        2px solid
        var(--disaym-green-soft) !important;

    outline-offset:
        2px;
}


/*
|--------------------------------------------------------------------------
| DASHBOARD / SIDEBAR
|--------------------------------------------------------------------------
*/

.sidebar-logo span,
.brand-name,
.logo-text {

    color:
        var(--disaym-green-soft) !important;
}

.status-led.online {

    background:
        var(--disaym-green-soft) !important;

    box-shadow:
        0 0 12px
        rgba(22, 185, 120, 0.5) !important;
}


/*
|--------------------------------------------------------------------------
| KPI
|--------------------------------------------------------------------------
*/

.kpi-blue::after,
.kpi-green::after,
.kpi-purple::after,
.kpi-teal::after {

    background:
        linear-gradient(
            90deg,
            var(--disaym-green-soft),
            transparent
        ) !important;
}

.kpi-orange::after {

    background:
        linear-gradient(
            90deg,
            var(--disaym-warning),
            transparent
        ) !important;
}

.kpi-red::after {

    background:
        linear-gradient(
            90deg,
            var(--disaym-danger),
            transparent
        ) !important;
}


/*
|--------------------------------------------------------------------------
| TARJETAS
|--------------------------------------------------------------------------
*/

.kpi-card,
.app-card,
.mobile-pipeline-card,
.card,
.panel {

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

.kpi-card:hover,
.app-card:hover {

    border-color:
        rgba(22, 185, 120, 0.40) !important;

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.16) !important;
}


/*
|--------------------------------------------------------------------------
| TABLAS
|--------------------------------------------------------------------------
*/

table thead th {

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

tbody tr:hover {

    background:
        rgba(22, 185, 120, 0.055);
}


/*
|--------------------------------------------------------------------------
| BADGES
|--------------------------------------------------------------------------
*/

.bg-success,
.badge-success,
.badge.aprobada {

    background:
        rgba(22, 185, 120, 0.13) !important;

    color:
        #41D89B !important;

    border-color:
        rgba(22, 185, 120, 0.26) !important;
}

.bg-process,
.badge-process {

    background:
        rgba(198, 141, 45, 0.12) !important;

    color:
        #D9A849 !important;

    border-color:
        rgba(198, 141, 45, 0.27) !important;
}


/*
|--------------------------------------------------------------------------
| ACCIONES
|--------------------------------------------------------------------------
*/

.action-btn-premium:hover {

    border-color:
        rgba(22, 185, 120, 0.42) !important;
}

.btn-wa {

    color:
        var(--disaym-green-soft) !important;

    border-color:
        rgba(22, 185, 120, 0.32) !important;
}


/*
|--------------------------------------------------------------------------
| MODALES
|--------------------------------------------------------------------------
*/

.modal-box {

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

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, 0.35) !important;
}


/*
|--------------------------------------------------------------------------
| PREVIEW PDF OFICIAL
|--------------------------------------------------------------------------
*/

.disaym-pdf-frame {

    display:
        block;

    width:
        100%;

    min-height:
        62vh;

    border:
        0;

    background:
        #FFFFFF;
}

.disaym-preview-loading {

    min-height:
        420px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--text-muted);

    font-size:
        14px;
}


/*
|--------------------------------------------------------------------------
| DISAYM ERP — REFINAMIENTO VISUAL V2
|--------------------------------------------------------------------------
|
| Verde DISAYM + carbón + neutros cálidos.
| Azul, cyan e índigo quedan fuera de la identidad visual.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| NAVEGACIÓN
|--------------------------------------------------------------------------
*/

.sidebar,
.topbar,
.fs-header,
.main-header {

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

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


.sidebar a,
.sidebar button {

    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease !important;
}


.sidebar a:hover,
.sidebar button:hover {

    background:
        rgba(22, 185, 120, .075) !important;
}


.sidebar .active,
.sidebar a.active,
.nav-item.active {

    background:
        rgba(22, 185, 120, .14) !important;

    border-color:
        rgba(22, 185, 120, .22) !important;

    color:
        var(--disaym-green-soft) !important;
}


/*
|--------------------------------------------------------------------------
| ICONOS DE MODULOS
|--------------------------------------------------------------------------
*/

.app-icon {

    background:
        rgba(22, 185, 120, .10) !important;

    color:
        var(--disaym-green-soft) !important;
}


.app-card:nth-child(3n+2) .app-icon {

    background:
        rgba(121, 185, 67, .10) !important;

    color:
        var(--disaym-lime) !important;
}


.app-card:nth-child(4n) .app-icon {

    background:
        rgba(12, 139, 91, .13) !important;

    color:
        #24C184 !important;
}


/*
|--------------------------------------------------------------------------
| FORMULARIOS
|--------------------------------------------------------------------------
*/

.form-control,
input,
select,
textarea {

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


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

    border-color:
        var(--disaym-green) !important;

    box-shadow:
        0 0 0 3px
        rgba(22, 185, 120, .10) !important;
}


/*
|--------------------------------------------------------------------------
| BOTONES SECUNDARIOS
|--------------------------------------------------------------------------
*/

.btn-outline:hover {

    border-color:
        var(--disaym-green) !important;

    color:
        var(--disaym-green-soft) !important;

    background:
        rgba(22, 185, 120, .07) !important;
}


/*
|--------------------------------------------------------------------------
| TABLAS OPERATIVAS
|--------------------------------------------------------------------------
*/

table {

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


table thead {

    background:
        rgba(255, 255, 255, .025) !important;
}


table thead th {

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


table tbody td {

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


[data-theme="dark"] table tbody tr:hover {

    background:
        rgba(22, 185, 120, .045) !important;
}


/*
|--------------------------------------------------------------------------
| ESTADOS
|--------------------------------------------------------------------------
*/

.badge.bg-process,
.bg-process {

    background:
        rgba(198, 141, 45, .12) !important;

    border:
        1px solid
        rgba(198, 141, 45, .25) !important;

    color:
        #DCA94A !important;
}


.badge.bg-success,
.bg-success {

    background:
        rgba(22, 185, 120, .11) !important;

    border:
        1px solid
        rgba(22, 185, 120, .24) !important;

    color:
        #35D69A !important;
}


/*
|--------------------------------------------------------------------------
| PDF / PREVIEW
|--------------------------------------------------------------------------
*/

#preview_content {

    padding:
        0 !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    background:
        #F4F7F5 !important;
}


.disaym-pdf-frame {

    width:
        100% !important;

    height:
        68vh !important;

    min-height:
        560px;

    border:
        0 !important;

    display:
        block;

    background:
        #FFFFFF;
}


.disaym-preview-loading {

    height:
        60vh;

    min-height:
        440px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    font-size:
        14px;

    color:
        var(--text-muted);

    background:
        var(--bg-surface);
}


/*
|--------------------------------------------------------------------------
| SCROLL
|--------------------------------------------------------------------------
*/

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        #425047 transparent;
}


::-webkit-scrollbar {

    width:
        9px;

    height:
        9px;
}


::-webkit-scrollbar-track {

    background:
        transparent;
}


::-webkit-scrollbar-thumb {

    background:
        #3B4840;

    border-radius:
        99px;
}


::-webkit-scrollbar-thumb:hover {

    background:
        #526057;
}