/* ==========================================================
   SISTEMA DE RECURSOS HUMANOS
   Fundación Ciudad de Oro RL
   ----------------------------------------------------------
   Archivo: style.css
   Descripción:
   Hoja de estilos principal del sistema.
========================================================== */


/* ==========================================================
   1. VARIABLES GLOBALES
========================================================== */

:root{

    /* Colores institucionales */

    --color-primario:#0d6efd;
    --color-secundario:#0b5ed7;
    --color-exito:#198754;
    --color-peligro:#dc3545;
    --color-advertencia:#ffc107;
    --color-info:#0dcaf0;

    /* Escala de grises */

    --gris-100:#f8f9fa;
    --gris-200:#e9ecef;
    --gris-300:#dee2e6;
    --gris-400:#ced4da;
    --gris-500:#adb5bd;
    --gris-600:#6c757d;
    --gris-700:#495057;
    --gris-800:#343a40;
    --gris-900:#212529;

    /* Fondo general */

    --fondo:#f4f6f9;

    /* Texto */

    --texto:#212529;

    /* Sidebar */

    --sidebar:#1f242b;
    --sidebar-hover:#2d343d;

    /* Navbar */

    --navbar:#ffffff;

    /* Bordes */

    --borde:#dee2e6;

    /* Sombra */

    --sombra:0 2px 12px rgba(0,0,0,.08);

    /* Bordes redondeados */

    --radio:12px;

}


/* ==========================================================
   2. CONFIGURACIÓN GENERAL
========================================================== */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html,
body{

    height:100%;

    font-family:
        "Segoe UI",
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;

    background:var(--fondo);

    color:var(--texto);

}


/* ==========================================================
   3. LAYOUT PRINCIPAL
========================================================== */

.layout{

    display:flex;

    min-height:calc(100vh - 60px);

}


/* ==========================================================
   4. SIDEBAR
========================================================== */

.sidebar{

    width:260px;

    background:var(--sidebar);

    color:white;

    flex-shrink:0;

    min-height:calc(100vh - 60px);

    box-shadow:2px 0 8px rgba(0,0,0,.10);

}

.sidebar-header{

    padding:25px 20px;

    border-bottom:1px solid rgba(255,255,255,.10);

}

.sidebar-header h4{

    margin:0;

    font-size:22px;

    font-weight:600;

}

.sidebar-menu{

    list-style:none;

    padding:15px 0;

    margin:0;

}

.sidebar-menu li{

    margin-bottom:5px;

}

.sidebar-menu a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d5d7da;

    text-decoration:none;

    padding:14px 22px;

    transition:.3s;

    font-size:16px;

}

.sidebar-menu a:hover{

    background:var(--sidebar-hover);

    color:white;

    border-left:5px solid var(--color-primario);

}

.sidebar-menu i{

    font-size:20px;

    width:25px;

}


/* ==========================================================
   5. CONTENIDO PRINCIPAL
========================================================== */

main{

    flex:1;

    padding:35px;

}


/* ==========================================================
   6. TARJETAS
========================================================== */

.card{

    border:none;

    border-radius:var(--radio);

    box-shadow:var(--sombra);

}


/* ==========================================================
   7. BOTONES
========================================================== */

.btn{

    border-radius:8px;

    font-weight:600;

}


/* ==========================================================
   8. TABLAS
========================================================== */

.table{

    background:white;

    border-radius:var(--radio);

}


/* ==========================================================
   9. FORMULARIOS
========================================================== */

.form-control,
.form-select{

    border-radius:8px;

}


/* ==========================================================
   10. FOOTER
========================================================== */

footer{

    background:white;

    border-top:1px solid var(--borde);

}


/* ==========================================================
   11. RESPONSIVE
========================================================== */

/* ==========================================================
   TABLET Y MÓVIL
========================================================== */

@media (max-width: 991.98px){

    /*
     * El contenido principal pasa a ocupar
     * todo el ancho disponible.
     */

    .layout{

        display:block;

        width:100%;

        min-height:calc(100vh - 60px);

    }


    /*
     * Barra que contiene el botón Menú.
     */

    .mobile-menu-bar{

        width:100%;

        padding:12px 20px;

        background:var(--sidebar);

        border-bottom:1px solid rgba(255,255,255,.10);

    }


    .mobile-menu-bar .btn{

        display:inline-flex;

        align-items:center;

        justify-content:center;

    }


    /*
     * El contenido principal utiliza
     * todo el ancho de la pantalla.
     */

    main{

        width:100%;

        min-width:0;

        padding:20px;

    }


    /*
     * Configuración del menú lateral móvil.
     */

    #sidebarMobile{

        width:280px;

    }


    #sidebarMobile .offcanvas-body{

        padding:15px;

    }


    #sidebarMobile .list-group-item{

        border-radius:0;

    }


    /*
     * Evita que elementos demasiado anchos
     * provoquen desbordamiento de toda la página.
     */

    img{

        max-width:100%;

        height:auto;

    }

}


/* ==========================================================
   TELÉFONOS
========================================================== */

@media (max-width: 575.98px){

    /*
     * Reducimos espacios para aprovechar
     * mejor pantallas pequeñas.
     */

    main{

        padding:15px;

    }


    .mobile-menu-bar{

        padding:10px 15px;

    }


    /*
     * Títulos ligeramente más pequeños.
     */

    h1,
    .h1{

        font-size:1.75rem;

    }


    h2,
    .h2{

        font-size:1.5rem;

    }


    /*
     * Las tarjetas aprovechan todo
     * el ancho disponible.
     */

    .card{

        width:100%;

    }


    /*
     * Los formularios ocupan todo el ancho.
     */

    .form-control,
    .form-select{

        width:100%;

    }


    /*
     * El menú móvil ocupa una proporción
     * adecuada de la pantalla.
     */

    #sidebarMobile{

        width:85%;

        max-width:320px;

    }

}