.fg500 {
    font-weight: 500;
}

/* Setea la base de los nav-tabs y lo deja con Z-index de -2 para poder hacerle click a los li */
.nav-tabs {
    border: 0 !important;
    font-weight: 600;
    z-index: -2;
}

    /* pa todos, esté o no seleccionado */
    .nav-tabs > li {
        margin: 0 0.25em;
        top: 1px;
        z-index: 1;
        transition: 0.05s;
        margin-left: 0px;
    }

        /* Redondes de botón */
        .nav-tabs > li > a {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            height: 40px;
        }

            .nav-tabs > li > a:not(disabled) {
                cursor: pointer;
            }

        /* Si no está seleccionado, está detras del box y además, está más a bajo */
        .nav-tabs > li:not(.active) {
            top: 4px;
            height: 35px;
            z-index: 0;
        }

        /* Cuando esté activo, toma bordes azul oscuro, color celeste y fondo celeste tipo topPanel */
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
            border: 1px solid #0681B2;
            border-bottom: 1px solid #c3e4f4;
            color: #0681B2;
            background: #c3e4f4;
        }

        /* Cuando no esté activo: Fondo transparente, bordes celestes y borde inferior transparente */
        .nav-tabs > li:not(active) > a, .nav-tabs > li:not(active) > a:hover, .nav-tabs > li:not(active) > a:focus {
            background-color: rgba(0,0,0,0);
            color: rgba(0, 0, 0, 0.70);
            border: 1px solid rgba(6, 129, 178, 0.25);
            border-bottom: 1px solid rgba(0,0,0,0);
        }

    /* Mata los bordes redondeados del box si es que es el siguiente elemento */
    .nav-tabs + .box {
        border-top: 0px;
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
    }