/* ===========================
   PALETA DE COLORES
=========================== */

:root {
    --primary: #0B1F3A;
    --primary-dark: #08172C;
    --primary-light: #214F88;
    --background: #F4F6F9;
    --white: #FFFFFF;
    --black: #1B1B1B;
    --success: #198754;
    --warning: #FFC107;
    --danger: #DC3545;
    --shadow: rgba(0,0,0,.15);
}

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

body {
    background: var(--background);
    color: var(--black);
    font-family: Inter,sans-serif;
}

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

.navbar-pro {
    background: linear-gradient( 135deg, var(--primary), var(--primary-light));
    color: white;
    box-shadow: 0 5px 15px var(--shadow);
}

/* ===========================
   CARD
=========================== */

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

.card-pro {
    border: 1px solid var(--gsk-border);
    border-radius: var(--gsk-radius-lg);
    background: var(--gsk-surface);
    box-shadow: var(--gsk-shadow-md);
    overflow: hidden;
    margin-bottom: 22px;
}


.card-header-pro {
    min-height: 58px;
    padding: 0 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    color: var(--gsk-primary);
    border-bottom: 1px solid var(--gsk-border);
    font-size: 16px;
    font-weight: 700;
}


    .card-header-pro i {
        color: #1769C2;
        font-size: 18px;
    }

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

.btn-pro {
    min-height: 44px;
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, var(--gsk-primary-dark), var(--gsk-primary) );
    color: white;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}


    .btn-pro:hover {
        color: white;
        transform: translateY(-1px);
        box-shadow: 0 5px 12px rgba(11,31,58,.20);
    }


    .btn-pro:active {
        transform: translateY(0);
    }


    .btn-pro i {
        margin-right: 7px;
    }

/* ===========================
   INPUTS
=========================== */

.form-control,
.form-select {
    min-height: 46px;
    border: 1px solid #D7DEE8;
    border-radius: 10px;
    color: var(--gsk-text);
    background: white;
    transition: border-color .2s ease, box-shadow .2s ease;
}


    .form-control::placeholder {
        color: #94A3B8;
    }


    .form-control:focus,
    .form-select:focus {
        border-color: #2B6CB0;
        box-shadow: 0 0 0 3px rgba(43,108,176,.10);
        outline: none;
    }

/* ===========================
   TABLAS
=========================== */
.table-wrapper {
    border: 1px solid var(--gsk-border);
    border-radius: 10px;
    overflow: hidden;
    background: white;
}


.table {
    margin-bottom: 0;
}


    .table thead {
        background: #F8FAFC;
        color: var(--gsk-primary);
        border-bottom: 1px solid var(--gsk-border);
    }


        .table thead th {
            padding: 15px 18px;
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }


    .table tbody td {
        padding: 13px 18px;
        color: #172B4D;
        font-size: 14px;
        vertical-align: middle;
        border-color: #E8EDF3;
    }


    .table tbody tr {
        transition: background .15s ease;
    }


        .table tbody tr:hover {
            background: #F8FAFF;
        }
/* ===========================
   ESTADO ACTIVO
=========================== */
.status-active {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    background: #ECFDF3;
    border: 1px solid #BBF7D0;
    color: #15803D;
    font-size: 12px;
    font-weight: 600;
}
/* ===========================
   ALERTAS
=========================== */

.alert {
    border-radius: 12px;
}

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

.page-title {
    margin: 0;
    color: var(--gsk-primary);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -.3px;
}


.page-subtitle {
    margin-top: 5px;
    color: var(--gsk-text-muted);
    font-size: 14px;
}
/*==================================
 BOTONES
==================================*/

.btn-pro {
    min-width: 140px;
    font-weight: 600;
}

    .btn-pro i {
        margin-right: 8px;
    }
/* =========================================================
   SIDEBAR CONTRAÍDO - ESCRITORIO
========================================================= */

