/* ============================================================
   ACAEXAM
   Estilos generales
============================================================ */

:root {

    --aca-primary: #3157d5;
    --aca-primary-dark: #243fa4;
    --aca-primary-light: #edf1ff;

    --aca-secondary: #683fd3;

    --aca-dark: #172033;
    --aca-text: #263248;
    --aca-muted: #718096;

    --aca-background: #f5f7fb;
    --aca-white: #ffffff;

    --aca-border: #e3e8f0;

    --aca-success: #198754;
    --aca-danger: #dc3545;
}


/* ============================================================
   BODY
============================================================ */

body.acaexam-body {

    margin: 0;

    background:
        #f5f7fb;

    color:
        var(--aca-text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}


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

.acaexam-navbar {

    min-height: 78px;

    background:
        linear-gradient(
            110deg,
            #243fa4 0%,
            #3157d5 55%,
            #683fd3 100%
        );

    box-shadow:
        0 4px 18px
        rgba(23, 32, 51, 0.15);

    padding-top: 8px;
    padding-bottom: 8px;
}


/* ============================================================
   LOGO
============================================================ */

.acaexam-brand {

    display: flex;

    align-items: center;

    margin-right: 35px;

    padding: 0;
}


.acaexam-logo {

    display: block;

    width: auto;

    height: 54px;

    max-width: 220px;

    object-fit: contain;
}


/* ============================================================
   LINKS DEL MENÚ
============================================================ */

.acaexam-menu {

    align-items: center;
}


.acaexam-menu .nav-item {

    margin-right: 4px;
}


.acaexam-menu .nav-link {

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-weight: 500;

    font-size: 15px;

    padding:
        9px 14px !important;

    border-radius: 8px;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}


.acaexam-menu .nav-link:hover {

    color:
        #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );
}


/* ============================================================
   INFORMACIÓN DEL USUARIO
============================================================ */

.acaexam-user-area {

    display: flex;

    align-items: center;

    gap: 18px;
}


.acaexam-user-info {

    text-align: right;

    color:
        #ffffff;
}


.acaexam-user-name {

    font-size: 14px;

    font-weight: 600;

    line-height: 1.3;
}


.acaexam-user-details {

    margin-top: 3px;

    display: flex;

    justify-content: flex-end;

    align-items: center;

    flex-wrap: wrap;

    gap: 5px;

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 11px;

    line-height: 1.3;
}


.acaexam-user-type {

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-weight: 600;
}


.acaexam-school {

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-weight: 600;
}


.acaexam-separator {

    opacity: 0.5;
}


/* ============================================================
   BOTÓN SALIR
============================================================ */

.acaexam-btn-logout {

    color:
        #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.55
        );

    border-radius: 8px;

    padding:
        6px 15px;

    font-size: 13px;

    font-weight: 500;

    transition:
        all 0.15s ease;
}


.acaexam-btn-logout:hover {

    color:
        var(--aca-primary-dark);

    background:
        #ffffff;

    border-color:
        #ffffff;
}


/* ============================================================
   TARJETAS
============================================================ */

.card {

    border:
        1px solid
        var(--aca-border);

    border-radius:
        12px;

    box-shadow:
        0 3px 14px
        rgba(
            23,
            32,
            51,
            0.06
        );
}


.card-header {

    background:
        #ffffff;

    border-bottom:
        1px solid
        var(--aca-border);

    font-weight:
        600;
}


/* ============================================================
   TÍTULOS
============================================================ */

h1,
h2,
h3,
h4,
h5 {

    color:
        var(--aca-dark);

    font-weight:
        600;
}


/* ============================================================
   BOTÓN PRINCIPAL
============================================================ */

.btn-primary {

    --bs-btn-bg:
        var(--aca-primary);

    --bs-btn-border-color:
        var(--aca-primary);

    --bs-btn-hover-bg:
        var(--aca-primary-dark);

    --bs-btn-hover-border-color:
        var(--aca-primary-dark);

    --bs-btn-active-bg:
        var(--aca-primary-dark);

    --bs-btn-active-border-color:
        var(--aca-primary-dark);

    border-radius:
        8px;
}


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

.btn-outline-primary {

    --bs-btn-color:
        var(--aca-primary);

    --bs-btn-border-color:
        var(--aca-primary);

    --bs-btn-hover-bg:
        var(--aca-primary);

    --bs-btn-hover-border-color:
        var(--aca-primary);

    border-radius:
        8px;
}


/* ============================================================
   CAMPOS
============================================================ */

.form-control,
.form-select {

    border:
        1px solid
        #d9dfeb;

    border-radius:
        8px;

    min-height:
        42px;
}


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

    border-color:
        var(--aca-primary);

    box-shadow:
        0 0 0 0.2rem
        rgba(
            49,
            87,
            213,
            0.13
        );
}


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

.table {

    --bs-table-bg:
        transparent;
}


.table thead.table-dark {

    --bs-table-bg:
        var(--aca-dark);

    --bs-table-color:
        #ffffff;
}


.table > :not(caption) > * > * {

    padding:
        12px 14px;
}


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

.badge {

    font-weight:
        500;

    padding:
        6px 9px;

    border-radius:
        6px;
}


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

a {

    color:
        var(--aca-primary);
}


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

@media (
    max-width: 991.98px
) {

    .acaexam-navbar {

        min-height:
            70px;
    }


    .acaexam-logo {

        height:
            46px;
    }


    .acaexam-menu {

        margin-top:
            15px;

        align-items:
            stretch;
    }


    .acaexam-menu .nav-item {

        margin-right:
            0;

        margin-bottom:
            3px;
    }


    .acaexam-menu .nav-link {

        padding:
            10px !important;
    }


    .acaexam-user-area {

        margin-top:
            15px;

        padding-top:
            15px;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.15
            );

        justify-content:
            space-between;
    }


    .acaexam-user-info {

        text-align:
            left;
    }


    .acaexam-user-details {

        justify-content:
            flex-start;
    }

}