.sidebar-collapsed .sidebar {
    width: 82px !important;
}


    /* Ocultar textos de la marca */

    .sidebar-collapsed .sidebar .brand-text {
        display: none;
    }


    /* Centrar logo */

    .sidebar-collapsed .sidebar .brand {
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }


    .sidebar-collapsed .sidebar .logo {
        margin: 0;
    }


    /* Navegación más estrecha */

    .sidebar-collapsed .sidebar nav {
        padding-left: 10px;
        padding-right: 10px;
    }


        /* Centrar elementos */

        .sidebar-collapsed .sidebar nav a {
            justify-content: center;
            padding-left: 10px;
            padding-right: 10px;
            gap: 0;
        }


            /* Centrar iconos */

            .sidebar-collapsed .sidebar nav a i {
                width: auto;
                min-width: 0;
                margin: 0;
                font-size: 20px;
            }


            /* Ocultar texto de navegación */

            .sidebar-collapsed .sidebar nav a span {
                display: none;
            }


    /* Ocultar texto del botón salir */

    .sidebar-collapsed .sidebar .logout button span {
        display: none;
    }


    /* Centrar botón salir */

    .sidebar-collapsed .sidebar .logout button {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 10px;
        padding-right: 10px;
    }


/* Mover contenido */

.sidebar-collapsed > main {
    margin-left: 82px !important;
    width: calc(100% - 82px) !important;
}


    /* Mover TopBar */

    .sidebar-collapsed > main > .topbar {
        left: 82px !important;
        width: calc(100% - 82px) !important;
    }
/*==================================
 TOOLBAR
==================================*/

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    :root {
        --topbar-height: 64px;
    }


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

    .app-container .sidebar {
        display: none !important;
    }


    /* Evitar que el estado contraído
       afecte al móvil */

    .sidebar-collapsed > main,
    .app-container > main {
        margin-left: 0 !important;
        width: 100% !important;
    }


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

        .app-container > main > .topbar,
        .sidebar-collapsed > main > .topbar {
            left: 0 !important;
            width: 100% !important;
            height: var(--topbar-height);
            padding: 0 16px;
        }


    /* La hamburguesa no hace falta
       porque usamos navegación inferior */

    .menu-button {
        display: none;
    }


    .system-title h5 {
        font-size: 17px;
    }


    .system-title span {
        font-size: 11px;
    }


    /* ===========================
       CONTENIDO
    =========================== */

    .app-container > main > .content {
        padding: 20px 15px 90px;
        padding-top: calc(var(--topbar-height) + 20px);
    }


    /* ===========================
       BOTTOM NAVIGATION
    =========================== */

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 70px;
        display: flex;
        align-items: stretch;
        justify-content: space-around;
        background: white;
        border-top: 1px solid #E2E8F0;
        box-shadow: 0 -4px 18px rgba(15,23,42,.08);
        z-index: 4000;
    }


        .bottom-nav > a,
        .bottom-nav > .logout-mobile {
            flex: 1;
            min-width: 0;
            height: 100%;
        }


        /* Enlaces */

        .bottom-nav > a {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: #64748B;
            text-decoration: none;
            font-size: 10px;
            transition: .2s ease;
        }


            .bottom-nav > a i {
                font-size: 21px;
            }


            /* Activo */

            .bottom-nav > a.active {
                color: var(--gsk-primary);
                font-weight: 600;
            }


                .bottom-nav > a.active::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 28%;
                    right: 28%;
                    height: 3px;
                    background: var(--gsk-primary-light);
                    border-radius: 0 0 4px 4px;
                }


    /* ===========================
       SALIR
    =========================== */

    .logout-mobile {
        margin: 0;
    }


        .logout-mobile button {
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 0;
            color: #64748B;
            font-size: 10px;
        }


            .logout-mobile button i {
                font-size: 21px;
            }


            .logout-mobile button:hover {
                color: var(--gsk-danger);
            }
}
/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px) {

    .page-title {
        font-size: 22px;
    }
}